一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CommonJS规范与AMD规范的理解

时间:2016-04-14 编辑:简简单单 来源:一聚教程网

和其他js库类似,首先你需要引入,如下:

上面代码的data-main主要是指定主代码所在的脚本文件,对应js目录下的main.js,requirejs在读取本地js文件时,可以省 略.js后缀,如果是第三方js,则需要.js后缀,如www.google.com.hk/.../jquery.js,defer='defer'和 async='true'主要是屏蔽浏览器差异,延迟加载脚本。

Require.js主要提供define和require两个方法来进行模块化编程,前者用来定义模块,后者用来调用模块,这种模块定义的方法不会污染全局环境,能够清晰的显示依赖关系。

require方法本身也是一个对象,可以使用自带的config方法,进行模块的运行参数配置,config接收任意对象作为参数,如下:

require.config( {
    baseUrl : "/",
    paths : {
        "jquery" : "js/jquery-1.8.0"
    }
});

这里主要介绍两个参数:baseUrl用来配置文件的访问路径,上例中为相对webroot的路径,paths主要是知道各个模块的外置,可以定义多个模 块,上例中jquery为定义的模块名,js/jquery-1.8.0为jquery文件所在路径。也可以定义多个文件位置,如'js/jquery- 1.8.0','js/jquery-1.8.1';即如果第一个js文件加载失败,会自动加载第二个1.8.1版本的jquery。

对jquery的调用也更为简单,使用require方法,传入两个参数,模块名以及回调函数,如下:

require( [ "jquery"], function($) {
    //your jquery code here
    $("#id").click(function(){});
});

require函数接收一个由模块名称构成的数组,然后并行的加载所有这些脚本模块,它并不会保证按顺序执行这些脚本,但保证了这些脚本的运行满足彼此的 依赖关系,前提是这些脚本的定义遵循AMD(Asynchronous Module Definition,异步模块定义)规范。

相比AMD规范,CommonJS规范更要庞大的多,这点从它的口号就可以看出来,相比jquery的write less,do more,Commonjs的口号看起来更有野心的多,Javascript: not just for browsers any more!,大有颠覆传统js工作的意味,不过commonjs确实正在做到。

根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。如下hello.js:

console.log("this is hello.js");
var hello = function () {
    console.log("hello commonjs");
}
exports.user = "super man";
exports.say = function () {
    console.log(hello);
}

我们可以使用require函数加载这个js,通过一个变量接收,这时这个变量就对应exports对象,可以通过这个变量,使用模块提供的各个方法,如下:

var hi = require("./hello");
console.log(hi.user+" say: "+hi.say());

与require.js相同,require方法默认读取js文件,所以可以省略.js后缀名。

CommonJS是服务器端模块的规范,AMD规范更多是浏览器中的模块规范。Node.JS采用了CommonJS规范,RequiresJS、 JQuery等采用了AMD规范;AMD规范定义了一个语法API,即define函数,而CommonJS提供了一组API层面的定义;AMD规范是异 步加载模块,允许指定回调函数,CommonJS是同步加载模块,只有模块加载完成,才能执行后面操作。

热门栏目