Skip to content

前端工程化

前端工程化就好比修房子:

原来一个人修茅草屋转变为一群人修楼房

楼房不仅是外观好看而且质量更高,可拓展性也强

如果用修茅草屋的方式去修楼房,不仅效率地下,也会为日后埋下无穷的隐患

目前来说,web业务日益复杂化和多元化,前端开发从WebPage模式为主转变为WebApp模式为主了

在模式的转变下,当工程复杂就会产生许多问题,比如:

  • 如何进行高效的多人协作?
  • 如何保证项目的可维护性?
  • 如何提高项目的开发质量?
  • 如何降低项目生产的风险?
  • ...

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间

前端工程化就是为了让前端开发能够“自成体系”,可以从模块化、组件化、规范化、自动化四个方面思考。

可采用的方式

  • 模块化
    • js模块化
    • css模块化
    • 静态资源模块化
  • 组件化
    • 页面组件化
  • 规范化
    • 目录结构
    • 编码规范
    • API规范
    • Git提交规范
    • 技术文档规范
    • ...
  • 自动化
    • 自动化测试
    • 自动化部署
    • 自动化构建

模块化

模块化只是在文件层面上,对代码或资源的拆分

将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载

js模块化

  • CommonJS:最早是 Node 在使用,目前也仍然广泛使用(Webpack)Node 中的模块管理已经和 CommonJS 有一些区别
  • ES Module:原生实现的模块化方案
  • AMD/CMD:目前很少使用
    • 使用过的系列中RequireJS 使用AMD规范

css模块化

  • sass/less/stylus:文件拆分
  • css module:使用js管理依赖(如:Vue scoped style)

SASS、LESS、Stylus等预处理器实现了CSS的文件拆分,但没有解决CSS模块化的一个重要问题:选择器的全局污染问题

静态资源模块化

  • webpack
    • css,图片,字体等等文件统一使用js控制依赖
    • 使用loader对各种资源做各种事情

组件化

而组件化是在设计层面上,对UI(用户界面)的拆分。

从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元

页面是个大型组件,可以拆成若干个中型组件,然后中型组件还可以再拆,拆成若干个小型组件,小型组件也可以再拆,直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件,作为组件的基本单元。

规范化

约定优于配置

  • 项目目录结构
  • 编码规范
    • html
    • css
    • js
    • 命名
  • API接口规范
  • 前后端分离
  • git commit规范
  • 文档规范
  • ...

自动化

任何简单机械的重复劳动都应该让机器去完成。

  • 图标合并
  • 持续集成
  • 自动化构建
  • 自动化部署
  • 自动化测试