模块化开发

前言

ES6之前，Javascript并没有模块体系。但在实际开发中，我们需要模块化编程的开发提高效率和维护性，于是产生了几类模块化的标准

模块的概念：模块就是实现特定功能的一组方法

原始写法

函数写法：

function m1(){
//...
}
function m2(){
//...
}

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

使用：直接调用方法就行了。
缺点：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

对象写法：

var module = new Object({
_count : 0,
 m1 : function (){
  //...
},
m2 : function (){
  //...
}
});

对象写法为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面

使用：调用这个对象的属性
缺点：暴露所有模块成员，内部状态可以被外部改写

module._count = 1;

立即执行函数写法：

var module = (function(){
    var _count = 0;
    var m1 = function(){
        alert(_count)
    }
    var m2 = function(){
        alert(_count + 1)
    }
    return {m1,m2}
})()

使用”立即执行函数(IIFE)”，利用函数作用域中的外部函数无法访问内部函数规则，从而私有化内部属性，并函数结果以对象形式返回给module

使用：调用返回对象中的方法属性

主流模块规范

ES6标准之前，JavaScript并没有模块体系，浏览器端通过<script>引入的代码被当作脚本执行。社区中则制定了一些标准：如CommonJS、AMD、CMD ，CommonJS同步加载主要用于服务端，AMD、CMD异步加载则用于浏览器端。

CommonJS规范

NodeJS是CommonJS规范的主要实践者，CommonJS用同步的方式加载模块。在Server上模块文件都在本地磁盘，所以读取非常快没什么不妥，但是在Browser由于网络的原因，更合理的方案是异步加载。

AMD规范

AMD(Asynchronous Module Definition)异步模块定义。AMD其实是RequireJS在推广的过程中对模块定义的范围化的产出，它是一个在浏览器端模块化开发的规范。它不是javascript原生支持，所以使用AMD规范进行页面开发需要用到对应的库，也就是RequireJS。

//定义模块define(id?, dependencies?, factory)
//- id：模块名
//- dependencies：当前模块依赖的模块
//- factory：工厂方法，一般直接返回一个对象
define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

//------------------------------------------------------------------------------------

//读取模块require([modlue], callback)
//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //可以省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});

CMD规范

CMD（Common Module Definition） 通用模块定义。 CMD是在sea.js推广的过程中产生的。在CMD规范中，一个模块就是一个文件。

// 定义模块
define(function(require, exprots, module) { 
    const fs = require('fs');  //接受模块标识作为唯一参数 	
    exports.module = { 		// exports，module则和CommonJS类似 	
        props: 'value' 	
    }; 
});  

// ------------------------------------------------------------------------------------

// 加载模块
seajs.use(['test.js'], function(test_exports) { 
    // .... 
});

CMD和AMD的异同

\	AMD	CMD
对依赖模块的执行时机处理不同	推崇依赖前置，在定义的时候就要声明其依赖的模块	推崇就近依赖，只有在用到这个module的时候才去require
加载方式	async异步加载	async异步加载
适用环境	browser	browser
执行module的方式	加载module完成后就会执行该module	加载完某个依赖后并不执行，只是下载而已。

★ES6模块（服务器&浏览器端通用方案）

\	CommonJS	ES6
加载	运行时加载	编译时输出接口
导入次数
模块输出

引用参考：

ES6标准入门——阮一峰

let module = (function () {
  let _count = 0;
  let m1 = function () {
    console.log(_count);
  }
  let m2 = function () {
    console.log(_count + 1)
  }
  return {
    m1,m2
  }
})()

使用上面的写法，外部代码无法读取内部的_count变量,module就是Javascript模块的基本写法。

JiangWen's Blog