第六届360前端星计划_前端工程化浅析
主讲人
- 田东东
- 燕山大学硕士研究生
- 360搜索前端团队
- 首届前端星计划毕业生
一、什么是前端工程化？
- ⼯程化的目标
在前端领域，利用技术不断进步和经验逐步积累带来的各种⽅案，来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。 - ⼯程化里的技术
⼯程化是⼀种思想，技术是⼀种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践⾏着⼯程化思想。
思想的落地离不开⾏动和实践，技术虽然会过时，但是实践必须立⾜当下。 - 为什么前端要做⼯程化
历史原因使我们⼤多数⼈后知后觉，用⼀句⼤白话来说，前端⼯程化就是为了提效。这个提效体现在项目的开发、测试及维护阶段。
二、规范化
- 规范化：是项⽬可维护性的基⽯。
- 版本管理及开发流程规范
- 编写规范
脚本
样式
⽬录结构
git：版本管理、代码仓库
git flow：基于git / 简化操作、活动模型 / ⾏为规范
git flow 的使用
本章参考
‣ 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上线的全过程。
三、模块化
分类：CSS模块化 / 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/astroturfCSS 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/
四、组件化
- 组件化和模块化的核⼼思想都在于分治，实际带来的好处就是团队协作效率和项⽬可维护性的提升。
组件化开发是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⾃动化测试
⾃动化部署
⾃动化初始化
自动化构建
- webpack
- papcel
- 本章参考
‣https://juejin.im/entry/5b286a126fb9a00e45113435
‣ https://ithelp.ithome.com.tw/articles/10192300
‣ http://fis.baidu.com/fis3/index.html
六、总结
- 将技术分类放置依次介绍只是为了显得条理清晰，但技术的划分没那么清晰，⽐如Babel既为⾃动化服务，
也为模块化服务。 - 除标准⽂档和技术⽤法外，⽂中所下定义和说法均带有浓郁的主观看法。⽐如“⼯程化是思想，webpack等
技术为实践，技术践⾏了思想”。说实话webpack的作者可能没想这么多，只是单纯为了⾃⼰写代码时不那
么累。 - 前端优秀技术和框架层出不穷，⽂中所提及的技术⽴⾜于公元2020年且仅为作者个⼈以为的代表性技术。
带着⼯程化的思考去做事
第六届360前端星计划_前端工程化浅析相关推荐
- 第六届360前端星计划_前端代码的自我修养
主讲人:孙磊 一.如何衡量代码质量的好坏 衡量代码质量的唯一有效标准:WTF/min -- Robert C. Martin 代码的自我修养 代码规范 格式 流程化 二.代码规范 yarn globa ...
- 第六届360前端星计划_深入CSS
主讲人 赵文博 360前端技术专家 奇舞团 一.选择器的特异度(Specificity) 提出问题:哪条规则生效? <article><h1 class="title&qu ...
- 不怕你不来，就怕你不学—360前端星计划
编者按:奇舞团小胖子.特别感谢国欣宇同学和刘琳同学. 是否总觉得自学 JS.HTML.CSS 小有成就但心里空虚? 眼看着<HTML 从入门到精通> 手下却一行代码十个 error ? 莫 ...
- 2018年前端星计划等你来报名！
是否总觉得自学JS.HTML.CSS,小有成就但心里空虚?是否混迹在各大前端论坛,寻寻觅觅,但心里总觉得没有方向感?你需要一个引路人,需要一个心灵的导师.别慌!这里是360前端星计划! 前端星计划是由 ...
- 360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门 文章目录 正则 正则表达式的创建和使用 创建正则表达式的两种方式 正则表达式的常见用法 ...
- 360前端星计划学习-html
前端与HTML 一枚大三学生,非常感谢360前端星计划,在这里学习了很多,非常幸运获得360的校招实习offer~,非常感谢面试我的王峰老师和卢岳文老师!总的来说,这7天的学习,让我坚定了走前端这条路 ...
- 前端实习生笔试_前端面试实习题目总结：
以下是部分整理,有时间还会整理出其他的~~ (最近还在找实习呜呜~~) 1.JavaScript是一种弱类型语言,有什么优点和缺点 https://blog.csdn.net/sinolze... ( ...
- java和前端哪个好学_前端好学还是Java好学？
学web前端 首先要了解前端是做什么的,web前端开发工程师,主要职责是利用 html,css,JavaScript,Flash等各种web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的 ...
- java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...
最新文章
- PyTorch 笔记（14）— nn.module 实现简单感知机和多层感知机
- 基于C++的骨架提取的鼻祖算法
- c中结构体的4种定义
- mapper中的CDATA标签的用法
- 转载：由图片SEO想起
- 使用MVC连接数据库及MVC应用的一般命名
- java算法提高求最大值_藍橋杯 算法提高 求最大值
- 一种数据结构的封装模式
- java excel类库_Java 操作 Excel 的类库 jExcelApi
- 多商户商城系统源码 B2B2C商城020社区团购 单多商户入驻商城H5系统源码
- 精品手机看片神器电影网址导航网站
- RS485通信和Modbus通信协议汇总
- [ 数据集 ] MINIST 数据集介绍
- 一款用C++语言实现的3D游戏引擎(附源码)，适用于想学3D游戏开发
- 虚拟化、文件系统、查找文件
- 业务与信令-第5章VoLTE原理
- pantone潘通色卡对照表_潘通色卡微信版（PANTONE色C面效果）
- 最全的大数据学习资料整理
- 罗技无线鼠标接收器无法配对的详细解决办法
- python将图片转换为csv