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. 两行代码实现微信小程序联系人sidebar

    话不多说,先给你们看看核心数据和结构: 一.数据: city的json array,letter的array (city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得c ...

  2. 双色球机选算法java实现

    双色球机选算法java实现 一.代码 package com.hdwang; import java.util.Random; /** * Created by admin on 2017/1/10. ...

  3. crontab 实现定时脚本执行完毕再执行下一次

    0 4 * * 1 flock -xn /tmp/oneSendTemp.lock -c /home/check_a/h_demand.sh > /dev/null 2>&1

  4. openstack trove,使pylint忽略错误

    一.什么是pylint Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了 ...

  5. PRML 第二章mindmap

    PRML第二章的Mindmap,这一章读的比较快,主要是很多计算和证明的过程都跳过了,感觉不是特别需要认真去看每一个公式,能够记住每个小节的结论.公式就可以了.当然有能力.有时间的人还是可以认真读的, ...

  6. Oracle笔记(1) 简单查询、限定查询、数据的排序

    Oracle笔记(四) 简单查询.限定查询.数据的排序   一.简单查询 SQL(Structured Query Language) 结构化查询语言,是一种数据库查询和程序设计语言,用于存取数据以及 ...

  7. 实战ASP.NET访问共享文件夹(含详细操作步骤)

    博客园找找看(http://zzk.cnblogs.com)的索引文件占用空间太大,需要移至另外一台服务器,所以要解决"在ASP.NET中通过共享文件夹访问索引文件"的问题. 假设 ...

  8. python3 验证用户名密码

    输入用户名,密码,匹配通过,不匹配报错 import getpass user = input('input username: ') pwd = getpass.getpass('input pas ...

  9. 关于wkwebview

    一.引入库 #import <WebKit/WebKit.h> 二.初始化有两种方式 // 默认初始化 - (instancetype)initWithFrame:(CGRect)fram ...

  10. NGINX----源码阅读---config配置脚本

    config文件为nginx的配置入口文件. 1. #!/bin/sh # Copyright (C) Igor Sysoev # Copyright (C) Nginx, Inc. LC_ALL=C ...