前端工程化浅析
什么是前端工程化
- 在前端领域,利用技术不断进步和经验逐步积累带来等各种方案,来解决在项目等开发、测试、维护阶段中遇到等种种低效的繁琐的问题。
- 工程化是一种思想,技术是一种实践。技术会随着时代进步不断地演进和改变,在不同的时期,都会有不同的技术来承载和践行着工程化思想。思想的落地离不开行动和实践,技术虽然会过时,但实践必须立足当下
模范化
- 版本管理及开发流程规范:
git
、git flow
- 编写规范
- 脚本
- 样式
- 目录结构
模块化
一般逻辑相关但代码放在同一个文件中,当做一个模块
只关注模块内逻辑但实现,无需考虑变量污染等问题,模块之间可互相调用
** CSS模块化/JS模块化**
组件化
组件化和模块化的核心思想都在于分治,实际带来的好处就是团队协作效率和项目可维护的提升。
- 侧重UI进行封装的组件:代码结构清晰,组件内的模块就近放置,方便进行修改和维护。这种组件具备高内聚,低耦合的特性,但普适性不高
- 侧重逻辑进行封装但组件:除了具备上诉优点外,还具有很高但普适性,更方便组件重用
- 组件内可以包含组件:比如偏UI的组件往往都是包含有偏逻辑的组件
自动化
- 自动化测试
- 自动化部署
- 自动化初始化
- 自动化构建:
webpack
、parcel
前端动画可以这么玩
动画的基本原理
- 定时器改变对象的属性
- 根据新的属性重新渲染动画
function update(context) {
// 更新属性
}
const ticker = new Ticker();
ticker.tick(update, context);
动画的种类
- JavaScript 动画
- 操作DOM
- Canvas
- CSS 动画
- transition
- animation
- SVG 动画
- SMIL
JS动画的优缺点
优点:灵活度、可控性、性能
缺点:易用性
一起优化前端性能
使用RAIL模型评估性能
定义:以用户为中心的性能模型,每个网络应用都具有与其生命周期有关都四个方面,而且这些方面以不同都方式影响着性能。
response
animation
idle
load
关键指标:
- 响应:在100ms内响应用户输入
- 动画:动画或滚动时,10ms产生一帧
- 空闲时间:主线程空闲时间最大化
- 加载:在1000ms内呈现交互内容
- 以用户为中心
评估性能的工具
- lighthouse
- WebPageTest
- Chrome DevTools