AMD & CMD & RequireJS

为什么会出现这些奇奇怪怪的东西,是不是搞事情?

因为前端代码模块化。

什么又是代码模块化?

这得从JavaScript的历史说起:

1995年,Netscape公司雇佣了程序员Brendan Eich开发网页脚本语言,1995年5月,Brendan Eich只用了10天,就设计完成Mocha(liveScript,后来又改为JavaScript)的第一版。为了保持简单,这种脚本语言缺少一些关键的功能,比如块级作用域、模块、子类型等等。当时Netscape公司决定使用Java语言开发网络应用程序,JavaScript可以像胶水一样,将各个部分连接起来。后来的故事是Java语言的浏览器插件失败了,JavaScript反而发展光大

在JavaScript发展初期就是为了实现简单的页面交互逻辑。
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。
网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。
这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块化

既然JavaScript不能handle如此大规模的代码,我们可以借鉴一下其它语言是怎么处理大规模程序设计的,在Java中有一个重要的概念——package,逻辑上相关的代码组织到同一个包内,包内是一个相对独立的王国,不用担心命名冲突什么的,那么外部如果使用呢?直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因,没有提供类似的功能,开发者需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化
模块就是实现特定功能的一组方法。

模块化有什么优点?

123

如何使用JavaScript语言实现模块?

1.Javascript模块的基本写法

  • 原始写法

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

  function m1(){
   //...
 }

 function m2(){
   //...
 }
  函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。

缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

  • 对象写法

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

var module = {
    count : 0,
    function m1(){
        //...
    }
    function m2(){
        //...
    }
}

//使用的时候,就是调用这个对象的属性。
module.m1()

缺点:安全性低,外部可以获取和修改所有模块成员,内部状态可以被外部改写。

例如:外部代码可以直接改变内部计数器的值。
module.count = 123
  • 立即执行函数写法(js模块的基本写法)

IIFE可以达到不暴露私有成员的目的。

var module = (function(){
    var count = 0;
    var m1 = function(){
        //...
    }
    var m2 = function(){
        //...
    }
    return {
        m1: m1,
        m2: m2
    }
})()

使用该写法,外部代码无法读取内部的count变量。

console.log(module.count)   //undefined

module就是Javascript模块的基本写法

  • 放大模式(对立即执行函数的加工)

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。

   var module = (function (mod){

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

    return mod;

  })(module);
//为module模块添加了一个新方法m3(),然后返回新的module模块。
  • 宽放大模式(Loose augmentation)

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

var module = ( function (mod){
  //...
  return mod;
})(window.module || {});
//"宽放大模式"就是"立即执行函数"的参数可以是空对象。
输入全局变量

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

var module = (function ($, YAHOO) {
  //...
})(jQuery, YAHOO);

module模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

2.如何规范地使用模块?

为什么要规范使用模块?拎起键盘就是干岂不美滋滋?
因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了。

通行的Javascript模块规范共有两种:CommonJSAMD
模块系统的演进
CommonJS

2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。
这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。
服务器端的 Node.js的模块系统,就是参照CommonJS规范实现的。

  • 定义模块:根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
  • 模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象
  • 加载模块: 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

在CommonJS中,有一个全局性方法require(),用于加载模块。

假定有一个数学模块myModel.js,就可以像下面这样加载。
//模块定义 myModel.js
var name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块
var nameModule = require('./myModel.js');  //可以忽略后缀
//然后,就可以调用模块提供的方法:
nameModule.printName();

优点

  • 服务器端模块便于重用
  • NPM 中已经有将近20万个可以使用模块包
  • 简单并容易使用

缺点

  • 同步的模块加载方式不适合浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的。
  • 不能非阻塞的并行加载多个模块。

实现

  • 服务器端的 Node.js
  • Browserify,浏览器端的 CommonJS 实现,可以使用 NPM 的模块,但是编译打包后的文件体积可能很大
  • modules-webmake,类似Browserify,还不如 Browserify 灵活
  • wreq,Browserify 的前身
CommonJS为什么不能直接放到异步加载的浏览器环境中,同步和异步有什么区别?

有了服务器端模块以后,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。
但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。

//加载模块
var nameModule = require('./myModel.js');  
nameModule.printName();
//第二行nameModule.printName();在第一行require('myModel')之后运行。
//因此必须等myModel.js加载完成。
//也就是说,如果加载时间很长,整个应用就会停在那里等。

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

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

AMD

AMDAsynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。

原理:
它采用异步方式加载模块模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

语法:

// 定义模块
define(id?, dependencies?, factory)
  • id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)。
  • dependencies:是一个当前模块依赖的模块名称数组。
  • factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。
// 加载模板
require([module], callback);
  • module,是一个数组,里面的成员就是要加载的模块;
  • callback,则是加载成功之后的回调函数。

例子:

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

    return {
        printName: printName
    };
});

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

my.printName()与myModule模块加载不是同步的,浏览器不会发生假死。

优点:

  • 适合在浏览器环境中异步加载模块
  • 可以并行加载多个模块

缺点:

  • 提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅
  • 不符合通用的模块化思维方式,是一种妥协的实现

实现:

AMD比较适合浏览器环境。

CMD

Common Module Definition 规范和 AMD 很相似,尽量保持简单,并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

Sea.js 推崇一个模块一个文件,遵循统一的写法

Sea.js写法
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');

  module.exports = ...
});

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

});

优点:

  • 依赖就近,延迟执行
  • 可以很容易在 Node.js 中运行

缺点:

  • 依赖 SPM 打包,模块的加载逻辑偏重

实现:

UMD

Universal Module Definition 规范类似于兼容 CommonJS 和 AMD 的语法糖,是模块定义的跨平台解决方案。

ES6 模块

