前端工程化

随着前端不断的发展，前后端分离，模式的转变下，前端再也不是几个页面凑合在一起的时代了。当前端变的越来越复杂的时候，那么前端工程化就显得越来越重要了。

解决的问题：

提高团队协作能力 保证项目可维护性 提高项目开发质量 降低项目生产风险

主要包括四个方面： 模块化、组件化、规范化、自动化

1、模块化

模块化又分为JS模块化、css模块化、资源模块化

1.1、JS模块化

目前比较多的是commonJS（nodeJs/webpack等服务端语言工具）、AMD(requireJS)、CMD(seaJS)、ES6的模块标准（export import） 对于前三种来说都是在运行时去确定依赖关系，而ES6的模块化是语言层面的标准，他是在编译时就确定了依赖关系。拥有静态加载的特性

1.2、css模块化

虽然目前有一些css预处理器 sass less ,但是并没有解决一个重要问题：选择器的全局污染，一般是通过命名风格来避免，但这毕竟是弱约束。 所以我们还得借助一些工具来处理，目前比较好的是css modules，vue中的scoped style就是用的这个。

1.3、资源模块化

webpack有一个很重要的理念，所有资源都可以看做成一个模块并且必须作为一个模块，通过loader对各种资源进行处理转换， 所有资源的依赖关系都统一走js路线，直接使用import导入

2、组件化

在jquery时代我们所说的组件一般就是把一些可以重复使用的逻辑抽离出来，封装成一个函数，然后提供api给其他人使用 这种组件我觉得他只是一个单纯的功能组件。这些组件主要的作用就是操作dom元素， 现在我们所说的组件一般是指UI组件，它是一个包括模板html+样式css+逻辑js的完整的结构单元。 它跟模块化又不一样，模块化注重的文件层面的，对代码或资源的拆分，而组件是注重设计层面，对UI进行拆分 我觉得一个页面它其实就是一个超大的组件，然后可以拆分成中型组件、再拆分成小型组件、直到最后的dom元素，其实dom元素也可以理解成浏览器默认的组件。

3、规范化

我觉得规范化主要是解决提高团队协作开发效率、便于后期维护。 其实所有的那些框架、工具、类库都会有自己的规范，比如vue他的组件格式、命名方式等

3.1 命名规范

目录、文件、变量、函数、组件等名字都可以制定规范

3.2 代码规范

JS、css、html代码的书写、缩进、以及各种格式问题，这个的话我们可以借鉴那些大厂的代码规范，比如京东的凹凸实验室就制定了一套代码规范。

3.3 目录结构规范化，

一个好工程目录结构可以更好的管理资源、方便查找

3.4 版本迭代、代码提交、注释、文档规范、组件管理等等。

3.5 接口规范

我觉得接口规范的用处还是蛮大，一个好的数据格式有时候可以大大减少前端开发人员的工作量

4、自动化

我觉得一些简单的重复的工作都应该交给自动化工具去完成

自动化构建（webpack）、自动化部署()、自动化测试等。