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

书籍推荐

《 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/ (虽然是一个无名小站，但我能在里面找到很多另人惊叹的作品，也是我平时看源代码的主要网站) 重量级藏品

后序

码字好累，滚回去打代码

---

了解更多有趣的操作请关注我的微信公众号：DealiAxy

公众号：DealiAxy

每一篇文章都在我的博客有收录：blog.deali.cn