CommonJS规范与AMD规范的理解

最新推荐文章于 2024-05-15 22:42:05 发布

weixin_34130269

最新推荐文章于 2024-05-15 22:42:05 发布

阅读量96

点赞数

文章标签： python javascript 前端 ViewUI

原文链接：https://my.oschina.net/realfighter/blog/349579

版权

2019独角兽企业重金招聘Python工程师标准>>>

链接地址：http://www.xx566.com/detail/32.html

谈到AMD，我们首先来了解一个基于AMD规范的实现，Require.js，一个强大的工具包，它能够自动的把混乱的前端脚本加载的规整而有序，Require.js主要用于客户端的模块管理，和其他js库类似，首先你需要引入，如下：

<script src="js/require.js" async="true" defer="defer" data-main="js/main"></script>

上面代码的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是同步加载模块，只有模块加载完成，才能执行后面操作。

关于更多CommonJS，请参阅http://wiki.commonjs.org/wiki/CommonJS

关于更多AMD，请参阅https://github.com/amdjs/amdjs-api/wiki/AMD

转载于:https://my.oschina.net/realfighter/blog/349579