js模塊化開發
1、什麼是模塊化？css
模塊化是指解決一個複雜的問題時自頂向下把系統劃分紅若干模塊的過程，有多種屬性，分別反映其內部特性。html
2、爲何要模塊化（模塊化的好處）？jquery
1.更好地分離bootstrap
若是要加載多個就得就得放置多個script標籤，若是是加載模塊的話，如seaJS，就只需加載一個sea.js便可，這樣對於HTML和JavaScript分離頗有好處。閉包
2.更好的代碼組織方式框架
若是單個文件愈來愈大，維護起來問題出問題的概率也會愈來愈大，一我的開發還好，若是是多人開發，不一樣的代碼風格，超多的業務邏輯混雜在一塊兒，不要說維護了，光想一想就蛋疼。模塊化的開發，一個文件就是一個模塊，控制了文件的粒度，每一個模塊能夠專一於一個功能，在多人開發時，各自管好本身的模塊就行。異步
3.按需加載模塊化
仍是以單個文件來講，當文件大到必定程度，性能問題也隨之而來。合併文件是能減小請求，性能也會有所提高，可是當文件大到必定的體積時，此時的下載時間可能並不會比多個小文件的下載時間短，此時就須要權衡請求數和文件體積的關係了。函數
4.避免命名衝突性能
JavaScript自己是沒有命名空間的，爲了不命名衝突，常常會使用對象或閉包的辦法來避免。用對象僅僅是下降了衝突的機率而已，那常用的jQuery開發來講，不管是往$上擴張仍是在$.fn上擴展，開發的人多了不免會起衝突。或者用自定義對象，搞個好幾層，不光是寫起來難記，這樣的調用也會在性能上打折扣的。模塊化就能很好的解決這個問題，在該模塊內的任何形式的命名都不會再和其餘模塊有衝突。
5.更好的依賴處理
傳統的開發模式，若是B文件要依賴A文件，那麼必須在B文件前面用script標籤先加載好A文件。若是有一天，B文件再也不須要依賴A文件，或者須要增長依賴文件C，那麼又得在B文件前面用script標籤加載C文件。若是這個B文件被N個頁面在調用，並且頁面還跨業務站點，那麼改起來簡直就是噩夢。若是是使用模塊化，只須要在模塊內部申明好依賴的就行，增長刪除都直接修改模塊便可，在調用的時候也不用管該模塊依賴了哪些其餘模塊。
3、模塊化規範
1.commonJS：通用的模塊規範（同步）；
2.AMD：異步模塊定義規範（預加載）；
3.CMD：通用模塊定義規範（延遲加載）。
4、模塊化框架
1.requireJS（支持AMD規範的模塊化框架）
實例：
**主頁面：**
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>requireJS測試</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<script src="./js/require.js" data-main="./js/main"></script>
</head>
<body>
<h1>首頁</h1>
<div>
<input type="button" value="顯示全部"/>
<input type="button" value="增長"/>
<input type="button" value="修改"/>
<input type="button" value="刪除"/>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。
**編寫主配置文件：**
//主入口配置
require.config({
paths:{
student:"./student",
jquery:"./jquery-1.9.1.min",
bootsrap:"./bootstrap.min"
}
});
//主入口方法(預加載student模塊和jQuery模塊)
require(["student","jquery"],function(stu,$){
console.log($("h1").html());
$("input:button:eq(0)").click(stu.showAll);
$("input:button:eq(1)").click(stu.add);
$("input:button:eq(2)").click(stu.update);
$("input:button:eq(3)").click(stu.del);
});
**編寫student模塊：**
define(["jquery","bootstrap"],function($){
console.log("加載student模塊");
$("#myModal").modal();
function showAll(){
console.log("執行showAll");
}
function add(){
console.log("執行add");
}
function update(){
console.log("執行update");
}
function del(){
console.log("執行del");
}
//暴露student模塊裏的函數
return{
"showAll":showAll,
"add":add,
"update":update,
"del":del
}
});
2.seaJS（支持CMD規範的模塊化框架）
實例：
**主頁面：**
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首頁</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<script src="js/sea.js"></script>
</head>
<body>
<h1>首頁</h1>
<div>
<input type="button" value="顯示全部"/>
<input type="button" value="增長"/>
<input type="button" value="修改"/>
<input type="button" value="刪除"/>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script>
//seaJS配置
seajs.config({
base:"../seaJS",
alias:{
main:"js/main",
student:"js/student",
jquery:"js/jquery-1.9.1.min",
bootstrap:"js/bootstrap.min"
}
});
//加載主模塊
seajs.use("main");
</script>
</html>
**編寫main模塊：**
define(function(require,exports,module){
var stu = require("student");
stu.showAll();
stu.add();
stu.update();
stu.del();
var $ = require("jquery");
$("input:button:eq(0)").click(stu.showAll);
console.log($("h1"));
});
**編寫student模塊：**
define(function(require,exports,module){
console.log("加載student模塊");
var $ = require("jquery");
require("bootstrap")($);
function showAll(){
console.log("執行showAll");
$("#myModal").modal();
}
function add(){
console.log("執行add");
}
function update(){
console.log("執行update");
}
function del(){
console.log("執行del");
}
//暴露student模塊中的函數，方法一
// exports.showAll = showAll;
// exports.add = add;
// exports.update = update;
// exports.del = del;
//暴露student模塊中的函數，方法二
module.exports = {
"showAll":showAll,
"add":add,
"update":update,
"del":del
};
//暴露student模塊中的函數，方法三
// return {
// "showAll":showAll,
// "add":add,
// "update":update,
// "del":del
// }
});
注意：seaJS導入第三方js模塊是須要修改第三方JS的源碼，例如：
seaJS加載jQuery模塊，須要修改jQuery.js原有代碼，修改以下：
define(function(){
jQuery.js原有代碼
return $.noConflict();
});
seaJS加載boostrap模塊，一樣須要修改boostrap.js原有代碼，修改以下：
define(function(){ return function($){ boostrap.js原有代碼 } });
- 1. JS模塊化開發
- 2. js模塊化開發
- 3. JS模塊化開發----require.js
- 4. [JS] JS模塊化開發之RequireJS
- 5. js組件化、模塊化開發
- 6. js模塊化開發——前端模塊化
- 7. JS模塊化開發規範
- 8. JS模塊化開發（三）——seaJs+grunt
- 9. js爲何須要模塊化開發
- 10. js模塊化開發--AMD--CMD
- 更多相關文章...
- • Lua 模塊與包 - Lua 教程
- • DTD - XML 構建模塊 - DTD 教程
- • PHP開發工具
- • 委託模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS模塊化開發
- 2. js模塊化開發
- 3. JS模塊化開發----require.js
- 4. [JS] JS模塊化開發之RequireJS
- 5. js組件化、模塊化開發
- 6. js模塊化開發——前端模塊化
- 7. JS模塊化開發規範
- 8. JS模塊化開發（三）——seaJs+grunt
- 9. js爲何須要模塊化開發
- 10. js模塊化開發--AMD--CMD