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. TCP/IP传输层,你懂多少?

    1. 传输层的主要功能是什么?2. 传输层如何区分不同应用程序的数据流?3. 传输层有哪些协议?4. 什么是UDP协议?5. 为什么有了UDP,还需要TCP?6. 什么是TCP协议?7. 怎么理解协议 ...

  2. 初级FTP搭建

    一:了解FTP基本知识 Vsftpd 1.什么是FTP? File Transfer Protocol 基于C/S结构的文件传输协议2.使用什么协议?什么端口? TCP 21 建立命令链路 TCP 2 ...

  3. Android 性能优化——内存篇

    一.android官方一些内存方面的内存tips 1.避免创建不必要的对象. 如尽量避免字符串的加号拼接,可以使用StringBuilder来拼接. 如果需要TextView设置多个字符串片段,可以使 ...

  4. php最新学习-----文件的操作

    一.文件:文件和目录 (1)判断文件的类型用:filetype() filetype("文件路径+文件名") //判断文件的类型 例如:我这里查找的的上一级目录中的json文件,输 ...

  5. svg滤镜学习

    SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一.  SVG滤镜的原理 基本原理描述太多 ...

  6. Santa Claus and a Palindrome

    Santa Claus and a Palindrome 题目链接:http://codeforces.com/contest/752/problem/D 贪心 很自然地,可以想到,若subS不是回文 ...

  7. nodejs中express安装失败解决方法

    http://jingyan.baidu.com/article/922554468a3466851648f419.html

  8. asp.net如何把一个tostring类型转化为dateTime类型

    Convert.ToDateTime(dr["consult_DealTime"].ToString()).ToString("yyyy-MM-dd"); co ...

  9. 安装用户脚本的福音:Tampermonkey(油猴)

    一直都知道网络的强大,NB的程序员大牛潜伏在我们身边.但是一直以来,如果想使用的一些特殊用途的浏览器插件都无法安装,今天被大神级的师兄给秒到了,原来这世上还有一个免费的用户脚本管理器,有了用户脚本管理 ...

  10. ios系统视频播放器MPMoviePlayerController应用遇到的坑

    最近在做视频播放时应用系统MPMoviePlayerController播放器播放视频,发现点击快进快退会出现黑屏现象,并且点击完成按钮也不会返回,代码以及界面如下所示: NSURL *url=[se ...