谈谈前端模块化的演变历程

前言

Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了，随着前端发展对 模块需求愈来愈大，模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现，再到ES6发布，目前已经能够 很方便的在Javascript中使用"类"和"模块"了。

1、之前的写法

一、原始写法

function m1(){
　　　　//...
　　}

　　function m2(){
　　　　//...
　　}

缺点 ： "污染"了全局变量，没法保证不与其余模块发生变量名冲突，并且模块成员之间看不出直接关系。

二、对象写法 为了解决上面缺点，把模块写成一个对象，全部的模块成员都放到这个对象里面

var module1 = new Object({

　　　　_count : 0,

　　　　m1 : function (){
　　　　　　//...
　　　　},

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

　　});

使用

module1.m1();

存在缺点： 可是，这样的写法会暴露全部模块成员，内部状态能够被外部改写。好比，外部代码能够直接改变内部计数器的值。

module1._count = 5;

三、当即执行函数写法

当即执行函数（IIFE），能够达到不暴露私有成员的目的。

var module1 = (function(){

　　　　var _count = 0;

　　　　var m1 = function(){
　　　　　　//...
　　　　};

　　　　var m2 = function(){
　　　　　　//...
　　　　};

　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};

　　})();

上面的写法，外部代码没法读取内部的_count变量。

console.info(module1._count); //undefined

四、放大模式 若是一个模块很大，必须分红几个部分，或者一个模块须要继承另外一个模块

　　var module1 = (function (mod){

　　　　mod.m3 = function () {
　　　　　　//...
　　　　};

　　　　return mod;

　　})(module1);

上面的代码为module1模块添加了一个新方法m3()，而后返回新的module1模块。

五、宽放大模式 在浏览器环境中，模块的各个部分一般都是从网上获取的，有时没法知道哪一个部分会先加载。若是采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

var module1 = ( function (mod){

　　　　//...

　　　　return mod;

　　})(window.module1 || {});

与"放大模式"相比，＂宽放大模式＂就是"当即执行函数"的参数能够是空对象。

六、输入全局变量 独立性是模块的重要特色，模块内部最好不与程序的其余部分直接交互。 为了在模块内部调用全局变量，必须显式地将其余变量输入模块

var module1 = (function ($, YAHOO) {

　　　　//...

　　})(jQuery, YAHOO);

上面的module1模块须要使用jQuery库和YUI库，就把这两个库（实际上是两个模块）看成参数输入module1 好处： 这样作除了保证模块的独立性，还使得模块之间的依赖关系变得明显

2、CommonJS、AMD和CMD的出现

谈到AMD和CMD，不得不说下CommonJS。2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程， 因为浏览器端网页还比较简单 ，对于模块不是特别依赖，但在服务器端由于要与操做系统和其余应用程序互动，CommonJS 就在这样的背景下诞生了。

引入第三方模块并调用方法

var math = require('math');
math.add(2,3); // 5

这里有一个CommonJS模块使用的例子

//模块定义 myModule.js
var name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
module.exports = {
    printName: printName,
    printFullName: printFullName
}
//加载模块
var myModule = require('./myModule.js');
myModule.printName();

一、AMD规范

想象一下若是把这段代码放到浏览器端 ，math.add(2, 3)，在第一行require('math')以后运行，所以必须等math.js加载完成。也就是说，若是加载时间很长，整个应用就会停在那里等

var math = require('math');
　　math.add(2, 3);

这对服务器端不是一个问题，由于全部的模块都存放在本地硬盘，能够同步加载完成，等待时间就是硬盘的读取时间。可是，对于浏览器，这倒是一个大问题，由于模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态

所以，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）

AMD也采用require()语句加载模块，可是不一样于CommonJS，它要求两个参数

require([module], callback);

上面代码改写成AMD形式就是这样

require(['math'], function (math) {

　　　　math.add(2, 3);

　　});

目前实现AMD规范的有RequireJS和curl.js

RequireJS模块例子:

// 定义模块 myModule.js
define('myModule', ['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }
    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

二、CMD规范 CMD: Common Module Definition通用模块定义, 由国内发展出来, SeaJS是其典型表明, 即SeaJS是经过浏览器对CMD的具体实现

SeaJS模块例子:

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js');
  var foo = require('foo');
  var out = foo.bar();
  $('div').addClass('active');
  module.exports = out;
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

三、CommonJS、AMD和CMD区别

• CommonJS是同步的, 主要用于服务器
• AMD和CMD是异步的, 二者的模块定义和加载机制稍有不一样, 主要用于浏览器
• AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块,CMD`推崇就近依赖，只有在用到某个模块的时候再去require 两个都是定义的全局define函数来定义模块, define接收函数function(require, exports, module)保持一致
• CMD是懒加载, 仅在require时才会加载模块; - AMD是预加载, 在定义模块时就提早加载好全部依赖
• CMD保留了CommonJS风格

3、ES6的使用

ES6在语言标准的层面上, 实现了模块功能, 并且实现得至关简单, 彻底能够取代CommonJS和AMD规范, 是浏览器和服务器通用的模块解决方案

ES6模块例子:

//模块定义 myModule.js
const name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
const myModule = {
    printName: printName,
    printFullName: printFullName
};
export myModule;

//加载模块
import myModule, { printFullName } from './myModule.js';
myModule.printName();
printFullName('Michael');

4、最后再说说browserify和webpack

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另外一种类型。

一、seajs / require : 是一种在线"编译"模块的方案，至关于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

二、browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不须要在浏览器中加载解释器。另外，你在本地直接写JS，不论是 AMD / CMD / ES6 风格的模块化，它都能认识，而且编译成浏览器认识的JS。

参考阅读：

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
https://www.jianshu.com/p/5226bd9644b6
http://es6.ruanyifeng.com/#docs/module

原文出处：https://www.cnblogs.com/fozero/p/10328556.html