模块化JavaScript设计模式(一)
在可扩展JavaScript的世界里,假设我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成。
在可能的情况下。通过一处依赖性。松耦合能够使应用程序的可维护性更加简单。 假设有效地实现了这点,就非常easy地了解一部分怎样影响还有一个部分。
异步模块定义(AMD)的总体目标是提供模块化的JavaScript解决方式。以便开发人员使用。诞生于使用XHR+eval的Dojo开发经验。这样的格式的支持者希望可以避免未来的不论什么解决方式受到过去解决方式缺点的影响。 AMD模块格式本身就是对定义模块的建议,其模块和依赖都将可以进行异步载入。
AMD最開始是CommonJS重模块格式的草案规范,但因为没有达到广泛的一致,这样的格式的进一步发展就转移到了amdjs社区(https://github.com/amdjs)。
一、模块入门
关于AMD有两个关键概念是值得我们注意的,他们是用于模块定义的define方法和用于处理依赖载入的require方法。试用一下方法。define用于定义已命名或未命名模块:
define(
module_id /*可选*/,
[dependencies] /*可选*/,
definition function /*function for instantiating the module or object实例化模块或对象的函数*/
)
module_id是一个可选參数。它通常仅仅在非AMD 连接工具被使用时才须要。当遗漏这个參数时。我们称这个模块未匿名的(anonymous)。
当使用这个匿名模块时。模块身份的概念是DRY,以便更easy避免文件名称和代码反复。由于代码变得更轻便了,不须要改动代码本身或改变其模块ID,就能够将它非常easy地移动到其它位置。
Developers能够只通过使用AMD优化器在多个环境中执行同样的代码,AMD优化器在CommonJS环境(譬如r.js https://github.com/jrburke/r.js/)下工作。
define ("myModule", //定义一个module
['foo', 'bar'],
function (foo, bar) { //模块定义函数,依赖foo bar 作为參数映射到函数上
//这里创建你的模块
var myModule = {
dostuff: function () {
console.log('yay, stuff');
}
};
return myModule;
}
);
//第二种定义方式
define('myModule', ['math', 'graph'], function (math, graph) {
return {
plot: function(x, y) {
return graph.drawPie(math.randomGrid(x, y));
}
}
});
require通经常使用于载入顶级JavaScript文件或模块的代码。
//foo bar是两个外部模块。两个模块载入以后输出作为回调函数的參数传入
require(['foo', 'bar'], function (foo, bar) {
//
foo.doSomething();
})
动态载入依赖
define(function (require) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
}
})
了解 AMD: 插件
//使用AMD能够载入随意格式的内容
//这样的方式能够用于模板依赖,以便在页面载入的时候进行做换肤方面的工作
define(['./templates', 'text!./template.md', 'css!./template.css'], function (templates, template) {
console.log(templates);
});
尽管在上面的演示样例重包括css。用于载入css依赖。但这样的方法会有一些警告。党css全然被载入时。它不一定全然生效。取决于怎样处理创建过程。它也可能使用css作为一个依赖文件而被包括在优化的文件里,因此。在将css作为载入依赖使用的情况下,一定要慎重。
该演示样例能够简单看作是requirejs(['app/myModule'], function () {})。表明载入器的顶级全局对象被使用。
这里演示了怎样使用不同的AMD载入器载入顶级模块nahor,通过使用define()函数,假设塔接受了一个本地模块參数。那么全部require([])的演示样例都适用于curl.js 和 RequireJS这两种类型的载入器。
模块化JavaScript设计模式(一)的更多相关文章
- JavaScript设计模式 -- 读书笔记
JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...
- 【读书笔记】读《JavaScript设计模式》之代理模式
一.定义 代理是一个对象,它可以用来控制对另一个对象的访问.它与另外那个对象实现了同样的接口,并且会把任何方法调用传递给那个对象.另外那个对象通常称为本体.代理可以代替其实体被实例化,并使其可被远程访 ...
- 【读书笔记】读《JavaScript设计模式》之工厂模式
一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它 ...
- 【读书笔记】读《JavaScript设计模式》之桥接模式
桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 一.使用场景 使用场景一:事件监控 对于前端而言,最典型的使用场景——事件监控.如—— addEvent(element ...
- JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)
(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- 【JavaScript设计模式系列---开篇预览】
转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...
- 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 模式(一)javascript设计模式
模式有三种:Architectural Pattern.Design Pattern.Coding Pattern,即:框架模式.设计模式.编程模式.本文主要讲解javascript中的设计模式,好的 ...
随机推荐
- IT智力题
题目1:你让工人为你工作7天,给工人的回报是一根金条.金条平分成相连的7段,你必须在每天结束时给他们一段金条,如果只许你两次把金条弄断,你 如何给你的工人付费? 答案:两次弄断就应分成三份,我把金条分 ...
- Java 断点调试总结
为了准备调试,你需要在代码中设置一个断点先,以便让调试器暂停执行允许你调试,否则,程序会从头执行到尾,你就没有机会调试了. 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头 ...
- xdebug初步
;加载xdebug模块. 根据PHP版本来选择是zend_extension还是zend_extension_ts ts代表线程安全 被坑过1次zend_extension="\web\ ...
- 桶排序-C-结构体排序
struct TS { int index; ]; }; ] = {{,,,,,"s8"}}; ]; int i; int length = sizeof(a) / sizeof ...
- SQL Server常用元数据函数
元数据函数 1.获取数据库标识符DB_ID DB_ID函数用于获取当前数据库的唯一ID(int数据类型),数据库ID用于服务器上唯一区分书库. 语法结构: DB_ID (['database_name ...
- 第二百一十三天 how can I 坚持
今天去爬山了,百望山,山好矮,绕来绕去也挺远的,山上有座庙,佘太君庙,还有个望京楼,还看到了个写书法的,不懂,但很崇拜. 今天玩LOL全输了,咋搞的呢. 还有买了点排骨,都没吃完. 下周去爬凤凰岭. ...
- Hadoop学习笔记(2)
Hadoop学习笔记(2) ——解读Hello World 上一章中,我们把hadoop下载.安装.运行起来,最后还执行了一个Hello world程序,看到了结果.现在我们就来解读一下这个Hello ...
- HDU 4612 Warm up(2013多校2 1002 双连通分量)
Warm up Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Su ...
- hdu 1044 Collect More Jewels(bfs+状态压缩)
Collect More Jewels Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- 关于datatable的一些操作以及使用adapter对数据的操作
private void updateToolStripMenuItem_Click(object sender, EventArgs e) {//将数据更新回数据库 //获取源数据 DataTabl ...