require.js的用法 - 阮一峰的網(wǎng)絡(luò)日志
現(xiàn)在官網(wǎng)上下載require.js,
1 . 在body底部加載<script src="js/require.js" defer sync="true"></script>
2 . 在加載頁(yè)面的入口js<script src="js/main.js" data-main= "js/main"></script>
3 . main.js的寫法，如果main.js不依賴其他模塊，直接在main.js文件里寫代碼；
4 . 如果main.js依賴其他模塊，在main.js的頂部，require( [' jquery '] , function($){
} ?) ?； jquery.js函數(shù)需在和main.js相同的目錄文件下
require接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)數(shù)組，是該模塊依賴的模塊，第二個(gè)參數(shù)是回調(diào)函數(shù)，當(dāng)依賴的模塊加載完成后，以參數(shù)的形式參入回調(diào)函數(shù)中，供該模塊使用
6 . ?require引入模塊的用法：
????????6.1 ? ?直接（ jquery.js | underscore.js | backbone.js ?和main.js在同一個(gè)目錄文件下 ?）
????????require( ?[ ' jquery' , 'underscore' , ' backbone ' ?] ?, function( $ , _ , Backbone ? ) ?{
? ? ? ? ? ? //some code
????????})
?????????6.2 ? ? 在模塊的頂部配置require的配置項(xiàng)來(lái)指定依賴模塊的位置： paths屬性指定各個(gè)依賴模塊的路徑 （和main.js在項(xiàng)目的目錄下）
? ? ? ? ? ? ? ? require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "jquery.min",
????????????????????????????????????"underscore": "underscore.min",
????????????????????????????????????"backbone": "backbone.min"
????????}
????????});
? ? （和main.js在不同的目錄下 ?js/lis） ?不用加.js
?????????????????require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "lis/jquery.min",
????????????????????????????????????"underscore": "lis/underscore.min",
????????????????????????????????????"backbone": "lis/backbone.min"
????????}
????????});
或是
? ???????????require.config({
? ? ? ? ? ? ? ? ? ? ? ? ? ? baseUrl ?: " js/lis ",
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "jquery.min",
????????????????????????????????????"underscore": "underscore.min",
????????????????????????????????????"backbone": "backbone.min"
????????}
????????});
? ? ? ? 6.3 如果另外的模塊在另外的主機(jī)上，
? ??????????require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
????????});
7 . require.js要求每個(gè)模塊都是獨(dú)立的文件，如果加載的模塊較多，會(huì)發(fā)出多次http請(qǐng)求，影響網(wǎng)頁(yè)速度，因此require.js提供了優(yōu)化工具，當(dāng)模塊部署完畢后，可以用這個(gè)工具將多個(gè)模塊合并在一個(gè)文件中，減少http請(qǐng)求
8.require.js加載的模塊，符合ADM規(guī)范 ，因此模塊需按照ADM標(biāo)準(zhǔn)來(lái)寫 ，模塊必須采用特定的define()函數(shù)來(lái)定義，
? ? 8.1 如果一個(gè)模塊不依賴其他模塊，則直接寫在define（）函數(shù)之中，
? ? ? ? ? ? define(function(){
????????????????????var add = function (x,y){
???????????? return x+y;
? ? ? ? ? ? ? ? ? ? ? ?};
????????????????????????return {
???????????????????????????? add: add
???????????????????? };
????????????});
? ? 8.2 模塊要依賴其他模塊 ，define（）函數(shù)的第一個(gè)參數(shù)必須是一個(gè)數(shù)組，指明該模塊的依賴性 ?，當(dāng)require()函數(shù)加載下面這個(gè)模塊的時(shí)候，就會(huì)先加載myLib.js文件。
????????????define(['myLib'], function(myLib){
????????function foo(){
????????myLib.doSomething();
????????}
????????return {
???????? foo : foo
????????};
????????});
9 . 加載非規(guī)范模塊： （jquery符合AMD規(guī)范） ，加載非規(guī)范模塊時(shí)，要在加載之前要定義它們的特征，
????????????????require.config({
????????????????????????????shim: {
????????????????????????????????'underscore':{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: '_'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
????????????????????????????????'backbone': {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????deps: ['underscore', 'jquery'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: 'Backbone'
????????????????????????????????}
????????????}
????????????});
require.config()接受一個(gè)配置對(duì)象，這個(gè)對(duì)象除了有前面說(shuō)過(guò)的paths屬性之外，還有一個(gè)shim屬性，專門用來(lái)配置不兼容的模塊。具體來(lái)說(shuō)，每個(gè)模塊要定義（1）exports值（輸出的變量名），表明這個(gè)模塊外部調(diào)用時(shí)的名稱；（2）deps數(shù)組，表明該模塊的依賴性。
例如jquery的插件可以這樣定義
????????????require.config({
????????????????????????????shim: {
????????????????????????????????'jquery.scroll': {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????deps: [ 'jquery'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: 'jQuery.fn.scroll'
????????????????????????????????}
????????????}
????????????});
10 . require的其他插件
domready插件，可以讓回調(diào)函數(shù)在頁(yè)面DOM結(jié)構(gòu)加載完成后再運(yùn)行，
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件，則是允許require.js加載文本和圖片文件。
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
