画星星高手

It nerver rains but it pours.

喆大师写给前端的一些建议

书籍推荐

《 jvascript高级程序设计(第三版) 》

  • 偏字典书籍,江湖人称望远镜,红宝石书,红皮书,更多叫法等你去发现

《 javascript权威指南(第五版)》

  • 就是字典,江湖人称 犀牛书,特点:厚,全

《 javascript语言精粹 》

  • 一位在 js 界很有权威的人写的书,作者是json的发明者
  • 江湖人称 蝴蝶书,特点:薄
  • 完全就是在讲 js 语法,不涉及前端,顺便屌了一些开发人员

ps:以上书籍均不包含 es6

《 你不知道的javascript 》系列

  • 本系列可以说是 js 书籍中最有深度的书籍
  • 一共6本(纸质版是三卷),在github的有名开源书籍
  • https://github.com/getify/You-Dont-Know-JS
  • 中文纸质版目前只有前两卷
  • 正如书名,讲的是一些你平时不会去深究的问题
  • 以及一些骚操作,如用~~来取整,代替 Math.floor

《 深入理解es6 》

  • 冲着作者是红皮书的作者买的
  • 最近在看这个,里面没有涉及到es7的知识
  • 暂不评价

《 css揭密 》

  • 前几天看的,各种css的骚操作,叹为观止

ps:上面的书我基本都有吧,还有一些书觉得没什么意思,就是不介绍了吧

三大主流框架对比

Angular

  • 一个功能强大的重量级框架,由Google操刀
  • 因为在2.0出现全面更新(说是2个框架也不为过),所以社区被分裂开
  • 顺带一提,1.0和2.0语法相差很大,有些教程还是1.0的
  • 在2.0之后的版本语法兼容,统称新版,现在好像出5.0了吧
  • 1.0不用npm构建,2.0开始需要
  • 2.0开始使用typescript作为亲儿子,需要再学习TS
  • 总结:功能强大,但学习成本也很大

React

  • 一个十分灵活的轻量级框架,由FaceBook操刀
  • JSX,虚拟DOM,组件化思想的开拓者
  • 有句话这么说,在react中一切皆JS,使用JSX代替HTML,CSS也写在js中
  • 由于什么都是js控制,所以也导致了它的灵活
  • 但实际上,它的写法和经典web写法区别很大,让人一开始难以适应
  • 有孪生兄弟 react native
  • 作为2015年最火的前端框架,开创了很多先进的思想
  • 目前在github上star数在前端框架中仍居第一
  • 但我觉得它的文档不是很友好,https://reactjs.org,而且需要科学上网
  • 推荐bootstrap的翻译,只比官文旧一点,而且不用科学上网,https://react.bootcss.com

Vue

  • 同为轻量级框架,但它的写法比react更传统
  • 作者是个国人,目前在 Google Creative Lab 就职
  • 作为2016最火的框架,出生较晚,吸收了许多框架的优点
  • 像react的组件化思想,angular的指令
  • 在最新的版本中支持typescript,jsx,可以选则性使用
  • 开创.vue文件(需要npm构建),更友好的书写组件
  • 十分友好的文档,渐近式的教程
  • 然后依旧推荐bootstrap的镜像,比官网快很多 https://vuejs.bootcss.com/

