2018本身的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模块/内联样式那么轻便。

转载连接：http://zcfy.cc/article/3696.html