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() 下面我们来看一下定义方法 ...
随机推荐
- 关于props和state以及redux中的state
React的数据模型分为共有数据和私有数据,共有数据可以在组件间进行传递,私有数据为当前组件私有.共有数据在React中使用props对象来调用,它包含标签所有的属性名称和属性值,props对象有三个 ...
- [开发者账号] ios7苹果开发者账号申请
1.登陆 https://developer.apple.com/ 2.点击网站最底部的 3.点击 4.然后根据提示继续点击 注意:1.点击的过程中注意个人和企业账号 开发者类型等 2.付款账号的 ...
- BST 二叉搜索树
定义: 二叉查找树要么是一棵空树,要么是一棵具有如下性质的非空二叉树: 1.若左子树非空,则左子树上的所有结点的关键字值均小于根结点的关键字值. 2.若右子树非空,则右子树上的所有 ...
- XAF-列表视图数据访问模式
本主题介绍有关列表视图如何提供数据访问的几种方式.请注意,选择正确的方式对于实现XAF应用程序的最佳性能至关重要. 数据访问模式概述 在模型编辑器中,通过 视图-> <ListV ...
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...
- android浏览器 源码共享
浏览器源码共享 [天天浏览器]拥有极为精简的内核,手机App大小在2MB以内,是市场上极省用户手机内存,极少占用手机资源,速度极快的浏览器,本身功能完整强大,是极速上网必备的利器. 源代码下载地址:h ...
- Nginx stream(TCP/UDP)负载均衡
Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...
- Leaving Auction
Leaving Auction 题目链接:http://codeforces.com/contest/749/problem/D 二分 本来以为是哪种神奇的数据结构,没想到sort+lower_bon ...
- crontab 定时的陷阱
crontab 任务不执行,首先要查询一下cron任务的宿主和语法: (1). /etc/cron.d/cron_zengtai 这个文件必须是 root:root 否则cron_zengta ...
- 分离JavaScript
分离JavaScript类似于使用style属性,在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法.如果我们用一个"挂钩",就像CSS机制中的 ...