ps: 由于angular的重型级适合开发大型应用,不太适合开发h5应用,所以推荐在react和vue中选则一个框架学习。(当然这不代表angular差,几乎什么功能在angular都集成了,只是在一些小应用可能用不到这么多东西,而轻量级框架会给我们更多的选则余地)在三个框架中,angualr的学习成本是最大的,功能也是最多的,像包括自带了ajax插件,这些是其它两个框架所是没有的。然后是vue,再是react。react实际上是一个非常小的框架,但它拥有非常庞大的生态社区,像路由react官方不提供,全交给了社区维护,这也是他文档感觉不全的一个原因(翻遍文档找不到的功能,原来根本就不是在这里找,掀桌子),而vue的路由都是由官方维护。虽然我很想公平的评价,但我使用vue的时间是最长的,不得不说vue是很好的,在国际的影响力也是有的(在guithb上js框架的start数仅次于react)。好了,我也不干涉,相信选则哪个心里也有点B数了(提前恭喜又一个被我带进vue坑,趁你们学习vue,我顺便偷偷学习另外两个框架,#[滑稽] )最后,不要一持坚持某个框架,多多尝试新鲜事物,毕竟,生命在于折腾 :)

关于 node & npm

Q: node是什么?

A: 关于node是什么其实没有一个很好的定义,他不是一个新的语言(使用js,但又有自己独立的api),也不是一个web容器(可以不用来写web),简单来说,它只是将原本只能在浏览器上跑的js剥离出来,它设计的初衷是创建一个支持异步的后台。

Q: npm是什么?

A: npm全称 node package manager ,就是node的包管理工具,用来下载和发布node的第三方包,安装node的时候一般会自带安装npm

Q: 所以node作为一个后台技术,那么前端要学吗?

A: 相信前面介绍了那么多,大家也都注意到三个框架都推荐使用npm来构建,那么大家可能会很好奇,前端为什么也要用到node。其实这个问题很好理解,node并不是只能写后台,这个就是好比java不是只能写web,当然,node也不是用来写前端的,node在前端的运用相当一个工具,仅此而已。像在node出现之前,像很多js压缩工具是用别的语言写的,随着node的出现,大家也乐意用js来处理前端的东西,随后也出现了很多前端工具,像webpack,然后node就是渐渐变成一个前端的开发平台,很多插件也可以用npm下载,不必去官网下,通过node这个平台,让前端的开发更加多样化,像自动压缩,es6转es5, less自动编译css等,去除了很多繁琐的操作,更加面向现代化的开发模式。再回到问题,前端是否要学习node,其实说了这么多,前端node的使用其实只是用了别人发布的包,除非你是那些包的开发者,否则会用npm下载,安装东西就是够用了。因为node部分别人帮你写好了。

关于 ES6

  • Q: ES6是什么?

  • A: 在前面的介绍中,相信我多次提到es6,大家心中也会有些疑惑,前端不是用js吗,es6是什么鬼?ES全称EcmaScript,你可以简单理解成这个js的一个版本号,比如ie6支持的js版本是es3。在很多框架文档中,你可能会看到什么let const 关键字,这又是什么鬼,js不是用var吗,别紧张,我第一次看到这些东西的时候,我还以为他用了别的语言做示范,其实这些都是es6的语法。

  • Q: 既然只是个版本号,为什么我没听过什么es5?es6为什么那么屌?

  • A: 因为es6在js的版本变化中是最大的,你想想,连定义的关键字都不用万年var了,简直就是一个新的语言。因为es6的变化巨大,成为标志性的版本,所以es6之后的版本也统称es6, 之前的旧版语法统称es5

  • Q: es6是否值得到学习?

  • A: 很明确告诉你,es6 作为先进的js版本,非常值,用平常的话来讲,就是「你赚了」!

  • Q: 那我学习es6,之前学的js怎么办?

  • A: es6是js的一个版本,向下兼容,你无需担心之前的东西白学了,所以你可以在其中混用es5和es6,像var和let混用,不过我推荐除了兼容低版本ie,使用let来定义,因为var就是有一些缺陷才出现了let和const。当然也可以用babel(npm包)来将es6编译成es5。

ps:还有其它问题就是不一一列举,可以来问我或义大师(推荐使用义大师 #[滑稽])

关于TS

  • Q: 什么是TS

  • A: TS全称typescript,是微软出品,JS的强类型变量版,由C#的设计师设计,所以会有一股浓浓的C#风,推荐喜欢C#或讨厌弱类型JS的人试一试(这里手动@定林)。

  • Q: TS和JS什么关系

  • A: 前面也说了,TS是强类型变量版JS,依赖于NODE,如果要用到前端,那需要将TS编译成JS

ps: 更多TS请自行baidu,google,顺带一提,还有一门js的预编译语言叫CS (CoffeeScript),由github出品,ruby/python风格的js,不过没有TS火,可能是因为CS还是弱变量的关系,解决的类语法糖在es6出来后也不需要了

其它建议

  • 我建议学好es6,不然你可能连文档都看不懂了,这个给一本es6开源的书籍 http://es6.ruanyifeng.com/
  • 然后不要害怕用npm去构建项目,试着跟着框架的文档,用npm安装,你会发现很简单(毕竟只是安装,又不是让你写)
  • 有空多多研究一些开源项目,逛逛github,node社区,(不好意思,我不喜欢看CSDN)下面贴出一些我珍藏的资源

一些资源

  • B站 https://www.bilibili.com/ (你当你什么也没看到)重量级藏品
  • 阿里图标库 http://www.iconfont.cn/ (在没有ui的时候,大显身手)ps:上次冯同学问我图做那么快,用的什么刀,其实我根本就没用什么工具,就是在这里面偷的图标(然而我并没有告诉她,哈哈哈)重量级藏品
  • svg转字体文字 https://icomoon.io/app/#/select
  • 一些图片素材 http://588ku.com/banner/?h=bd (其实相似的网站很多)
  • 一个神奇的网站 http://www.html5tricks.com/ (虽然是一个无名小站,但我能在里面找到很多另人惊叹的作品,也是我平时看源代码的主要网站) 重量级藏品

后序

码字好累,滚回去打代码

点赞

发表评论