第六届360前端星计划_前端工程化

前端工程化

主讲人

• 田东东
• 360前端技术专家
• 奇舞团

一、什么是前端工程化？

• 目标
• 技术
• 原因

目标：
在前端领域，利用不断进步经验积累带来的各种方案，来解决在项目中的开发测试维护阶段遇到的种种抵消和繁琐的问题
各种工具如下：

1. ⼯程化里的技术
   ⼯程化是⼀种思想，技术是⼀种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践⾏着⼯程化思想。
   思想的落地离不开⾏动和实践，技术虽然会过时，但是实践必须立⾜当下。
2. 为什么前端要做⼯程化
   历史原因使我们⼤多数⼈后知后觉，用⼀句⼤白话来说，前端⼯程化就是为了提效。这个提效体现在项目的开发、测试及维护阶段。

二、工程化主要包括：

1. 规范化

• 规范化：是项⽬可维护性的基⽯。
• 版本管理及开发流程规范
  • 编写规范
  • 脚本
  • 样式
  • ⽬录结构
    git：版本管理、代码仓库
    git flow：基于git / 简化操作、活动模型 / ⾏为规范
    git flow 的使用
    git开发流程示意图：
    [图片上传失败...(image-308759-1586611609866)]

参考：
‣ 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/

注：安装git和git flow，参考⽂档，遵循git flow工作流模拟⼀次从开发到打Tag上线的全过程。

2. 模块化

分类：CSS模块化 v/s JS模块化

我们⼀般逻辑相关的代码放在同⼀个⽂件中，当做⼀个模块。
只需关注模块内逻辑的实现，⽆需考虑变量污染等问题，模块之间可互相调⽤。

css模块化解决⽅案
1）核⼼思想：通过样式⽣效规则来避免冲突。

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
优雅地使⽤BEM —— 可编程的CSS
2）为元素建⽴ shadow root，内部样式与外部样式完全隔离

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/

3. 组件化

组件化和模块化的核⼼思想都在于分治，实际带来的好处就是团队协作效率和项⽬可维护性的提升。
组件化开发是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

4. ⾃动化

核⼼思想：能由机器⾃动完成的事情，绝不让⼈来做。⾃动化是前端⼯程化核⼼。
‣ ⾃动初始化 eg. : vue-cli
‣ ⾃动构建（打包） eg.: webpack
‣ ⾃动测试 eg.: karma, jest
‣ ⾃动部署 eg.: Jenkins

⾃动化测试

⾃动化部署

⾃动化初始化

自动化构建

webpack
papcel
本章参考
‣https://juejin.im/entry/5b286a126fb9a00e45113435
‣ https://ithelp.ithome.com.tw/articles/10192300
‣ http://fis.baidu.com/fis3/index.html