目前来说，web业务日益复杂化和多元化，前端开发已经由以webpage模式为主转变为以webapp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jquery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？
前端工程化就是解决以上问题而生的。
前端工程化有四个特点：模块化、组件化、自动化、规范化。
模块化：
就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协助的可能。在工程化之前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有一定的限制。
js的模块化
- 在es6之前，javascript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如commonjs、amd和cmd等，某些框架也会有自己模块系统，比如angular1.x。
- 现在es6已经在语言层面上规定了模块系统，完全可以取代现有的commonjs和amd规范，而且使用起来相当简洁，并且有静态加载的特性。
css的模块化
- 虽然sass、less、stylus等预处理器实现了css的文件拆分，但没有解决css模块化的一个重要问题：选择器的全局污染问题。
- 按道理，一个模块化的文件应该要隐藏内部作用域，只暴露少量接口给使用者。而按照目前预处理器的方式，导入一个css模块后，已存在的样式有被覆盖的风险。虽然重写样式是css的一个优势，但这并不利于多人协作。
- 为了避免全局选择器的冲突，各厂都制定了自己的css命名风格：bem风格，bootstrap风格等
- 但这毕竟是弱约束。选择器随着项目的增长变得越多越复杂，然后项目组里再来个新人带入自己的风格，就更加混乱了。
- 从工具层面，社区又创造出shadow dom、css in js和css modules三种解决方案。
- shadow dom是webcomponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；
- css in js是彻底抛弃css，使用js或json来写样式。这种方法很激进，不能利用现有的css技术，而且处理伪类等问题比较困难；
- css modules仍然使用css，只是让js来管理依赖。它能够最大化地结合css生态和js模块化能力，目前来看是最好的解决方案。vue的scoped style也算是一种。
资源模块化
- 什么是webpack？
- webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（scss，typescript等），并将其打包为合适的格式以供浏览器使用。
- webpack的强大之处不仅仅在于它统一了js的各种模块系统，取代了browserify、requirejs、seajs的工作。更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。
资源模块化后，有三个好处：
- 依赖关系单一化。所有css和图片等资源的依赖关系统一走js路线，无需额外处理css预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；
- 资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等。
- 项目结构清晰化。使用webpack后，你的项目结构总可以表示成这样的函数： dest = webpack(src, config)
组件化：
- 组件化≠模块化。模板化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于ui的拆分。
- 从ui上拆分下来的每一个包模板（html）+样式（css）+逻辑（js）功能完备的结构单元，称之为组件。
- 页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成dom元素为止。dom元素可以看成是浏览器自身的组件，作为组件的基本单元。
- 传统前端框架/类库的思想是先组织dom，然后把某些可复用的逻辑封装成组件来操作dom，是dom优先，而组件化框架/类库的思想是先来构思组件，然后用dom这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者最本质的区别。
- 目前市场上的组件化框架最多，主要的有vue，react，angular2。
自动化：
“简单重复的工作交给机器来做”，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。
规范化：（至关重要的一环）
在项目规划初期制定的好坏对于后期的开发有一定影响。包括的规范有：
- 目录结构的制定
- 编码规范
- 前后端接口规范
- 文档规范
- 组件管理
- git分支管理
- commit描述规范
- 定期codereview
- 视觉图标规范
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论