require.js的AMD规范详解

require.js使用简介

在web刚开始发展的蛮荒时代,一个页面中只需要加载一个或少量的js文件,不存在模块,也不存在冲突之类的问题,但随着web项目的发展,它越来越大,js文件动辄几十个,怎么加载就成为了一个问题,要为浏览器的性能考虑,还有各个js文件(模块)的依赖关系。require.js的出现就是为了解决这样的问题。

1、实现js文件的异步加载,避免网页失去响应。

2、管理模块之间的依赖性,便于代码的编写和维护。

require.js加载

使用require.js的第一步,是先去官方网站下载最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。

<script type="text/javascript" src="require.js"></script>

加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:

<script type="text/javascript" src="require.js" data-main="main.js"></script>

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

主模块(main.js)的写法

所有代码都从这儿开始运行。下面就来看,怎么写main.js。如果我们的代码不依赖任何其他模块,那么可以直接写入javascript代码。

// main.js
require([‘moduleA‘, ‘moduleB‘, ‘moduleC‘], function (moduleA, moduleB, moduleC){
    // some code here
});

requier()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,就像上面例子中的[‘moduleA’, ‘moduleB’, ‘moduleC’];第二个参数是一个回调函数,当前面模块加载成功,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用依赖模块的方法了。
require()异步加载mouduleA,mouduleB,mouduleC,浏览器都不会失去响应,它指定的回调函数只有在模块加载完成后才会运行,解决了依赖性的问题。

下面上一个实际一点的例子
假设主模块依赖jquery,和backbone这两个模块,main.js就应该这么写。

1 require(["jquery","backbone"],function($,backbone)
2 {
3     //code
4 })

require会先加载jquery和backbone,然后在运行回调函数,回调函数中的参数是该函数使用依赖模块的假名。

模块加载

在上面的例子汇总,主模块依赖模块是jquery和backbone默认的情况下,require.js嘉定这两个模块与main.js在同一个目录,文件名分别为jquery.js和backbone.js,然后你自动加载。

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块的头部,参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

require.config(
    {
        path:{
            "jquery":"jquert.min",
            "backbone":"backbone.min"
        }
        })

如果其他模块与主函数不在一个路径下,这些模块在js/assest目录,则会有两种写法,一种是逐一指定路径。

require.config({
    path:{
        "jquery":"assest/jquery.min",
        "backbone":"assest/backbone.min"
    }
    })

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

require.config({
    baseUrl:"js/assest",
    path:{
        "jquery":"jquert.min",
         "backbone":"backbone.min"
    }
    })

如果使用的cdn服务

require.config(
 {
     path:{
         "jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
     }
     })  

AMD模块的写法

require.js加载的模块,采用AMD规范。所以自己写的模块必须按照AMD的规定来写。
模块在熟悉的时候必须采用特定的define()函数来定义。
假设现在有一个math.js文件,它是一个math模块,那么math.js就应该如下这么写。

//math.js

define(functio()
    {
        var add = function (x,y)
        {
            return x+y;
        };
        return{
            add:add
        }
})  

使用该模块的方式

require(["math"],funciton(math)
{
    consolo.log(math.add(2,3))
    })

如果这个模块还依赖其他模块。

define(["myLib"],function(myLib)
{
    function foo(){
    myLib.do();
}
return{
    foo:foo
}
})

require()函数加载上面这个模块的时候就会先加在myLib.js文件。

加载非AMD规范的模块

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

require.config({
    shim:{
        ‘underscore‘:{
            exports:"_"
        },
        backbone:{
            deps:["underscore","jquery"],
            exports:"Backbone"

            }
        }
    }
    })

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

比如,jQuery的插件可以这样定义:

require.config({
    shim:{
        Jquery.scroll:{
            deps:["jquery"],
            exports: ‘jQuery.fn.scroll‘
        }
    }
    })
时间: 2024-12-29 11:14:21

require.js的AMD规范详解的相关文章

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");

使用JS截取字符串函数详解

使用JS截取字符串函数详解 JS截取字符串函数:一.函数:split();二.函数:John();三.函 数:indexOf();四.其他几种方 法:stringObject.substring(start,stop);stringObject.substr(start [, length ])... 一.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); /

WebGL/Three.js深度学习课程详解

课程介绍:适用于对WebGL.Three.js等3D技术感兴趣,却不知道如何入门的同学, 课程带领大家深入理解WebGL的原理. 课程目录:├─01-基础部分│      01-WebGL与three.js的基础.与opengl的关系.mp4│      02-编写第一个three.js程序.mp4│      03-three.js程序框架,绘制一条直线.mp4│      04-三维世界的组成(点.线).mp4│      05-坐标系的秘密(世界坐标.本地坐标).mp4│      06-

Javascript的AMD模块化规范详解

本文和大家分享的主要是Javascript中的AMD模块化规范相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 现今通行的模块化规范有三种AMD.CMD和Commonjs(AMD和CMD是Commonjs衍生出来的模块化,Commonjs应该也是CMD) 服务器环境(CommonJs) 2009年,当nodejs被美国程序员Ryan Dah开发出来后,javascript也可以作为服务器端语言,开发服务器功能,但是为了解决服务器端的复杂性,开发Commonjs来使javasc

JavaSript模块化 &amp;&amp; AMD CMD 详解.....

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式.可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在.对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”.(等同于Java 高内聚低耦合思想详情请参见Java编程思想第三版) 还有一些对于模块化一些专业的定义为:模块化是软件

JS的window对象详解

一.说明 他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用"Window.XXX"这种形式,而是直接使用"XXX".一个框架页面也是一个窗口. 二.Window窗口对象有如下属性 1.name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 open() 方法(见下)决定.一般我们不会用

Js apply call方法详解

Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply)

js各事件使用详解

事件详解onblur 事件 发生在窗口失去焦点的时候.应用于:window 对象onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后.捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容.应用于:Password 对象:Select 对象:Text 对象:Textarea 对象onclick 事件 发生在对象被单击的时候.单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程.一个普通按钮对象(Button)通常会有 onclick

Mysql建表与索引使用规范详解

一. MySQL建表,字段需设置为非空,需设置字段默认值. 二. MySQL建表,字段需NULL时,需设置字段默认值,默认值不为NULL. 三. MySQL建表,如果字段等价于外键,应在该字段加索引. 四. MySQL建表,不同表之间的相同属性值的字段,列类型,类型长度,是否非空,是否默认值,需保持一致,否则无法正确使用索引进行关联对比. 五. MySQL使用时,一条SQL语句只能使用一个表的一个索引.所有的字段类型都可以索引,多列索引的属性最多15个. 六. 如果可以在多个索引中进行选择,My