工程化，模块化，组件化，规范化

前端讲究 工程化，模块化，组件化，层层递进。

一、工程化

工程化是整个工程的结构、样式和动作分离，工程化是一种思想而不是某种技术（当然为了实现工程化我们会用一些技术）。各种规范、技术选型、项目构建优化，JS/CSS模块机、UI组件化等。
前端工程化就是用做工程的思维看待和开发自己的项目，而不再是直接撸起袖子一个页面一个页面开写。

1. 在配置初始项目文件结构和基本文件依靠命令行（工具）自动生成， 代码构建: webpack，脚手架：*cli，用于创建项目目录结构。
2. 确定代码规范，缩进，换行，以及各种预编译工具less，coffee，保证输出代码的标准一致
3. 对JS文件是否规范化，进行单元测试。不用手动复制到jshint上去检测，现在配置grunt监听文件变动自动检验显示检验结果还可以通过配置构建工具自动刷新浏览器实现文件实时变动监听
4. 配置一下 grunt，gulp可以做自动任务，实时编译，并且监测文件改变而做出响应
5. 用工具自动打包上传到服务器
   
   

二、模块化

页面由多个模块作用形成，互相不干扰，用的时候再加载，可引入各种其他模块（js，css），扩展性高。模块化是将之前一笼统的页面分成由若干个模块作用形成的页面，这个过程（思想）叫模块化。

1. 定义模块
   根据CommonJS¹规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
2. 模块输出
   模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象。
3. 加载模块
   加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。
   
   

三、组件化

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面。
将之前一笼统的页面改善为一个个单独的组件形成的页面，过程（思想）叫组件化。

规则：

• 页面上的每个独立的、可视/可交互区域视为一个组件；
• 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
  由于组件具有独立性，因此组件与组件之间可以 自由组合；
• 页面只不过是组件的容器，负责组合组件形成功能完整的界面；
• 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

保证组件的封闭性。因为JS方面是模块化的。组件的功能界限问题。也就是什么是应该在组件内部实现，什么是应该由组件的调用者来实现的。对组件功能界限的定义是只负责UI相关的功能，所有的业务逻辑都是从调用者传递过的。也即是写在param.js。所以param.js文件是非常重要的一个文件，里面基本包涵了这个页面所有业务处理逻辑。很显然，随着页面业务逻辑变的复杂，js文件将会变得越来越大。没关系，把不同的组件参数分拆到不同的js文件里面去实现，然后建个专门的文件夹把它们组织起来。

四、规范化

由具体的前端框架而定目录结构，目录命名有约定俗成的意义。如：
1、src文件夹存放的是所有的的源代码和其他静态资源（比如图片，iconfont)。
2、dist文件夹存放的是所有编译后的代码。
3、build文件夹存放的是所有工程化所需要的代码。
4、document文件夹当然存放的文档。

PS：模块化和组件化一个最直接的好处就是复用，同时我们也应该有一个理念，模块化和组件化除了复用之外还有就是分治，我们能够在不影响其他代码的情况下按需修改某一独立的模块或是组件，因此很多地方我们及时没有很强烈的复用需要也可以根据分治需求进行模块化或组件化开发。

---

1. 因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。 ↩︎