什么是前端工程化
工程化是一种思想
解决低效、繁琐问题
一、规范化
git
本章参考
- https://git-scm.com/docs
- https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html
- https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
- https://danielkummer.github.io/git-flow-cheatsheet/
二、模块化
css模块化解决⽅案
核⼼思想：通过样式⽣效规则来避免冲突。
- scoped：DOM节点添加data-v-version属性，.selector => .selector[data-v-version]
例子：https://juejin.im/ - Css in JS：以脚本模块来写样式，甚⾄有封装好的样式模块可直接调⽤。
样式 => 按规则⽣成的唯⼀selector
https://codepen.io/dongtianee/pen/ZZvYQo
https://github.com/4Catalyzer/astroturf - CSS MODULES ：借助预编译使样式成为脚本中的变量
.selector => Object.selector | .selector => .main__sub__hash
https://css-modules.github.io/webpack-demo/ - BEM ：Block__Element—Modifier
按照规则，⼿写css，并在模版内增加相应class
BEM https://element.eleme.cn/#/zh-CN/component/alert
js模块化解决⽅案
nodejs commonjs
require()
module.exports = xx;
ES
import {M} from './a.js' //b.js
export function() M(){ retrun 1}; //a.js
本章参考
https://huangxuan.me/2015/07/09/js-module-7day/
‣ https://github.com/seajs/seajs/issues/588
‣ https://juejin.im/post/5aaa37c8f265da23945f365c
‣ https://yuguo.us/weblog/javascript-module-development-history/
‣ http://es6.ruanyifeng.com/#docs/module-loader
‣ https://juejin.im/post/5bb6c5195188255c9e02e6f3
‣ https://juejin.im/entry/59a5538b6fb9a02481206f22
‣ https://dom.spec.whatwg.org/#shadow-trees
‣ https://www.w3.org/TR/shadow-dom/
三、组件化
组件化和模块化的核⼼思想都在于分治，实际带来的好处就是团队协作效率和项⽬可维护性的提升。
组件化开发是Web开发的趋势。
什么是组件？
UI为主
⻚⾯上的⼀个UI块可以封装成⼀个组件。⽐如⻚⾯的头部，封装成⼀个Header组件后，我希望它的脚本、样式和模版可以放在⼀个⽂件夹中，到时候便于维护。
逻辑为主
某⼀个功能逻辑也可以封装成⼀个组件。⽐如AutoComplete组件，封装成⼀个组件后，我希望它的脚本、样式和模版可以放在⼀个⽂件夹中，可以⼀处封装，多处任意使⽤。
组件
在Web前端领域，我们可以将由特定逻辑和UI进⾏的⾼内聚，低耦合的封装体称为⼀个组件。
1）侧重UI进⾏封装的组件：代码结构清晰，组件内的模块就近放置，⽅便进⾏修改和维护。这种组件具备⾼内聚，低耦合的特性，但普适性不⾼。
2）侧重逻辑进⾏封装的组件：除了具备上述优点外，还具有很⾼的普适性，更⽅便组件重⽤。
3）组件内可以包含组件，⽐如偏UI的组件往往都是包含有偏逻辑的组件。
规范化、模块化、组件化是否符合前端⼯程化的⽬的——提效
本章参考
‣ https://jiongks.name/slides/css-scoping/
‣ https://zhuanlan.zhihu.com/p/42370005
‣ https://zhuanlan.zhihu.com/p/48811872
‣ https://www.webcomponents.org/introduction
四、⾃动化
核心思想
能由机器⾃动完成的事情，绝不让⼈来做。⾃动化是前端⼯程化核⼼。
- ⾃动初始化 eg. : vue-cli
- ⾃动构建（打包） eg.: webpack
- ⾃动测试 eg.: karma, jest
- ⾃动部署 eg.: Jenkins
本章参考
‣https://juejin.im/entry/5b286a126fb9a00e45113435
‣ https://ithelp.ithome.com.tw/articles/10192300
‣ http://fis.baidu.com/fis3/index.html
