Require.js入門講解(一）
-
test:function(a){ -
console.log(a+"你好！"); -
a.f(); -
info(); -
} -
} -
});
也可通過如下方式定義模組，其中require,均為外部傳入的模組命名物件
-
define(function(require,$){ -
var data={text:""}; -
var obj=new Object({ -
c1:10, -
text: function (str) { -
data.text=str; -
}, -
doEach:function(){ -
alert(data.text); -
}, -
doNext:function(){ -
alert(this.text); -
} -
}); -
//==========num 相當於是匿名函式function()的返回結果================ -
var num=(function(){ -
var m1=function(a,b){ -
return a+b; -
} -
var m2=function(a,b){ -
return a-b; -
} -
//===========返回一個物件====================== -
return {m1:m1,m2:m2}; -
})(); -
//obj.c2=1000; -
var objTmp={c2:1000,showC2:function(){ -
obj.c2=obj.c2+1000; -
alert(obj.c2); -
}}; -
obj=$.extend(obj,objTmp); -
var obj1=(function(mod){ -
mod.showString=function() -
{ -
alert("this is a string"); -
} -
return mod; -
//===========下面的obj相當於是function(mod)的傳入引數===================== -
})(obj); -
return { -
obj:obj, -
num:num, -
data:data -
} -
}(require,$));
四、應用模組
使用require函式載入已定義的模組，示例程式碼如下：
-
//=============命名全域性物件app========================== -
var app; -
//=============匯入jquery模組，命名為物件$============================ -
require(["jquery"],function($){ -
console.log("the jquery load succes!"); -
//=============匯入app目錄下的app模組檔案，將其命名為app1變數=========== -
require(["app/app"],function(app1){ -
function setClickEvent(btnName) -
{ -
app.obj.text(btnName); -
//===========好像在jquery中不能向一般為document 新增元素事件 事件==事件函式的方式增加事件響應，而是事件（事件響應函式）；===切記切記 -
$(btnName).click(app.obj.doEach); -
$(btnName).text(btnName); -
} -
//======回撥函式中的引數app就是建立的模組物件本身======= -
var tmp={ -
sex:"male", -
old:34 -
}; -
//=============賦值全域性物件==================== -
app=$.extend(app1,tmp); -
//=============執行全域性物件方法================== -
app.obj.doEach(); -
//===============增加ready事件相應函式================================= -
$(document).ready(function(){ -
//===============直接應用同一模組中的方法====================== -
setClickEvent("#btn1"); -
setClickEvent("#btn2"); -
setClickEvent("#btn3"); -
}); -
/*require(["app/addEvent"],function(event){ -
console.log("event add"); -
});*/ -
}); -
}); -
require()函式接受兩個引數。第一個引數是一個數組，表示所依賴的模組；第二個引數是一個回撥函式，當前面指定的模組都載入成功後，它才會被呼叫。
五、完整例子
js目錄結構如下：
html檔案：
-
<!DOCTYPE html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
<title>Document</title> -
</head> -
<body> -
<script src="js/require.js" data-main="app.js"></script> -
</body> -
</html>
主模組js：
-
require.config({ -
//By default load any module IDs from js/ -
baseUrl: 'js', -
//except, if the module ID starts with "pb" -
paths: { -
pb: '../pb' -
}, -
shim: { -
'world': { -
deps:['animalWorld'], -
// use the global 'Backbone' as the module name. -
exports: 'world' -
} -
} -
}); -
require(['cat','dog','world'], function (cat,dog,world) { -
world.world(); -
cat.say(); -
dog.say(); -
});
animial.js
-
define([], function() { -
'use strict'; -
function _showName(name){ -
console.log(name); -
} -
return { -
say(words){ -
console.log(words); -
}, -
showName(name){ //練習私有方法 -
_showName(name); -
} -
} -
});
cat.js:
-
define([ -
'animal' -
], function(animal) { -
'use strict'; -
return { -
say(){ -
animal.say("喵喵"); -
animal.showName("貓"); -
} -
} -
});
dog.js
-
define([ -
'animal' -
], function(animal) { -
'use strict'; -
return { -
say(){ -
animal.say("汪汪"); -
animal.showName("狗"); -
} -
} -
});