Web 前端工程化

    今天说一说前端的工程化，工程化大概包括模块化，组件化，自动化，规范化。在项目的启动之前，我们做好这一系列的工程化，那么项目的最终的质量会很高的。

    

    首先说一下模块化，模块化就是将一个大小拆分程相互依赖的小文件，在进行统一的拼装和加载，这样的话，方便了多人合作开发，提高了项目代码的可读性、可扩展性。一下我针对 JS 的模块化做了还算是比较详细的介绍吧，其他的大家可以自己去 get 一下

 

一、JS 模块化

    

    JavaScript 模块化大概分为以下几个：

    

    1、无模块化

        

        对于一些小型的，简单的不太复杂的项目，还算可以。但是如果项目是比较复杂，中大型的项目，那么’无模块化’的缺点就暴露出来了。

 

        ‘ 污染全局作用域 ’：我们在 index.html 文件的头部或者尾部引用 js 文件的时候，每一个 js （模块）都是暴露在全局的，所以简单的使用，不规范的命名会导致全局变量名有冲突。（ps：今后在开发的时候一定要注意自己的命名，命名要规范化。）

 

        ‘ 依赖关系混杂，不方便后期维护 ’，我们在引用的 js 文件的时候，有时候会依赖一些其他的 js ，比如需要依赖 jQuery.min.js 文件。那么文件引用顺序就需要注意啦。

 

    2、CommonJS 规范（CJS规范，适用于服务端）

    

        一般我们使用该规范的时候，是在服务器端 NodeJS 使用的。该规范把每一个文件都当成了一个模块，在文件内部定义的变量都是属于该模块。不会暴露出去，就不会污染全局变量了。那么 CommonJS 怎么使用的呢：

    

        通过  require() 加载需要的模块, 这个方法是一个全局的方法，通过 exports / module.exports 导出要暴露的接口。

 

  举个栗子:

 

  

// index.js ：     

var a = require(‘./a.js’)

 

console.log(a.b) // 5

 

var b = function () {

    return 5

}

 

// a.js 

// 导出 b

module.export.b = b 

   

    

    a.js 就是一个 CommonJS 规范的模块。

 

    服务端，所有的模块都是放在本地硬盘的，可以同步加载（需要考虑电脑的性能、网速的快慢。）对于浏览器端来说，需要对服务器端发送请求，将文件请求过来。同步加载就不太适用了，只能采用异步加载， 所以浏览器端的 AMD规范 诞生。

 

3、 AMD规范

 

    AMD规范是异步加载的，模块的加载都不影响后边的语句执行，所有一来这个模块的语句，都定义在一个回调函数中。

 

    AMD规范中，定义了两个 API： require([module], callback)   、 define(id, [depends], callback)，通过 define 定义一个模块，通过 require 加载一个模块。

    使用 require.js 的时候必须提前加载完所有的模块，然后才可以使用，这样的话，他的一个缺点就暴露出来了。那就是 ‘ 不能按需加载，如果模块过多，加载等待时间会很长 ’。

 

4、CMD规范

    

    实现此规范的是 sea.js ，和 require.js 相似，每个 js 文件都是一个模块，它比 AMD 的优点在于，它能够按需加载，不过对于浏览器端来说，有可能会造成小小的延迟。因为你是在需要的时候在进行加载的，所以在等待加载的这个过程，会有一定的延迟的。这一点是不同于 AMD 的。

 

    说白了就是， AMD 会提前加载模块，CMD 会延迟加载模块。

 

5、UMD规范

 

    JavaScript 已经通行前后端了，所以有可能会有 js 模块既在浏览器端运行，也在服务端运行。 UMD就是对 AMD 和 CommonsJS 的整合

 

6、ES6模块化

 

    ES6 的模块化是真正的规范，ES6 中我们可以通过 export 导出模块，通过 import 引入模块。由于现在浏览器对模块的支持度问题，所以大部分使用 babelJS 或者 Traceur 将 ES6 代码转化为兼容 ES5 版本的 js代码。

    

    我还是比较推崇使用 ES6 的语法进行代码的编写，加载模块的时候，每个模块只加载一次，第二次使用的时候，会从内存中直接读取，这样就优化了很多。每一个模块内声明的变量都是局部变量，不会污染全局作用域。一个模块也可以导入多个模块。

 

    基本使用：

 

