模块化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中的设计模式,好的 ...
随机推荐
- stl 中List vector deque区别
stl提供了三个最基本的容器:vector,list,deque. vector和built-in数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此 它能非常好的支持随 ...
- web.xml 配置介绍
这个不是原创,有点早了,具体从哪里来的已经记不得了.但是东西是实实在在的. 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<c ...
- ubuntu下apt-get update出现hash校验和错误
可能原因 校园网进行网络缓存导致内容滞后. 解决办法 先清除旧的apt-get更新列表 sudo rm -rf /var/lib/apt/lists/* 使用代理服务器或者VPN 重新更新 sudo ...
- php--opp--2.什么是类,什么是对象,类和对象这间的关系
类的概念:类是具有相同属性和服务的一组对象的集合.它为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和服务两个主要部分.在面向对象的编程语言中,类是一个独立的程序单位,它应该有一个类名并包括属 ...
- SurfaceView 和 TextureView
1.区别 The followings are two limitations of SurfaceView: You can not be animated, transformed and sca ...
- Unix 环境高级编程---线程创建、同步、
一下代码主要实现了linux下线程创建的基本方法,这些都是使用默认属性的.以后有机会再探讨自定义属性的情况.主要是为了练习三种基本的线程同步方法:互斥.读写锁以及条件变量. #include < ...
- POJ 2888 Magic Bracelet(Burnside引理,矩阵优化)
Magic Bracelet Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 3731 Accepted: 1227 D ...
- hdu 4289 Control(最小割 + 拆点)
http://acm.hdu.edu.cn/showproblem.php?pid=4289 Control Time Limit: 2000/1000 MS (Java/Others) Mem ...
- linux之间连接—使用SSH
菜鸟学linux笔记.本机是linux,需要远程连接linux,使用SSH (1)在终端,输入命令:ssh root@110.110.100.100 root为用户名,110.110.100.100为 ...
- MSSQL手札四 MSSQL的函数
和oracle一样,sql也可以自己定义函数 一个返回值,引用DEMO如下: 编写一个函数,该函数,可以通过输入借书时间来判断是否到期,当借阅时间大于30天,返回已经过期:否则返回还未到期. CREA ...