当前位置： 移动技术网 > IT编程>网页制作>CSS > CommonJS、AMD、UMD、CMD使用介绍

CommonJS、AMD、UMD、CMD使用介绍

2018年03月11日  | 移动技术网IT编程  | 我要评论

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');
入口文件

一般都会有一个主文件（入口文件），在中加载这个入口文件，然后在这个入口文件中加载其他文件。 可以通过在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: "_"
        }
    }
});
使用

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网