`

Javascript模块化编程(二):AMD规范(转载)

 
阅读更多

作者: 阮一峰

<!-- div class="asset-body" -->

这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块。

<!-- /div --><!-- div id="more" class="asset-more" -->

(接上文

七、模块的规范

先想一想,为什么模块很重要?

因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了。

目前,通行的Javascript模块规范共有两种:CommonJSAMD。我主要介绍AMD,但是要先从CommonJS讲起。

八、CommonJS

2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。

这标志"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.jscurl.js。本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。

(完)

分享到:
评论

相关推荐

    Javascript模块化编程(二)AMD规范共3页.pd

    Javascript模块化编程(二)AMD规范共3页.pdf.zip

    Javascript模块化编程

    通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起

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

    个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊

    JS模块化标准技术.JAVASCRIPT的几种模块化技术

    JS模块化标准技术.JAVASCRIPT的几种模块化技术 作为前端重要组成部分的javascript语言,其面向对象功能非常差.所以要实现代码的模块化,需要一些标准:AMD,CMD 针对2种模块化也有现成的js模块化库SeaJs,require.js 今天...

    浅析AMD CMD CommonJS规范–javascript模块化加载学习心得总结

    这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激。 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),...

    JavaScript使用百度ECharts插件绘制饼图操作示例

    本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考,具体如下: ...关于AMD规范的详细介绍,可以参考阮一峰的博文:Javascript模块化编程(二):AMD规范 &lt;script src="http://s

    Seajs是什么及sea.js 由来,特点以及优势

    学习文档偏少且混乱,会更改团队使用JS的编写习惯,必须使用模块化编程。 2).不太适合团队目前的情况,多JS文件但少改动,动态加载优势和模块化优势不明显。 3). 需要配套使用SPM工具,JS的打包和管理工具。   2....

    js-algebraic:代数模块上的一组规范或签名,以及为匹配而构建的标准库的实现

    用JavaScript进行真正的模块化功能编程 代数是一组被称为代数模块或模块时,很显然,我不是指CommonJS的,AMD,或ES6输入/输出模块JavaScript对象。 一个模块包含一组在模块所属的一组类型上运行的相关行为。 例如...

    tech-prep:一组有用的编程主题和链接

    资源JavaScript 嘶嘶声ES6 特性原型与原型发布/订阅(观察者) 例子资源承诺资源函数表达式与声明call() 与 apply() 未定义与空赋值和比较运算符类型自执行功能关闭例子资源面向对象编程类和实例继承与多态命名空间...

    fu-component:基金UI的Templete开发人员

    早期,我们在写 JavaScript 时代码量少,可能几个function就能够解决问题,但是当页面逻辑较为复杂的时候,我们就不得不引入 模块化 的编程。 1. 早期的模块 早期为使得 JavaScript 具备模块化的能力,开源社区的...

    Backbone.js应用程序开发 中文清晰完整版pdf

    使用amd和requirejs将代码进行模块化组织; 使用backbone.paginator插件为collections数据分页; 使用样板代码引导新的backbone.js应用程序; 使用jquery mobile,并解决两者之间的路由问题; 使用jasmine、qunit和...

    Slider:一个基于原生js,实现了新浪微博图片查看的所有功能的js插件

    这个插件实现了AMD规范模块化,利用require.js实现模块调用,并且在微博页面中使用面对对象的编程方式 使用方法: 1.如实例中weibo.html,在末尾中添加 [removed][removed]。 2.注意:保持前端架构与本例一样以及html...

    RequireJS入门一之实现第一个例子

    像我这种菜鸟,会提到海量文章里提到的AMD、JS模块化编程、异步… … 等等 RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖...

    ES6新特性之模块Module用法详解

    ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序...

    localDB:浏览器存储框架

    LocalDB -- Browser Storage Framework 介绍 Github Repo: API Reference: 为开发者提供简单、易用又强大的浏览器端数据存取接口,其被设计用来为 WEB 应用、手机 H5 应用、...LocalDB采用模块化开发的方式,通过

    dojo:Dojo 1-Dojo 1工具包核心库

    为了保持代码的快速和可维护性,Dojo提供了一个异步模块定义(AMD)加载器-将代码段封装到有用的单元中,仅在需要时加载小JavaScript文件,并在彼此依赖时分别加载文件。 当您想要轻松扩展现有的类,在多个类之间...

    计算机应用技术(实用手册)

    Main Processor : AMD Athlon™64 x2 dual core Processor 3600+ CPU为AMD3600+ 速龙64位双核酷睿技术 Memory Testing: 524288k ok with 32M shared memory 内存为512兆 32兆的二级缓存 IDE Channel 0 master : ...

    酷炫的爆栈网源码.zip

    模块化 框架 UI框架 WebSocket 数据可视化 WebGL CSS3 动画 流程控制 函数式编程 手机 UI 框架 jQuery [GitHub] ...

Global site tag (gtag.js) - Google Analytics