common.js主要语法就是

var math=require('math');

math.add(2,3);

require()用于加载模块就行了。

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

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

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

AMD全称Asynchronous,意思就是"异步模块定义“”,用于异步加载,回调函数加载完需要的模块再来加载自定义语句,即它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

将上面的require()函数修改为AMD规范即是

require(['math'],function(math){

math.add(2,3)})

math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。

目前,主要有两个Javascript库实现了AMD规范:require.jscurl.js

接下来,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。

require.js出现解决问题

一:解决多个文件加载问题,多个文件加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长

二:处理多个文件依赖问题

require['moduleA','moduleB','moduleC'],function(moduleA, moduleB, moduleC){

//some code here

}

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

例如:

假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:

  require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

    // some code here

  });

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

加载行为require.config()方法,equire.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

require.config({

paths:{

"jquery":"jquery.min",

"underscore":"underscore.min",

"backbone":"backbone"

}

})

上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。

一种是逐一指定路径。

require({

path:{

"jquery":"lib/jquery.min",

"underscore":"lib/underscore.min",

"backbone":"lib/backbone.min"

}

})

另一种则是直接改变基目录(baseUrl)。

 require.config({

    baseUrl: "js/lib",

    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

如果某个模块在另一台主机上,也可以直接指定它的网址,比如:

  require.config({

    paths: {

      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

    }

  });

AMD模块的写法

math.js

//math.js
define(function()
{
var add=function(x,y)
{
return x+y;
}
return {add:add};
});

引入math.js

require(['math'],function(math){

alert(math.add(1,2))

});

jquery库符合require.js规范

backbone和underscore都不符合require规范,所以需要定义规范在require.config里

require.config({
shim: {
'underscore':{
export:'_'
},
'backbone':{
deps:['jquery','underscore'],
export:'Bckbone'

}

}
});
 require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。

具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性

接下来是require还有一些插件

require(['domready!'], function (doc) {
//called once the dom ready
})
require(['text!review.txt', 'image!cat.jpg'], function (review, cat) {
console.log(review);
document.body.appendChild(cat);
})

AMD规范的更多相关文章

  1. JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  2. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  3. AMD规范与CMD规范的区别

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

  4. JavaSript模块规范 - AMD规范与CMD规范介绍(转)

    JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...

  5. AMD规范与CMD规范的区别是什么?

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

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

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  7. JavaSript模块化-AMD规范与CMD规范

    JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...

  8. (转)JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

  9. JavaSript模块规范 - AMD规范与CMD规范介绍 (转载lovenyf.blog.chinaunix.net)

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  10. Requirejs之AMD规范

    一.什么是AMD规范 AMD是Asynchronous Module Definition-----异步模块定义 AMD规范定义了2个函数define()与require() 下面我们来看一下定义方法 ...

随机推荐

  1. unity3D学习序幕

    目前,我所在的公司不适合我长久发展,在一好友的提示下,我决定以unity3D程序员的身份,返回我2013年工作过的那家公司.关于unity3D,除了几年前一点模糊的记忆,其他都是一篇空白.今年年初我买 ...

  2. 关于ocx中遇到的坑

    前言 这还是第一次写博客,以前太懒了,现在发现是很有必要记录下这些经验和问题的.最近项目中有个需求(报表单据需要客户签名,连接签字板,把签名单据同步到服务器上),需要和硬件交互,当时硬件商提供了ocx ...

  3. 美团点评2017校招研发offer面经

    2017届的校招早早就结束了,抽出时间做个记录. 职位:后台开发工程师 岗位职责: 如果你热爱编程,这里给你平台用代码改变世界: 如果你乐于挑战,这里有用户和商家五花八门的需求和苛刻的系统运行环境在等 ...

  4. mysql权限设置

    想要设定权限,必须通过root用户登录: >> grant all privileges on *.* to root@"%" identified by " ...

  5. TypeScript -- 面向对象特性

    .class关键字和类名就可以定义一个类 . 类的访问控制符--有三个,.] = ] = ] = ;.声明参数 .用接口声明方法 .理解模块--一个文件就是一个模块,就是这么个意思 ,不用想的多么高大 ...

  6. Intellj idea 安装JUnit

    1.file-Settings-Plugins-Browse repositories-HTTP Proxy Settings将No proxy改成Auto-detect proxy settings ...

  7. 仅以一个前端开发人员的角度看微信小程序

    看了几天的小程序(当然也包括了上手书写),才有了这篇博文,非技术贴,只是发表下个人观点,仅以个人技术能力来看小程序. 首先说下优点: 调试工具:官方的工具还是做了很多工作,包括监听文件变动自动刷新,编 ...

  8. Defraggler(磁盘整理软件) V2.21.993 绿色版

    软件名称: Defraggler(磁盘整理软件) 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 5.0MB 图片预览: 软件简介: Defraggler ...

  9. java读写锁源码分析(ReentrantReadWriteLock)

    读锁的调用,最终委派给其内部类 Sync extends AbstractQueuedSynchronizer /** * 获取读锁,如果写锁不是由其他线程持有,则获取并立即返回: * 如果写锁被其他 ...

  10. linode更换Linux内核教程(独家)

    Linode服务器性价比高,最低套餐2G内存,享受每月2TB流量,机房40Gb带宽,每月供需10美元(Linode优惠链接).Linode用户创建vps服务器后,可在后台自定义Linux系统版本,包括 ...