JS模块化-白红宇

###一、理解 1、什么是模块、模块化？ 将一个复杂的程序依据一定的规范封装成几个文件，并进行组合在一起

2、为什么要模块化？ 降低复杂度，提高解耦性，部署方便

3、模块化的好处 避免命名冲突（减少命名空间污染）更好的分离，按需加载更高复用性高可维护性 4、页面引入加载script 模块的使用举例来说：前端框架layui 的js部分就是采用模块化（用的自己定义的模块化方法）

layui.use就是引入模块 layui,define就是定义模块

###二、模块化规范 1、CommonJS（node根据该规范编写） 说明：每一个文件都可以当做一个模块

在服务器端：模块的加载是运行时同步加载的

在浏览器端：模块需要提前编译打包处理

基本语法：模块引入：require（xxx）

第三方模块：xxx为模块名

自定义模块：xxx为模块文件路径

暴露模块： = value 和 module.exports = value

暴露的模块本质是 exports 对象

exports本身是一个空对象 = value是给exports对象添加属性或方法

module.exports = value 是直接用value新对象来覆盖原来的空对象

实现：服务器端实现：Node.js

浏览器端实现：Browserify （CommonJS的浏览器端的打包工具）

下载安装browserify

全局：npm install browserify -g

局部：npm install browserify --save-dev

定义模块代码（js文件代码并暴露相应内容）

引入模块在app.js 中用require引入模块但是浏览器不认识require方法，需要打包处理js

在根目录下终端输入 browserify js/src/app.js -o js/dist/bundle.js （js/src/app.js源文件 js/dist/bundle.js 是打包输出的文件）

页面使用引入：

 （浏览器真正跑的是打包生成的文件）复制代码

2、AMD 说明：专门用于浏览器端的模块化规范，模块的加载是异步的

基本语法：定义暴露模块：

  //定义没有依赖的模块：  define(function(){    return 模块  })  //定义有依赖的模块：  define(['module1','module2'],function(m1,m2){    return 模块  })引入使用模块：   require(['module1','module2'],function(m1,m2){    使用m1/m2  })复制代码

实现（浏览器端）： Require.js

3、CMD（了解） 说明：专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行基本语法：定义暴露模块：

  //定义没有依赖的模块：  define(function(require,exports,module){    exports.xxx = value    module.exports = value  })复制代码

//定义有依赖的模块：

  define(function(require,exports,module){    //引入依赖模块(同步)    var module2 = require("./module2")    //引入依赖模块（异步）    require.async("./module3",function(m3){    })    //暴露模块    exports.xxx = value  })复制代码

引入使用模块：

  require(function(require){    var m1 = require('./module1')    var m4 = require('./module4')    m1.show()    m4.show()  })复制代码

实现（浏览器端）：Sea.js 4、ES6 说明：依赖模块需要编译打包处理语法：导出模块：export xxx

引入模块：import xxx from "url"

页面引入

实现（浏览器端）：使用Babel将ES6编译为ES5代码

使用Browserify编译打包js