欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CommonJS、AMD、UMD、CMD使用介绍

程序员文章站 2022-05-18 08:37:33
CommonJS(同步的,适用在node.js) CommonJS是nodejs也就是服务器端广泛使用的模块化机制。 该规范的主要内容是,模块必须通过module.exports...

CommonJS(同步的,适用在node.js)

CommonJS是nodejs也就是服务器端广泛使用的模块化机制。 该规范的主要内容是,模块必须通过module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。

定义模块

在每个模块内部,module变量代表当前模块。它的exports属性是对外的接口,将模块的接口暴露出去。其他文件加载该模块,实际上就是读取module.exports变量。

var x = 5;
var addX = function (value) {
    return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
加载模块
//require方法用于加载模块,后缀名默认为.js
var app = require('./app.js');
入口文件

一般都会有一个主文件(入口文件),在index.html中加载这个入口文件,然后在这个入口文件中加载其他文件。 可以通过在package.json中配置main字段来指定入口文件。

模块缓存

第一次加载某个模块时,Node会缓存该模块。以后再加载该模块,就直接从缓存取出该模块的module.exports属性。

加载机制

CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

AMD(异步,为浏览器设置)

AMD(异步模块定义)是为浏览器环境设计的,因为 CommonJS 模块系统是同步加载的,当前浏览器环境还没有准备好同步加载模块的条件。 requirejs即为遵循AMD规范的模块化工具。 RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。

定义模块

define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。 按照是否依赖其他模块,可以分成两种情况讨论。第一种情况是定义独立模块,即所定义的模块不依赖其他模块;第二种情况是定义非独立模块,即所定义的模块依赖于其他模块。

独立模块
define(function(){
    ……
    return {
        //返回接口
    }
})    
//define定义的模块可以返回任何值,不限于对象。
非独立模块
define(['module1','module2'],function(m1,m2){
  ……
  return {
    //返回接口
  }
})

要定义的模块依赖于module1和module2,那么第一个参数就是依赖的模块的数组。 第二个参数是一个函数,仅当依赖的模块都加载成功后才会被调用。此函数的参数m1,m2与前面数组中的依赖模块一一对应。 此模块必须返回一个对象,供其他模块调用。

加载模块

同样使用require()方法来加载模块,但由于是异步的,因此使用回调函数的形式。

require(['foo','bar'],function(foo,bar){
  ……
})

上面方法表示加载foo和bar两个模块,当这两个模块都加载成功后,执行一个回调函数。该回调函数就用来完成具体的任务。

//require方法也可以用在define方法内部。
define(function(require){
    var otherModule = require('otherModule');
})

//require方法允许添加第三个参数,即错误处理的回调函数。
require(
    [ "backbone" ], 
    function ( Backbone ) {
        return Backbone.View.extend({ /* ... */ });
    }, 
    function (err) {
        // ...
    }
);
配置
require.config({
    paths: {
        "backbone": "vendor/backbone",
        "underscore": "vendor/underscore"
    },
    shim: {
        "backbone": {
            deps: [ "underscore" ],
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        }
    }
});
使用

在主页面index.html中先通过script标签引入require.min.js。 再通过script标签引入一个入口文件main.js,此入口文件一般用于配置(require.config),以及引入其他模块。