在使用seajs模块化开发之前，直接在页面引用js会容易出现冲突及依赖相关的问题，具体问题如下
问题1：多人开发脚本的时候容易产生冲突（比如全局参数冲突，方法名冲突），可以使用命名空间降低冲突，不能完全避免冲突
// JavaScript Document /*var a = 10; function tab(){} function drag(){} function dialog(){}*/ var miaov = {}; //名字比较长 , 只能降低冲突，不能完全避免 miaov.a = 10; miaov.tab = function(){}; miaov.drag = function(){}; miaov.dialog = function(){};
问题2：依赖问题，js引用的依赖关系，如下代码b.js依赖于a.js，那么b.js不能再a.js之前加载。
传统脚本所依赖的脚本必须全部引用进来
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /*一个页面中: <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> <script src="d.js"></script>*/ show.js : 日历组件 你的同事: <script src="a.js"></script> <script src="show.js"></script> show(); 你的同事: <script src="a.js"></script> <script src="b.js"></script> <script src="show.js"></script> show(); 你的同事: <script src="a.js"></script> <script src="b.js"></script> <script src="show.js"></script> <script src="hide.js"></script> show(); </script> </head> <body> </body> </html>
当网站开发越来越复杂的时候，经常遇到冲突、依赖问题，如何解决以上这些问题，就是我们js模块化所要解决的问题。
JS模块化
如何解决? Seajs库 解决刚才出现的问题，提升代码的可维护性 模块的概念 http://seajs.org Seajs 与 jQuery的区别
query像是冲锋陷阵的士兵（操作DOM操作，用于实际开发），seajs就像是管后勤的（模块开发，不涉及逻辑）
1.使用seajs
seajs如何解决?
①引入sea.js的库
②如何变成模块？
define
③如何调用模块？
exports
seajs.use
④如何依赖模块？
require
// JavaScript Document define(function(require,exports,module){ //sea下的参数 : 不允许修改的 //exports : 对外提供接口的对象 function show(){ alert(1); } exports.show = show; });
// JavaScript Document
define(function(require,exports,module){ //sea下的参数 : 不允许修改的
//require : 模块之间依赖的接口
var a = require('./module3.js').a; //当引入的是sea下面的模块的时候，那么require执行完的结果就是exports
function show(){
alert(a);
}
exports.show = show;
});
// JavaScript Document //var a = 100; define(function(require,exports,module){ //alert( module.exports == exports ); /*require.async('.js/module2.js',function(){ alert('模块加载完的回调'); });*/ var a = 100; module.exports = { a : a }; });
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="sea/sea.js"></script> <script> //两个参数 : 第一个参数 : 模块的地址 第二个参数 : 回调函数(回调函数的参数代表exports) //localhost/seajs+gruntjs/sea/js/module1.js //sea的默认根目录 : sea.js这个文件 seajs.use('./js/module1.js',function(ex){ ex.show(); //1 show(); //2 function show(){ alert(2); } }); seajs.use('./js/module2.js',function(ex){ ex.show(); //3 show(); //4 function show(){ alert(4); } }); </script> </head> <body> </body> </html>