// 以下提供几个常用 导出、导入 方法。

 

// a.js 文件

 

    let one = ‘one’;

    let two = ’two’;

    let onefun = function (one) {

        console.log(one, ‘123’);

    }

    

    let twofun = function (two) {

        console.log(two);

    }

 

    export{ one, two, onefun, twofun }

 

// index.js 文件

 

    import { one, two, onefun, twofun } from ‘./a.js’;

    

    console.log(one, two, onefun, twofer); // one two one123 two

    

// 你还可以这么用！！！

 

// 导出的时候，可以将要导出的接口名字更改

 

    export{ one as o, two as t }

 

    import{ o, t } from ‘a.js'

 

// 你也可以直接在 export 的地方定义导出的函数，或者变量

 

    export let a = () => console.log(‘123’);  // 这样是将 a() 导出了

 

// 对于匿名函数或者是不知道名字的变量，且该 js 模块中只有这一个要导出的接口，那么我们可以使用 export default 

 

    export default ’123123’;

 

    import default 123123 from ‘./a.js’;

 

// export 也能默认导出函数

 

    let fn = () => console.log(‘123’);

    export { fn as default };

 

// import 导入的时候也可以有好多种导入的语法

    

    import * as obj from ‘./a.js'

 

 

JS 模块化就介绍到这里吧。下边说一下 CSS模块化

 

二、CSS 模块化

 

    应该会有很多人想，为什么 CSS 还要有模块化的诞生，一般我们在开发的时候直接命名 类名，id名，然后用 ‘.’ 或者 ‘#’ 命名就行了。也有的人会去使用 SASS、LESS … 等预处理器。虽然 SASS、LESS实现了 CSS 文件的拆分，但是没有解决 CSS 模块化选择器的全局污染问题。

    

    为了方便多人写作开发，为了避免全局选择器的冲突，我们可以使用一些现有的 CSS命名风格。比如说： BEM风格（我就使用这种风格）、Bootstrap风格、Semantic UI 风格、NEC风格等等

 

    引用张鑫旭的一句话：精简高效的CSS命名的关键字有“分离”，“统一前缀”，方法为“面向属性的命名”，准则为“无层级、无标签”。

 

三、资源模块化

 

    我认为最好的体现就是 Webpack 了。不过也有 gulp 、grunt 等等。不过还是 Webpack 比较强大啊，依赖关系单一化、资源处理集成化、项目结构清晰化。关于 Webpack 更多的知识，直接看官网吧。(https://doc.webpack-china.org/    中文官网)

 

四、组件化

 

    组件化的框架目前还是比较流行的，像 React 、Vue 、Angular2 。这些框架都是目前大部分公司都在使用的框架。那么什么是组件化呢，组件化就是包含模板（HTML）+ 样式（CSS）+ 逻辑（JS）功能完备的结构单元。

 

    我认为，组件化的思想还是比较不错的，这样会让你的项目结构更清晰，同样也易于多人协作开发。在开发的时候，将一些经常用的组件进行封装，这样再次使用到该组件的时候就能够直接引用了。我们除了分装组件以外，还要合理的处理组件之间的关系，比如逻辑上的继承，样式上的扩展，模板上的嵌套和包含等。

 

五、规范化

 

    规范化是工程化中的一个重要部分，项目开发初期，规范化制定的好坏，会影响到项目的开发质量。大概包括以下内容：

 

• 目录结构的制定
• 编码规范（ESLint ...）
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期CodeReview
• 视觉图标规范
• ...

 

六、自动化

 

    自动化构建（gulp、grunt、webpack ...）、自动化部署（shipit-deploy ...）、自动化测试（Karma、Mocha、jasmine ...）

转载于:https://my.oschina.net/Osen/blog/1620563