初学require.js-javascript模块化编程

前几天在imooc网上学习一个侧边栏开发的课程，在视频课程中发现了require.js和scss的开发，感觉很方便 ，尤其在多人开发的项目中，可以提高效率及减少开发中重命名的错误，所以今天作为一个初学者就学习一下require.js

[b]一、学习目的[/b]

在最早的时候。所的javascript代码都是写在一个文件里面，只加载一个文件就够，但随着项目的扩展会越来越大，就会有多个js文件，这样要依次加载多个文件，这样的写法有很大的缺点：首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越久，其次，js文件之间存在依赖关系，因此必须保证加载顺序。当依赖关系很复杂的时候，代码的编写和维护就会变的困难。

require.js的出现就可以解决以上的两个问题,

１、实现js文件的异步加载，避免网页的响应时间太长

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

二、reqiure.js开始学习－加载

１、使用require.js的第一步，是去官方网站下载最新版本http://www.requirejs.cn/

2、将require.js文件存放到项目目录下，然后引入

<script src="js/require.js"></script>

如果只写这样一句是无法缩短网页的响应时间，我们应习惯性的将js文件放到网页的最底部，第二就是在上段js文件的代码中加上 defer async="true"

<script src="js/require.js" defer async="true"></script>

async属性表明这个文件需要异步加载，避免网页失去响应，但万恶IE不支持这个属性，只支持defer，所以为了兼容要加上defer.加载完require.js以后，要加载require的主模块，就是在这个主模块中定义的其它模块js，下一步就要加载我们自己写的代码了，假定我们自己写的代码文件为main.js，放在了项目js的目录下，

<script src="js/require.js" defer async="true" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块，这个文件会被require.js第一个加载，由于require.js默认主文件名后缀为js，所以可以的.js省去不写。

三、主模块的写法

在上一段的main.js被我们定义为主模块，意思是整个网页的JS入口代码，所有的代码都从这里开始运行，如果我们的主入口文件的js不依赖任何其它模块，我们在main.js里直接写js代码，回想一下如果这样就没有必要使用require.js了，真正在我们多人开发项目中，主模块会依赖其它模块，这里我们就要使用AMD规范定义的require函数了。

main.js

语法为：

//main.js
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
//write code here
})

在这里解释一下require函数的使用，require()接收两个参数，第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA','moduleB','moduleC'],即主模块依赖这三个模块，第二个参数是一个回调函数，当前指定的模块都加载成功后，它将被调用。加载的模块会以参数的形式传入到函数中，从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB,moduleC,浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载完成后，才会运行也解决了依赖的问题。

下面以实际例子进行，

假如主模块依赖jquery,那么main.js就要这样写

require(['jquery'],function($){
$('body').css('backgroud-color','red');
})

require.js会加载jquery，然后再运行回调函数，主模块代码写在回调函数中

四、模块的加载

上面的main.js实例中，主模块依赖于jquery, 默认情况下，require.js假如这个模块与main.js在同一目录下，文件名分别为jquery.js, 然后自动加载，

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

require.config({

paths:{
"jquery":"jquery",
"validate":"validate",
}
})

上面的代码给出了二个模块的文件名，路径默认与main.js在同一目录下，如果这些模块不其它目录下，比如js/validate/目录，则写法就要改变，会产生两种写法，

1、逐一指定路径

require.config({
paths:{
"jquery":"jquery.min",//此文件与main.js在同一目录
"validate":"validate/validate",
}

})

2、另一种是直接改变目录（baseUrl）

require.config({

baseUrl :"js/validate",
paths:{
"jquery":"jquery.min",
"validate":"validate",
}

})

如果模块在另一台服务器主机上，也可以直接指定url网址，如

require.config({

paths :{
"jquery":"https//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
}
});

require.js要求每一个模块是一个单独的js文件，这样的话如果多个模块，就会发起多次HTTP请求，还是会影响网页的加载速度，因此require.js提供一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，可以减少http请求，优化模块地址：http://www.requirejs.cn/docs/optimization.html

五、AMD（异步加载响应）模块的写法

require.js加载的模块，是采用的AMD模块规范，也就是说模块必须按照AMD的规定来写，模块必须采用特定的defin()函数来定义，如果一个模块不依赖其它模块，那就直接定义在defind()函数之中

假定现在有一个validate.js 它定义了一个validate模块，那么validate.js就要这样写

//validate.js

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

在主入口文件里加载方法如下：

//main.js

require(['validate'],function(validate){
console.log( validate.add(1,3));

})

如果validate.js模块还依赖其它模块，那么define()函数的第一个参数，必须是一个数组，指明依赖模块名称，如

//validate.js

define(['jquery'],function($){
return{
ajaxpost =function(){
var url = $("#elm").prop('href');
$.post(...)
}
}

})

当require()函数加载上面这个模块，就会先加载jquery.min.js文件。

六、加载非规范性模块

从理论上来讲，require.js加载的模块，必须是按照AMD规范，用define()函数定义模块，但是实际上，虽然已经有一部分流行的函数库比如jquery符合AMD规范，但是也一些不符合，但是require还是可以加载非规范模块的

这样的模块在用require()加载之前，要先用require.config()方法，来定义他们的一些特征，就要用到config()函数中的shim属性，config()函数除了有paths属性外，还有一个shim属性

如，

require.config({

shim :{
'math':{
exports :'_'
},
'validate':{
deps:['math','jquery'],
exports :'validate'
}

}

});

require.config()接受了一个配置对象，这里用到的是shim，专门用来配置不兼容的模块，每个模块要定义

⑴、exports值：输出的变量名，表明这个模块名部调用时的名称；

⑵、deps数组，表明该模块的依赖性，都依赖了那些模块。

比如：jquery的插件可以这样定义：

reqiure.config({

shim :{

'jquery.scroll':{
deps:['jquery'],
exports:'jQuery.fn.scroll'
}

}

})

七、require.js插件

require.js还提供了一系列插件，实现一些特定功能

domready插件，可以让回调函数在页面DOM结构加载完成后在运行

require(['domready!'],function(doc){

//DOM加载完以后运行的代码段

})

text和image插件，则是允许require.js加载文本和图片文件。

define(['text!review.txt','image!cat.jpg'],function(review,cat){

console.log(review);
document.body.appendChild(cat)

})

类似的插件还有json和mdown,用于加载json文件和markdown文件。