JS模块化

时间 2019-11-09

原文原文链接

代码：https://github.com/zhengyeye/JS-modularity

什么是模块、模块化？

将一个复杂的程序依据必定的规则(规范)封装成几个块(文件), 并进行组合在一块儿；javascript

块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通讯。html

为何要模块化？

当项目功能愈来愈多，代码量便也会愈来愈多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理，想要什么功能，就加载什么模块，但前提是你们在编写代码时须要使用同一规范。
如今最流行的模块化规范有：CommonJs,、AMD、CMD、以及ES6。java

模块化的好处：

1.避免命名冲突(减小命名空间污染)；node

2.更好的分离, 按需加载；git

3.更高复用性；es6

4.高可维护性。github

CommonJS规范

1.在服务器端: 模块的加载是运行时同步加载的；api

2.在浏览器端: 模块须要提早编译打包处理；浏览器

CommonJS是Node.js使用的模块化标准。在CommonJS中，有一个全局性方法require()，用于加载模块。服务器

基本语法：

暴露模块：（本质都是暴露exports这个对象，module.exprots={}就是一个空对象）

①module.exports = value；

②exports.xxx = value；

引入模块：

1 require(xxx);  //第三方模块:xxx为模块名
2                     //自定义模块: xxx为模块文件路径

1 //文件A
2 module.exports = {...}  
3  ....
4       
5 //文件B
6 var a = require('./foo/bar')

实现方式：

①服务器端：Node.js；

app.js为主入口文件，使用命令行：node app.js即可启起服务，看到控制台打印的数据；

②浏览器端：Browserify（也称为CommonJS的浏览器端的打包工具）；

二者区别：①Node.js运行时动态加载模块(同步)；②Browserify是在转译(编译)时就会加载打包(合并)require的模块。

index.html为主入口文件，在浏览器中打开此页面，正常运行即可看到控制台打印的数据；可是，这样去报错了：

Uncaught ReferenceError: require is not defined
    at app.js:9

浏览器并不认识app.js中的方法，所以便须要将app.js编译打包处理成为它所能识别的文件，因而在项目根目录下使用命令行：

browserify js/src/app.js -o js/dist/bundle.js

这句话的意思就是找到js/src/app.js文件，并将它-o：output 输出为 js/dist/bundle.js，这样再在index.html中引入bundle.js文件后，即可（dist文件夹能够为空，也可让其自行建立）。

AMD规范(Asynchronous Module Definition(异步模块定义))

1.AMD:专门用于浏览器端, 模块的加载是异步的；

基本语法:

①定义暴露模块

1 //定义没有依赖的模块
2 define(function(){
3     return 模块
4 })

1 //定义有依赖的模块
2 define(['module1', 'module2'], function(m1, m2){
3     return 模块
4 })

②引入使用模块：

1 require(['module1', 'module2'], function(m1, m2){
2     使用m1/m2
3 })

实现方式：

浏览器端：Require.js

CMD规范( Common Module Definition(通用模块定义))

1.CMD:专门用于浏览器端, 模块的加载是异步的;

2.专门用于浏览器端, 模块的加载是异步的 ;

3.模块使用时才会加载执行；

4.较其余使用次数少。

基本语法：

①定义暴露模块：相似于CommonJS

1 //定义没有依赖的模块
2 define(function(require, exports, module){
3     exports.xxx = value
4     module.exports = value
5 })

 1 //定义有依赖的模块
 2 define(function(require, exports, module){
 3     //引入依赖模块(同步)
 4     var module2 = require('./module2')
 5     //引入依赖模块(异步)
 6       require.async('./module3', function (m3) {
 7         
 8       })
 9     //暴露模块
10     exports.xxx = value
11 })

②引入使用模块

1 define(function (require) {
2     var m1 = require('./module1')
3     var m4 = require('./module4')
4     m1.show()
5     m4.show()
6 })

实现方式：

浏览器端：Sea.js

CMD：不严谨的讲，其实就是集合commonjs+AMD的特色。

ES6

目前主流规范。AMD与CMD均比较commonjs繁琐，而es6最简洁。

1.ES6；

2.依赖模块须要编译打包处理(部分浏览器不支持)；

语法：

①导出模块: export

②引入模块: import

实现方式：

浏览器端：

①使用Babel将ES6编译为ES5代码；

②使用Browserify编译打包js。

在index.html中使用（在html中引入的js文件必须为编译事后的文件）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!-- <script type="text/javascript" src="js/src/app.js"></script> -->
 9     <script type="text/javascript" src="js/lib/bundle.js"></script>
10 </body>
11 </html>