AMD规范
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.js和curl.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规范的更多相关文章
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- AMD规范与CMD规范的区别
AMD规范与CMD规范的区别是什么? 在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍(转)
JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...
- AMD规范与CMD规范的区别是什么?
AMD规范与CMD规范的区别是什么? 在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- JavaSript模块化-AMD规范与CMD规范
JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...
- (转)JS模块化编程之AMD规范
模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍 (转载lovenyf.blog.chinaunix.net)
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- Requirejs之AMD规范
一.什么是AMD规范 AMD是Asynchronous Module Definition-----异步模块定义 AMD规范定义了2个函数define()与require() 下面我们来看一下定义方法 ...
随机推荐
- JavaScript系列文章:详解正则表达式之三
在上两篇文章中博主介绍了JavaScript中的正则常用方法和正则修饰符,今天准备聊一聊元字符和高级匹配的相关内容. 首先说说元字符,想必大家也都比较熟悉了,JS中的元字符有以下几种: / \ | . ...
- AngularJS 跨站请求- jsonp请求
今天写东西的时候遇到了 一种情况 ,因为用的不是自己公司人员写的接口 ,而我要写的东西是抓别的网页上的接口 所以出现了 一下这种情况 这是我的请求: 我在浏览器模板赋值的时候发现赋值成功了, 在浏览器 ...
- Xpath学习笔记
最近复习自己上一年的课本,想起来刚学那个时候想做一个写日记的软件. 想不如做,用控制台瞎写了一个,一做就成了,没什么bug,期间使用Xpath来读数据,所以就稍微学了一下. 学习过程就这样做一点笔记, ...
- learning english
distortion 英[dɪ'stɔ:ʃn] 美[dɪˈstɔrʃən]n. 扭曲,变形; 失真,畸变; [心理学] 扭转;[例句]I think it would be a gross disto ...
- sql的ExecuteScalar(),ExecuteNonQuery()
一,ExecuteScalar ExecuteScalar()也返回一个int型变量.如果SQL语句是Select查询,则仅仅返回查询结果集中第一行第一列,而忽略其他行和列.如果SQL语句不是Sele ...
- 不要错过 DevOps 之父出席的2017 DevOpsDays 北京站!
通过 DevOpsDays 活动,Patrick 将 DevOps 这项伟大的运动带到了地球的东方,带到了北京.同时,他将亲自参加2017年3月18日的 DevOpsDays 北京站,并作精彩演讲. ...
- html5之datalist标签
当我看到这个标签的时候,其实我是很愤怒的.因为我以前实现过这个标签的功能,当时是无比的费劲.什么js库呀,function呀.我靠,统统去屎吧,哥有datalist了.那种感觉就好像自己千辛万苦去追去 ...
- 中兴电信光纤猫F450获取管理员密码方法
初衷:为了完成端口映射,一开始以为电信光猫不支持自定义路由,因为通过useradmin登录进去后没有找到对应的选项.一番了解之后,原来光猫有超级密码,电信装机时是不会告诉你的,电信客服一般也不会告诉你 ...
- PHP不使用递归的无限级分类
不用递归实现无限级分类,简单测试了下性能比递归稍好一点点点,但写得太复杂了,还是递归简单方便点 代码: <?php $list = array( array('id'=>1, 'pid'= ...
- CodeForces 711D Directed Roads
计数,模拟. 首先观察一下给出的图的特点: $1.$一定存在环. $2.$可能存在多个环. 我们对每个环计算方案数,假设环$C$上包含$x$条边,那么把环$C$破坏掉的方案数有${2^x} - 2$种 ...