`
mr.a
  • 浏览: 95195 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

来自阮一峰

http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

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

(接上文

七、模块的规范

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

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

但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到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模块化编程是现代Web开发中的重要组成部分,它允许开发者将复杂的代码结构组织成可重用、可维护的模块。AMD(Asynchronous Module Definition)规范是JavaScript模块化的一种实现方式,尤其在大型前端项目...

    Javascript模块化编程

    ### JavaScript模块化编程知识点 #### 一、模块化的重要性 模块化编程是现代软件开发的基础之一,尤其是在JavaScript这种广泛应用于Web开发的语言中尤为重要。模块化的关键在于它允许开发者将复杂的程序拆分成更小...

    JavaScript模块化编程

    ### JavaScript模块化编程 #### 一、理解JavaScript模块化 ##### 1.1 模块化的概念 在软件工程中,模块化是一种重要的设计思想,指的是将复杂的系统分解成一系列独立的功能单元(即模块),每个模块负责实现系统...

    Javascript模块化编程(三):模块化编程实战,试用SeaJS

    JavaScript模块化编程是现代Web开发中的重要组成部分,它有助于组织代码、提高可维护性和复用性。本篇文章将深入探讨JavaScript模块化编程的实战应用,特别是通过试用SeaJS这一工具来实现。SeaJS是一款专注于浏览器...

    Javascript模块化编程(Require.js)

    JavaScript模块化编程是一种组织代码的方式,它使得代码更易于维护、重用和协作。Require.js是JavaScript的一个模块加载器,它引入了AMD(Asynchronous Module Definition)规范,为JavaScript提供了异步加载模块的...

    Javascript模块化编程详解

    JavaScript模块化编程是一种组织代码的方式,它使得代码更容易理解和维护。模块化编程通过将相关的功能封装起来,避免了全局变量的滥用,提高了代码的复用性。本文将深入讲解JavaScript模块化编程的基础和一些进阶...

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

    总的来说,AMD规范通过异步加载机制,为在浏览器环境下实现JavaScript模块化提供了有效的解决方案。它不仅提高了代码的组织性,还优化了网络性能,是当前流行的前端开发实践之一。然而,随着技术的发展,目前ES6模块...

    模块编程AMD规范

    通过以上内容,我们可以看出RequireJS和AMD规范在JavaScript模块化编程中的重要作用,它们提供了高效、灵活的代码组织方式,促进了代码的模块化和可维护性。对于开发大型的、依赖复杂的前端应用来说,掌握AMD规范和...

    JavaScript模块化编程七日

    JavaScript模块化编程是现代Web开发中的关键组成部分,它允许开发者将复杂的代码结构组织成可重用、可维护的模块。在“JavaScript模块化编程七日”这个主题中,我们将深入探讨这一重要概念,涵盖从基本的模块化原理...

    Modules02. JavaScript 模块化编程.pdf_前端学习资料

    JavaScript 模块化编程是解决日益复杂的前端项目管理和维护的关键技术。随着JavaScript在Web开发中的核心地位不断巩固,模块化成为了应对代码量增大、逻辑复杂度提高的有效手段。本文将深入探讨JavaScript模块化的...

    论JavaScript模块化编程_.docx

    JavaScript模块化编程是解决代码组织和管理问题的关键技术,尤其对于大型项目而言,它能够确保代码的可维护性、可重用性和可扩展性。在JavaScript的传统开发模式中,全局变量的滥用、脚本依赖顺序的混乱以及大量脚本...

    Javascript模块化编程(三)require.js的

    总结来说,require.js是JavaScript模块化编程的重要工具,通过AMD模式实现模块定义、依赖管理和异步加载,提高了代码的组织性和运行效率。在大型项目中,结合r.js进行代码优化,可以有效地管理复杂的应用结构。了解...

    JavaScript:模块化编程与CommonJS教程

    CommonJS 是最早被广泛采用的一种JavaScript模块化编程规范,特别是在Node.js环境中。它定义了一套用于服务器端的模块加载规则。 - **require()函数**:用于加载其他模块。当一个模块通过`require()`函数加载时,该...

    javascript模块化

    ### JavaScript模块化详解 #### 一、模块化的背景与意义 在现代Web开发中,JavaScript作为客户端编程的主要语言,其重要性不言而喻。随着Web应用变得越来越复杂,单个脚本文件往往无法满足需求,这就导致了多个...

    JavaScript前端开发模块化教程_PPT.rar

    JavaScript前端开发模块化教程 在当今的Web开发领域,JavaScript作为客户端编程的首选语言,其重要性不言而喻。...通过本教程的学习,你将能熟练地运用JavaScript模块化开发,打造高效、整洁的前端项目。

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

    ### 浅析AMD、CMD与CommonJS规范——JavaScript模块化加载学习心得总结 #### 一、引言 在现代Web开发中,随着项目规模的不断扩大和技术复杂度的提高,JavaScript模块化成为了一种非常重要的编程实践。通过将复杂的...

    javascript模块化编程库require的用法.docx

    ### JavaScript模块化编程库Require.js的使用方法 #### 引言 随着Web应用的日益复杂,传统的JavaScript开发方式已无法满足高效开发与维护的需求。在这样的背景下,Require.js作为一种先进的JavaScript模块加载器,...

Global site tag (gtag.js) - Google Analytics