如何做"前端工程化"

如何做"前端工程化"？
前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

一、模块化

1、JS的模块化
   拆分、封装大块的业务逻辑，抽离公共函数等
2、CSS的模块化
   虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。按道理，一个模块化的文件应该要隐藏内部作用域，只暴露少量接口给使用者。而按照目前预处理器的方式，导入一个CSS模块后，已存在的样式有被覆盖的风险。虽然重写样式是CSS的一个优势，但这并不利于多人协作。

3、资源的模块化 
   资源模块化后，依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；
资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等；
项目结构清晰化。使用Webpack后，你的项目结构总可以表示成这样的函数： dest = webpack(src, config)

二、组件化

1、从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

2、组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分

三、规范化

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

比如：
1、目录结构的制定
2、目录结构的合理设定，能为项目带来很多优点：
   有助于提高项目的逻辑结构合理性；
   对应扩展和合作；
   方便资源的统一定位管理。
3、编码规范
   制定一套良好的编码规范可以增强团队开发协作、提高代码质量。
   推荐参考凹凸实验室打造的前端代码规范。

   编码规范包括：
   1、HTML规范。
      基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
   2、CSS规范。
      统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
   3、JS规范。
      统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
   4、图片规范。
      了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
   5、命名规范。
      从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
   6、前后端接口规范
      “基于 Ajax 带来的 SPA 时代”，这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，引发一个重要问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。
       接口规范主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。

   7、文档规范
   8、组件管理
   9、git分支管理
   10、commit描述规范
   11、视觉图标规范

四、自动化

前言：前端工程化的很多脏活累活都应该交给自动化工具来完成。需要秉持的一个理念是: 任何简单机械的重复劳动都应该让机器去完成。

1、持续继承
2、自动化构建
3、自动化部署
4、自动化测试

以上就是关于怎么去做前端工程化的一些具体参考

Tags 标签

扩展阅读

加个好友，技术交流