前端模块化

前端项目越来越大，应对前端工程化，我们应该怎么做，由以下三个方面的改变。

思维上：使用模块化思想

工具上：webpack，npm等模块化工具

工作方式上：多人协作

那了解模块化规范是必不可少的

1.Common.js

CommonJS模块的特点如下。

所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序。

2.module对象

同步加载

        1.module.exports属性 

module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。

        2.exports变量

node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。这相当于每个模块中都有一句这样的命令 var exports = module.exports;

这样，在对外输出时，可以在这个变量上添加方法。例如  exports.add = function (r){return Math.PI * r *r};注意：不能把exports直接指向一个值，这样就相当于切断了 exports 和module.exports 的关系。例如 exports=function(x){console.log(x)};

一个模块的对外接口，就是一个单一的值，不能使用exports输出，必须使用 module.exports输出。module.exports=function(x){console.log(x);}; 

使用module.exports最为保险

使用require引入内容

 2.AMD

异步加载

Define()

require

require.js使用

3.CMD

sea.js使用

4.ES6 Module

1.export default  模块

import 模块内容

2.export const 内容

import {内容}

这时由ES6结构得出的内容

webapack支持common.js,AMD,ES6 module。node支持common.js,vue本身只支持AMD，但是使用了脚手架支持ES6 module等等。