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;
})
这里有三个实现功能的模块，还有一个主模块，是调用他们的。