2017 JS开发指南

最新推荐文章于 2024-11-03 21:59:02 发布

ivan820819

最新推荐文章于 2024-11-03 21:59:02 发布

阅读量331

点赞数

分类专栏： javascript

97 篇文章 1 订阅

订阅专栏

转载自： http://zcfy.cc/article/a-map-to-modern-javascript-development-2017-hacker-noon-3696.html

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

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

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

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

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

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

问题: 需要处理第三方依赖和模块加载问题。
解决: Webpack
原因: 高度可配置。可以加载各种依赖，可插拔。
其他选择: Browserify
缺点: 首次配置会比较麻烦
注意: 你需要花一些时间去了解webpack运行机制。以及去了解babel-loader, style-loader, css-loader, file-loader, url-loader。

问题: 这是一个很大的问题。单页应用变得越来越复杂，可变状态很麻烦。
解决: React 和 Redux
为什么使用React: 让人兴奋的是React打破了许多传统教条，更好的组件划分思想：用功能划分替代了原有通过（HTML/CSS/JavaScript）来划分组件的方式。
为什么使用Redux: 如果你的应用很复杂，那你需要用一个工具来管理你的状态。网上有很多工具可以实现，为了节约你的时间请直接学redux吧。它实现简单，Facebook也在用。
其他选择: Angular2, Vue.js.
警告: 当你第一次看到JSX代码时，可能想骂人。请相信我，把HTML，JavaScript和CSS写到一个文件会超级爽，感觉解锁了一个新世界。

问题: 你偶尔也需要操作DOM
解决: jQuery.
原因: 是的，jQuery仍然活的很好，React和jQuery不是水火不容的。你觉得还可以用React原生提供的’querySelector‘，但jQuery的跨浏览器的兼容能力可以为你省去很多麻烦。
其他选择: Dojo (不知道现在还有吗).

问题: 每个组件需要有独立的样式，而且可复用。
解决: CSS模块
原因: 我喜欢用内联样式，但我不得不承认它有很多局限性。当然在React中用也是可以的，但是你不能定位伪类选择器（如 :hover）。
其他选择: 内联样式。我特别喜欢在React中使用内联样式，这样你就可以把样式当做js对象来处理，而且他们在一个文件中，非常容易维护。有些人可能主张用 SASS/SCSS/Less，但是又会增加新的步骤，没有CSS模块/内联样式那么轻便。