`
子衿青青
  • 浏览: 110959 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

AMD规范:简单而优雅的动态载入JavaScript代码

 
阅读更多

本文翻译自http://www.sitepen.com/blog/2010/11/04/requirejsamd-module-forms/,并加入部分自己的解释。

CommonJS 提出了一种用于同步或异步动态加载JavaScript代码的API规范,非常简单却很优雅,称之为AMD(Modules/AsynchronousDefinition)。RequireJS和NodeJS的Nodules已经实现了这个API,而Dojo也将马上完全支持(Dojo1.6)。规范本身非常简单,甚至只包含了一个API:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

通过参数的排列组合,这个简单的API可以从容应对各种各样的应用场景,如下所述。

匿名模块

在这种场景下,无需输入模块名,即省略第一个参数,仅包含后两个参数:依赖模块的列表以及回调函数,例如一个简单的匿名模块可以用如下代码定义:

define(["math"], function(math){
return {
addTen: function(x){
return math.add(x, 10);
}
};
});
在这里,第一个参数表示依赖的模块列表,即math模块。一旦所有依赖的模块被载入完成,那么第三个参数定义的回调函数将被执行,依赖模块的引用作为参数传递给回调函数。

如例子中所示,如果模块名被省略不写,那么这是一个匿名模块。通过这种强大的方式,模块的源代码与它的标识可以做到不相关。从而可以在不改变模块代码的情况下移动源码文件的位置。这个技术遵循了基本的DRY(Don't Repeat Yourself)原则,避免了模块标识的多次存储(文件名/路径信息不会在代码中重复)。这不仅使得模块的开发变得更加容易,而且为模块的重用提供了极大的灵活性。

下面我们看如何从一个Web页面载入这个模块。我们假设上面的模块存储在文件adder.js中。使用RequireJS,我们可以用下面方式来载入这个模块:
<script src="require.js"></script>
<script>
require(["adder"], function(adder){
// ready to use adder
});
</script>
一旦代码被执行,RequireJS将会自动去调用adder模块所有的依赖模块。载入完毕之后,我们就可以通过回调函数的adder参数来使用前面定义的匿名模块。例子中可以看到,adder.js里存储的是定义的匿名模块,实际上我们可以用任何文件/路径来包含这个模块,为模块的重用提供了方便(Java中的文件名/路径和类名/包的必须一致性实际上就为类级别的重用造成了不便)。require函数用于载入任何一个模块,后面将多次使用。

对于匿名模块的使用有一些注意事项。比如每个文件中只能包含一个匿名模块,而且匿名模块只能被载入器载入,即只能用require来载入。也可以这么理解,实际上匿名模块并不是没有名字,而是在使用时进行命名的模块,例子中就是adder。

数据封装:新的JSON-P

对于一些仅仅提供数据或者独立方法(不依赖于其它模块的方法)的模块,可以简单的用如下方式来定义:
define({
name:"some data"
});
这个和JSON-P非常像,但是却有一个显著的优点:它使得JSON-P数据可以现在静态文件中,而并不需要动态的回调过程。这也使得内容是可cache的,而且是CDN友好的。

封装CommonJS模块

CommonJS也是一套RIA框架,其中的模块可以通过AMD来进行封装,从而可以用define的方式很容易的进行异步装载,在这里我们可以省略前2个参数,仅包含回调函数,但回调函数的第一个参数是require方法,第二个参数是exports对象,它定义了模块本身,回调函数里的require的使用将被自动进行动态加载。例如:
define(function(require, exports){
//math是标准CommonJS模块:
var math = require("math");
exports.addTen = function(x){
return math.add(x, 10);
};
});
需要注意这种形式要求模块载入器扫描require函数。require调用必须写成require(“…”)的形式才能被正确识别从而正常工作。这在一些浏览器不能正常工作(例如默写版本的Opera移动版,以及PS3)。当然,如果在部署前对代码进行了build,这将完全不成问题。你也可以封装CommonJS模块,并手动的指定依赖,这种方式使得我们也可以引用CommonJS变量,从而我们可以包含标准的require和exports变量:
define(["require", "exports", "math"], function(require, exports){
// standard CommonJS module:
var math = require("math");
exports.addTen = function(x){
return math.add(x, 10);
};
});

完整的模块定义

一个完整的模块定义包含了模块名,依赖,以及回调函数。这种形式的优点是模块可以包含在另外的文件中,或者可以用script标记载入的地址中。这是build工具自动生成的规范模式,使得多个依赖可以被打包在同一个文件中,这种格式的例子如下:
define("adder", ["math"], function(math){
return {
addTen: function(x){
return math.add(x, 10);
}
};
});

最后,我们来看有模块id,但没有模块依赖的情况。这种情况用于你想指定模块id,但是这个模块不依赖于其它模块。这时的参数默认是“require”,“exports”和“module”。从而我们可以这样创建adder模块。
define("adder", function(require, exports){
exports.addTen = function(x){
return x + 10;
};
});
通过这种方式定义的模块可以被RequireJS载入,也可以作为其它模块的依赖被载入,或者直接用require()的形式载入。

综上所述,这种API看似简单,却提供了一种极其灵活的方式来定义模块,适用于各种应用场景,从可被自由移动的匿名模块,到构建后的可被<script>标记载入的模块。当前RequireJS和Dojo实现了这套规范,而JavaScript的Web Server框架NodeJS的Nodules也实现了这个规范。

分享到:
评论

相关推荐

    JavaScript代码应该放在HTML代码哪个位置比较好?

    在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所...

    页面载入等待代码(用javascript技术实现)

    本篇文章将深入探讨如何利用JavaScript技术实现页面载入等待代码,以及相关的知识点。 首先,理解页面生命周期是关键。在Web开发中,页面有以下几个关键阶段:DOMContentLoaded(文档对象模型已加载)、load(所有...

    如何让动态插入的javascript脚本代码跑起来

    本文将详细介绍如何让动态插入的JavaScript脚本代码正确运行,并探讨其中的一些关键点。 首先,我们来看一下动态插入脚本的两种常见方式: 1. 直接插入`&lt;script&gt;`标签 这是最直观的方法,通过JavaScript创建一个...

    动态创建iframe,并动态添加js执行代码

    在IT行业中,动态创建iframe和动态添加JavaScript代码是一种常见的技术,尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先,`iframe`(Inline Frame)是HTML中的一种元素,...

    网页设计常用Javascript经典代码

    以下是一些经典且实用的JavaScript代码片段,它们在创建动态网页时非常有用: 1. **添加到收藏夹**: 这段代码允许用户将当前网页一键保存到他们的收藏夹中,方便后续访问。通过点击一个按钮,JavaScript可以调用...

    Java动态生成代码并编译载入.pdf

    Java动态生成代码并编译载入是一个高级的编程技术,主要用于那些需要在应用程序运行时根据某些模板和数据动态地生成、编译和加载Java代码的场景。这种技术在需要高度定制化处理或是运行时参数化生成业务逻辑的系统中...

    ExtJS 事件处理 动态载入

    在深入探讨事件处理和动态载入这两个主题之前,我们先简单了解一下ExtJS的基础。 ExtJS 提供了一个完整的框架,包括丰富的UI组件、数据绑定机制、布局管理以及强大的事件模型。这使得开发者能够创建功能丰富的Web...

    JS 页面载入等待特效 javascript

    在给定的部分内容中,我们看到了一个简单的JavaScript代码片段,其作用是显示一段文本提示,并跳转到指定URL。下面是具体的代码分析: ```html 页面载入等待的Js代码 &lt;script language="javascript"&gt; &lt;!-- url...

    Java动态生成代码并编译载入

    Java动态生成代码并编译载入是Java编程中的一项高级技术,它允许程序在运行时创建新的类或接口,然后即时编译并加载到当前的Java虚拟机(JVM)中。这种技术主要依赖于Java的反射API和Java的编译器API(javac)或者更...

    轻轻松松学用javascript编程

    ◆ 可参考的JavaScript 代码:预载入图片实现导航按钮的动态变化效果; ◆ 可参考的JavaScript 代码:显示对象的提示信息; ◆ 可参考的JavaScript 代码:精美的日历; ◆ 可参考的JavaScript 代码:下拉菜单; ...

    swfobject 网页载入flash swf JavaScript 代码

    例如,以下是一个简单的SWFObject嵌入代码示例: ```html &lt;!DOCTYPE html&gt; &lt;script src="swfobject.js"&gt;&lt;/script&gt; 如果你能看到这段文字,那可能是因为你的浏览器不支持Flash或者没有启用Flash。 ...

    jquery动态载入内容.zip

    5. **javascript.js**:这可能是包含特定于项目或网站的JavaScript代码文件,它可能扩展了jQuery的功能,实现了动态加载内容的具体逻辑。 6. **css.css**:这是样式表文件,用于定义页面的布局和视觉样式。 7. **...

    易语言动态载入dll源码

    动态载入DLL(Dynamic Link Library)是Windows操作系统中的一种机制,允许程序在运行时加载和使用库文件,而不是在编译时就绑定。这种技术在模块化开发、插件系统以及节省资源等方面有着广泛的应用。 易语言动态...

    完整版可执行动态载入&输出其他文件模块演示例子.e.rar

    动态载入(Dynamic Loading)是指在程序运行时根据需要加载库或模块,而不是在程序启动时一次性加载所有资源。这种技术可以节省内存,因为只有实际使用到的模块才会被加载。在Windows系统中,这通常通过LoadLibrary...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...

    JavaScript载入文件并显示进度条代码.rar

    这个名为"JavaScript载入文件并显示进度条代码.rar"的压缩包包含了一个实现这一功能的解决方案。它利用JavaScript技术和Flash技术,为文件加载过程添加了实时的进度条展示,虽然不是针对文件上传的进度跟踪,但对...

    动态载入/删除/更新外部 JavaScript/Css 文件的代码

    动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在&lt;head&gt;标签里面进行添加: 代码如下: &lt;head&gt; [removed][removed] &lt;link rel=”stylesheet” type=”...

    unity 动态载入包括Obj、Fbx等多种模型

    这个比较实用的,可以动态载入多种模型,特别是FBX模型,在创建场景时候很好用,不过这个是试用版本,贴图会有问题,如果要更好的还是推荐买正版

    用ExtJS实现动态载入树WORD版

    资源名称:用ExtJS实现动态载入树 WORD版内容简介:本文档主要讲述的是用ExtJS实现动态载入树;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看资源截图: 资源太大,传百度网盘了,链接在附件中,有...

    动态载入js提高网页打开速度的方法

    为了提高网页的打开速度,一种有效的方法是采用动态载入JavaScript代码的策略。这种技术可以避免在页面初次加载时载入不必要的JavaScript代码,从而减少页面加载时间。 首先,静态加载JavaScript通常意味着在HTML...

Global site tag (gtag.js) - Google Analytics