2017年必备的JavaScript开发指南

 
 过去几年可能你一直在写接口。也许一直在优化你们公司数据的搜索速度,也可能在为微波炉写嵌入式程序。是否记得那时你摆弄Prototype.js,已经过去好长一段时间了。现在你决定是时候提升自己的前端技能了,这时你将看到这样一幅风景:

 

当然你不是在里面寻找某人,而且随机寻找25个人,你甚至都不知道他们的名字。这种被淹没的感觉在JavaScript社区非常常见,所以“JavaScript疲劳”这个词是真实存在的。空闲的时候你可以看看这篇文章很贴切的反应了这种现象。

 

你现在没时间,但你又正处在一个巨大的迷宫中,你需要一个地图,所以我制作了这张地图。

 

一个小小的免责声明:这是一个备忘清单,可以让你在不用做太多选择的情况下快速学习。我会列出一些工具来满足大部分场景下的前端开发。当你看完这篇文章,你会有足够的自信来调整你的技术栈。

 

⊙概要

 

我会将地图划分为你需要解决的问题。对于每个问题将包含:

 

  • 问题描述以及所需工具

  • 决定用哪种工具来解决问题

  • 解释我为什么选择这个工具

  • 给出几个替代方案

 

⊙包管理

 

  • 问题: 需要组织管理的你的项目和依赖

  • 解决: NPM 和 Yarn

  • 原因: NPM是市面上非常优秀的包管理工具。Yarn运行在NPM之上,优化了依赖解析,把你的第三方依赖版本锁定在一个文件中。

  • 其他选择: 据我所知还没有。

 

⊙JavaScript

  • 问题: ECMAScript 5 很老派很糟糕

  • 解决: ES6

  • 原因: ES6包含了几个很有用的特性,这些特性其他语言已经存在很久了。说几个有意思的特性吧:箭头函数、具备模块导入导出能力、对象解构、模板字符串、let和const、generators、promises等等。如果你是个python程序员,你会有家的感觉。

  • 其他选择: TypeScript, CoffeeScript, PureScript, Elm

 

⊙语法转化

  • 问题: 许多浏览器还没有大规模的支持ES6。你需要一个程序来将ES6语法转换成ES5。

  • 解决: babel

  • 原因: 完美运行,近乎事实上的标准。在服务器端完成转换。

  • 其他选择: Traceur

  • 注意: 你将使用babel加载器,是一个webpack加载器。如果你使用比如coffeeScript这样的语言,也需要转换。

 

⊙检查工具

  • 问题: 有无数种方法可以写js,所以实现代码一致性很难。用语法检查工具可以阻止一些bugs。

  • 解决: ESLint

  • 原因: 很好的代码检查器,而且还可配置。可以很好的帮助你适应新的语法。

  • 其他选择: JSLint

 

⊙打包工具

  • 问题: 需要处理第三方依赖和模块加载问题。

  • 解决: Webpack

  • 原因: 高度可配置。可以加载各种依赖,可插拔。

  • 其他选择: Browserify

  • 缺点: 首次配置会比较麻烦

  • 注意: 你需要花一些时间去了解webpack运行机制。以及去了解babel-loader, style-loader, css-loader, file-loader, url-loader。

 

⊙测试

  • 问题: 有时候你的代码很脆弱,你需要测试它。

  • 解决: mocha(测试运行器),chai(断言库)。

  • 原因: 使用方便,功能强大.

  • 其他选择: Jasmine, Jest, Sinon, Tape.

 

⊙前端框架 / 状态管理

  • 问题: 这是一个很大的问题。单页应用变得越来越复杂,可变状态很麻烦。

  • 解决: React 和 Redux

  • 为什么使用React: 让人兴奋的是React打破了许多传统教条,更好的组件划分思想:用功能划分替代了原有通过(HTML/CSS/JavaScript)来划分组件的方式。

  • 为什么使用Redux: 如果你的应用很复杂,那你需要用一个工具来管理你的状态。网上有很多工具可以实现,为了节约你的时间请直接学redux吧。它实现简单,Facebook也在用。

  • 其他选择: Angular2, Vue.js.

  • 警告: 当你第一次看到JSX代码时,可能想骂人。请相信我,把HTML,JavaScript和CSS写到一个文件会超级爽,感觉解锁了一个新世界。

 

⊙操作DOM

  • 问题: 你偶尔也需要操作DOM

  • 解决: jQuery.

  • 原因: 是的,jQuery仍然活的很好,React和jQuery不是水火不容的。你觉得还可以用React原生提供的’querySelector‘,但jQuery的跨浏览器的兼容能力可以为你省去很多麻烦。

  • 其他选择: Dojo (不知道现在还有吗).

 

⊙样式

  • 问题: 每个组件需要有独立的样式,而且可复用。

  • 解决: CSS模块

  • 原因: 我喜欢用内联样式,但我不得不承认它有很多局限性。当然在React中用也是可以的,但是你不能定位伪类选择器(如 :hover)。

  • 其他选择: 内联样式。我特别喜欢在React中使用内联样式,这样你就可以把样式当做js对象来处理,而且他们在一个文件中,非常容易维护。有些人可能主张用 SASS/SCSS/Less,但是又会增加新的步骤,没有CSS模块/内联样式那么轻便。

  •  

  • 需要web前端免费课程的同学,QQ登录 http://www.kgc.cn/index.php?tuin=7124,就可以免费领取了

  •  

posted @ 2017-11-09 10:54  CC大神01  阅读(135)  评论(0编辑  收藏  举报