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