JS模块化开发：使用SeaJs高效构建页面

define({a:"这里是属性a的值"});

1 seajs.use(‘./m1.js‘,function(ex){
2      alert(ex.a);
3  }); //弹出“这里是属性a的值”

1 define({a:"这里是属性a的值"});

1 define(function(require,exports,module){
2     var var1 = "这是要alert出来的值";//私有变量，没有通过接口返出去的其他模块不能访问
3     var var2 = require(‘./m1.js‘).a;//这里就是m2.js模块调用m1.js的方式：var2的值等于当前模块所依赖的m1.js对外接口中属性a的值
4     function alerts(){
5         alert(var2);
6     }
7     exports.alerts = alerts;//将需要公开的方法存入exports接口中
8 });

 1 //入口模块
 2 define(function(require,exports,module){
 3     var $id = function(_id){return document.getElementById(_id);}
 4     var oInput = $id("button1");
 5     var div1 = $id("div1");
 6     var div2 = $id("div2");
 7     var div3 = $id("div3");//以上是获取页面元素的几只变量
 8     require(‘./drag.js‘).drag(div3);//引入拖拽模块，执行拖拽模块接口中的drag方法并传参
 9     exports.oInput = oInput;
10     oInput.onclick = function(){
11         div1.style.display = "block";
12         require(‘./scale.js‘).scale(div1,div2);//引入缩放模块，执行缩放模块接口中的scale方法并传参
13     }
14 });

 1 //拖拽模块
 2 define(function(require,exports,module){
 3     //这个方法就是实现拖拽的方法，不用详述了吧？
 4     function drag(obj){
 5         var disX = 0;
 6         var disY = 0;
 7         obj.onmousedown = function(e){
 8             var e = e || window.event;
 9             disX = e.clientX - obj.offsetLeft;
10             disY = e.clientY - obj.offsetTop;
11             document.onmousemove = function(e){
12                 var e = e || window.event;
13                 var l = require(‘./range.js‘).range(e.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth,0);
14                 var t = require(‘./range.js‘).range(e.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight,0);
15                 obj.style.left = l + "px";
16                 obj.style.top = t + "px";
17             }
18             document.onmouseup = function(){
19                 document.onmousemove = null;
20                 document.onmouseup = null;
21             }
22         }
23     }
24     exports.drag = drag;//返回拖拽模块中想要被公开的对象，也就是在本模块中定义的drag方法。注意有参数~
25 });

 1 //缩放模块
 2 define(function(require,exports,module){
 3     //这个方法就是obj2控制obj1改变大小的方法，也不再详述啦~
 4     function scale(obj1,obj2){
 5         var disX = 0;
 6         var disY = 0;
 7         var disW = 0;
 8         var disH = 0;
 9         obj2.onmousedown = function(e){
10             var e = e || window.event;
11             disX = e.clientX;
12             disY = e.clientY;
13             disW = obj1.offsetWidth;
14             disH = obj1.offsetHeight;
15             document.onmousemove = function(e){
16                 var e = e || window.event;
17                 var w = require(‘./range.js‘).range(e.clientX - disX + disW,500,100);//看这里看这里，引入了限定范围的range.js模块~
18                 var h = require(‘./range.js‘).range(e.clientY - disY + disH,500,100);
19                 obj1.style.width = w + "px";
20                 obj1.style.height = h + "px";
21             }
22             document.onmouseup = function(){
23                 document.onmousemove = null;
24                 document.onmouseup = null;
25             }
26         }
27     }
28     exports.scale = scale;//将需要公开的对象存入模块接口中，以便其他模块调用~
29 });

 1 //限定拖拽的范围模块
 2 define(function(require,exports,module){
 3     function range(inum,imax,imin){
 4         if(inum > imax){
 5             return imax;
 6         }else if(inum < imin){
 7             return imin;
 8         }else{
 9             return inum;
10         }
11     }
12     exports.range = range;
13 });