ECMAScript6 标准增加了 JavaScript 语言层面的模块体系定义。ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

import "jquery";
export function doStuff() {}
module "localModule" {}

优点:

  • 容易进行静态分析
  • 面向未来的 ECMAScript 标准

缺点:

  • 原生浏览器端还没有实现该标准
  • 全新的命令字,新版的 Node.js才支持

实现:

跨规范封装
(function (name, definition, context) {
    if (typeof module != 'undefined' && module.exports) {
        // 在 CMD 规范下 (node)
        module.exports = definition();
    } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])  ) {
        //在 AMD 规范下(RequireJS) 或者 CMD 规范下(SeaJS)
        define(definition);
    } else {
        //在浏览器环境下
        context[name] = definition();
    }
})('sample', function () {

    var sample = (function () {
        "use strict";

        var a = 1;

        function inc(){
            a++;
        }

        function get(){
            return a;
        }

        return {
            inc: inc,
            get: get
        }

    })();

    return sample;

}, this);

这一堆东西看起来就不好惹,都要学吗?

其实只要会require.js就好了,如果会使用webpack,require.js也可以不用使用了。
RequireJS文档

为什么要用require.js?

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。

比如这种:
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

这段代码依次加载多个js文件

这样的写法有很大的弊端:

  • 加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;
  • 由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的module1.js要在module2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

requireJS主要解决两个问题
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

使用require.js

  • 下载

下载require.js

  • 使用

下载后,假定把它放在js子目录下面,就可以加载了。

<script src="js/require.js"></script>
//这种写法,也可能造成网页失去响应

解决办法:

① 把它放在网页底部加载

② <script src="js/require.js" defer async="true" ></script>
//defer 兼容IE
//async属性表明这个文件需要异步加载

加载require.js之后,如何加载自己的代码?

假定我们自己的代码文件是main.js,也放在js目录下面
<script src="js/require.js" data-main="js/main"></script>
//data-main="js/main"指定网页程序的主模块。这个文件会第一个被r.js加载。
//r.js默认的文件后缀名js,可以把main.js简写成main
  • 主模块写法:

data-main="js/main"main.js指定为主模块,意思是整个网页的入口代码。所有代码从这儿开始运行。

如果我们的代码不依赖任何其他模块,那么可以直接写入javascript代码。
//main.js
alert("加载成功!");

这种方法同样也没必要使用require.js

主模块依赖于其他模块
要使用AMD规范定义的的require()函数
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
  // some code here
});

例子:
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
  // some code here
});
//require.js会先加载jQuery、underscore和backbone
//加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()函数接受两个参数:

  • 第一个参数是一个数组,表示所依赖的模块,['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;
  • 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。

require解决的问题的原理

  • require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应。
  • 它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

模块的加载

require.config()方法修改依赖模块引用地址

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
 // some code here
});
//主模块的依赖模块是['jquery', 'underscore', 'backbone']。

默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为jquery.jsunderscore.jsbackbone.js,然后自动加载。

require.config()方法,我们可以对模块的加载行为进行自定义

require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

  • 路径默认与main.js在同一个目录(js子目录)
//main.js
require.config({
 paths: {
  "jquery": "jquery.min", 
  "underscore": "underscore.min",
  "backbone": "backbone.min"
    }
});
//以下代码充数 可忽略
//require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
 // some code here
//});
  • 如果这些模块在其他目录,比如js/lib目录
方法一:逐一指定
require.config({
  paths: {
    "jquery": "lib/jquery.min",
    "underscore": "lib/underscore.min",
    "backbone": "lib/backbone.min"
  }
});

方法二:改变基目录(baseUrl)
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"
  }
});

也可以指定它的网址
require.config({
   paths: {
     "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
   }
});
优化工具

require.js要求,每个模块是一个单独的js文件
这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。

AMD模块的写法

require.js加载的模块,采用AMD规范
模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

假定现在有一个math.js文件,它定义了一个math模块。
// math.js
define(function (){
 var add = function (x,y){
      return x+y;
    };
 return {
   add: add
 };
});
加载
// main.js
require(['math'], function (math){
 alert(math.add(1,1));
});
依赖其他模块

define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

define(['myLib'], function(myLib){
  function foo(){
    myLib.doSomething();
  }
  return {
    foo : foo
  };
});
//当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

加载非规范的模块

  • 理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。
  • 但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?
    回答是:可以的。

这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

require.config({
  shim: {
    'underscore':{
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

//比如,jQuery的插件可以这样定义:
shim: {
 'jquery.scroll': {
   deps: ['jquery'],
   exports: 'jQuery.fn.scroll'
 }
}

require.js插件

require.js还提供一系列插件,实现一些特定的功能。

domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc){
    // called once the DOM is ready
});

text和image插件,则是允许require.js加载文本和图片文件。

define([
 'text!review.txt',
 'image!cat.jpg'
 ],
 function(review,cat){
  console.log(review);
  document.body.appendChild(cat);
 }
);

类似的插件还有json和mdown,用于加载json文件和markdown文件。

参考文档

Javascript模块化编程(一)(二)(三) —— 阮一峰
前端模块化
webpack文档
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的: 解决命名冲突 依赖管理 其他价值 提高代码可读性 代码解耦,提高复用性 CM...
    JamHsiao_aaa4阅读 362评论 0 1
  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 648评论 3 1
  • 题目1: 为什么要使用模块化? 网页愈趋向Web应用程序,导致JavaScript的体量愈来愈大,客户端的代码模块...
    cctosuper阅读 285评论 0 0
  • 题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...
    萧雪圣阅读 271评论 0 0
  • 今天莫名其妙会自由泳了,好开心! 1. > ">" 用于定向输出到文件,如果文件不存在,就会创建文件;如果文件存...
    loodeer阅读 547评论 0 4