Javascript模块化编程(一)AMD规范(规范使用模块)


Posted in Javascript onJanuary 17, 2013

这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块。
Javascript模块化编程(一)AMD规范(规范使用模块) 
(接上文)
七、模块的规范
先想一想,为什么模块很重要?
因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了。

目前,通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起。
八、CommonJS
2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。
Javascript模块化编程(一)AMD规范(规范使用模块) 
这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。

node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。

var math = require('math');

然后,就可以调用模块提供的方法
var math = require('math'); 
math.add(2,3); // 5

因为这个系列主要针对浏览器编程,不涉及node.js,所以对CommonJS就不多做介绍了。我们在这里只要知道,require()用于加载模块就行了。
九、浏览器环境
有了服务器端模块以后,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。

但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。还是上一节的代码,如果在浏览器中运行,会有一个很大的问题,你能看出来吗?

var math = require('math'); 
math.add(2, 3);

第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。

这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。
十、AMD
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:

require([module], callback);

第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式,就是下面这样:
require(['math'], function (math) { 

math.add(2, 3); 

});

math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。
目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。
(完)
Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
JS如何生成随机验证码
Mar 02 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
js实现盒子拖拽动画效果
Aug 09 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 #Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 #Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 #Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 #Javascript
JavaScript控制Session操作方法
Jan 17 #Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 #Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
js图片预加载示例
2014/04/30 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解react-redux插件入门
2018/04/19 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python比较两个图片相似度的方法
2015/03/13 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python把转列表为集合的方法
2019/06/28 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
二年级体育教学反思
2014/01/15 职场文书
暑期社会实践方案
2014/02/05 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
读书活动总结
2014/04/28 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
首都博物馆观后感
2015/06/05 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python