seajs模块化开发
seajs是一个起辅助作用的库，所以它可以更方便开发，而它可以解决以下问题：
1、命名问题，就是冲突
2、性能问题，就是只要一个功能，但却使用一个大插件中的一个小功能，所以要手动拆分出这个功能
3、js依赖问题，要引入多个js文件，而且顺序也要排好，要手动去调节，要根据需求不断调节这些问题，修改BUG
seajs推荐一个功能就是一个模块，所以一个功能一个js文件。
一般流程都是以下代码：
<script> /*seajs的目录路径要搞清楚，你的文件在哪使用seajs，那个就是根目录*/ /*配置*/ seajs.config({ base:"./", // 开启观察模式，主要看看有没有加载进来 debug:true, /*别名*/ alias:{ "jquery":"js/jquery-3.1.0.min.js", "a":"js/a.js" }, // 预加载 preload:["jquery"] }); // JQ库的引入 seajs.use("jquery"); /*加载*/ seajs.use("./js/main"); </script>
而这是有预加载的流程代码，而seajs是异步加载的方式加载的，所以加载像JQ库，而你的模块又依赖于它，那可能会在第一次执行或多次刷新时会报错，
意思是JQ库没加载进来，这是因为你的模块和JQ库一起加载了，JQ库没有加载完就去实现你的模块功能，所以就报错了，目前的解决方式是手动的写script标签
来同步加载。
以下是不适用预加载的方式：
<script> /*把模块引入seajs.use()*/ // 两个参数，一个是模块地址，第二为回调函数 // 如果没有./，那么目录的地址是相对于sea-debug.js的地址为默认地址,有就以html目录为根目录 // 回调中参数就是exports seajs.use("./main.js",function(ex){ }); </script>
以下是一个例子：
拖拽的例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="sea-debug.js"></script> <style> #div1{ width: 200px; height: 200px; position: absolute; background-color: red; } #div2{ width: 30px; height: 30px; position: absolute; background-color: yellow; right: 0; bottom: 0; } #div3{ width: 100px; height: 100px; background-color: blue; position: absolute; right: 0; top: 0; } </style> </head> <body> <input type="button" id="btn" value="点击"> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> <script> /*把模块引入seajs.use()*/ // 两个参数，一个是模块地址，第二为回调函数 // 如果没有./，那么目录的地址是相对于sea-debug.js的地址为默认地址,有就以html目录为根目录 // 回调中参数就是exports seajs.use("./main.js",function(ex){ }); </script> </body> </html>
/*
定义一个模块
他接受三个参数，这三个参数是不可改变的
*/
define(function(require,exports,module){
// exports是对外的接口
// require依赖的接口
// 如果require的返回值是一个模块，接受的一个模块的接口exports
var btn=document.getElementById("btn");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
require("./drag.js").drag(div3);
require("./scale.js").scale(div1,div2);
})
define(function(require,exports,module){
function drag(obj){
var disX=0;
var disY=0;
obj.onmousedown=function(ev){
ev=ev || window.event;
disX=ev.clientX-obj.offsetLeft;
disY=ev.clientY-obj.offsetTop;
document.onmousemove=function(ev){
ev=ev || window.event;
var X=ev.clientX-disX;
var Y=ev.clientY-disY;
X=require("./range.js").range(X,document.documentElement.clientWidth-obj.offsetWidth,0);
Y=require("./range.js").range(Y,document.documentElement.clientHeight-obj.offsetHeight,0);
obj.style.top=Y+"px";
obj.style.left=X+"px";
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
}
};
exports.drag=drag;
});
define(function(require,exports,module){
function scale(obj1,obj2){
var disX=0;
var disY=0;
var disW=0;
var disH=0;
obj2.onmousedown=function(ev){
ev=ev||window.event;
disX=ev.clientX;
disY=ev.clientY;
disW=obj1.offsetWidth;
disH=obj1.offsetHeight;
document.onmousemove=function(ev){
ev=ev||window.event;
var x=ev.clientX-disX;
var y=ev.clientY-disY;
var w=require("./range.js").range(x+disW,500,obj2.offsetWidth);
var h=require("./range.js").range(y+disH,500,obj2.offsetWidth);
obj1.style.width=w+"px";
obj1.style.height=h+"px";
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
}
}
exports.scale=scale;
})
define(function(require,exports,module){ function range(iNum,iMax,iMin){ if(iNum>=iMax){ return iMax; } if(iNum<=iMin){ return iMin; } return iNum; } exports.range=range; })
这里有三个实现功能的模块，还有一个主模块，是调用他们的。
