好了,经过A小伙伴儿不屑的努力,终于可以拖拽,还有实现改变层大小了。seaJs的好处就是自己开发自己,互相不影响,也不用考虑命名冲突,随便起自己想起的名字就行。就在这时候,产品经理说,还是要改一下需求吧。拖拽不限制范围不太好,还是限制一下范围吧。
这时候,A小伙伴儿和C小伙伴儿都不用管啥,B小伙伴儿一个人就可以搞定了。这个需求只需要改下drag.js就可以了。
依赖限制范围模块的拖拽drag2.js的javascript代码
//B小伙伴儿开发的拖拽 define(function (require, exports, module) { function drag (obj) { var disX = 0; var disY = 0; obj.onmousedown = function (ev) { var ev = ev || window.event; disX = ev.clientX - obj.offsetLeft; disY = ev.clientY - obj.offsetTop; document.onmousemove = function (ev) { var ev = ev || window.event; var L = require("./rang.js").rang(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth, 0); var T = require("./rang.js").rang(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight, 0); obj.style.left = L + "px"; obj.style.top = T + "px"; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } return false } } exports.drag = drag; })
依赖限制范围模块rang.js的javascript代码
//某一前辈开发的限制范围模块 define(function (require, exports, module) { /* iNum 当前的值 iNumMax 最大值 iNumMin 最小值 */ function rang (iNum, iNumMax, iNumMin) { if (iNum > iNumMax) { return iNumMax; }else if (iNum < iNumMin) { return iNumMin; }else { return iNum; } } exports.rang = rang; })
A小伙伴儿的main4.js的javascript代码
//A小伙伴儿开发的模块 define(function (require, exports, module) { var oInp = document.getElementById("inp1"); var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var oDiv3 = document.getElementById("div3"); //A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js require("./drag2.js").drag(oDiv3); //A小伙伴儿开发的弹层 oInp.onclick = function () { oDiv1.style.display = "block"; //调取C小伙伴儿的拖拽改变层大小模块 require("./scale.js").scale(oDiv1, oDiv2); } })
限制范围的拖拽的HTML代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙小站</title> <style type="text/css"> #div1 {width:200px;height:200px;background:red;position:absolute;display:none;} #div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;} #div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;} </style> <!-- 引入seaJs --> <script type="text/javascript" src="sea/sea.js"></script> <!-- 引入主程序 --> <script type="text/javascript"> seajs.use("./js/main4.js") </script> </head> <body> <input type="button" value="点击" id="inp1" /> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> </body> </html>
限制范围的拖拽预览地址
http://www.leemagnum.com/seaJs/i/ex/d.html
我们刷新之后,便发现范围已经限制住了。那 这个需求改完之后,发现只需要B小伙伴儿进行修改就可以了。不需要A和C小伙伴儿基本上不用操作任何东西,也不用关心会不会冲突,会不会依赖了。接下来,产品说了,要把改变层大小也限制一下范围。这个需求就由C小伙伴儿来完成了。
限制范围模块的拖拽改变层大小scale2.js的javascript代码
//C小伙伴儿开发的拖拽改变层大小 define(function (require, exports, module) { /* obj1 大div obj2 小div */ function scale (obj1, obj2) { var disX = 0; var disY = 0; var disW = 0; var disH = 0; obj2.onmousedown =function (ev) { var ev = ev || window.event; disX = ev.clientX; disY = ev.clientY; disW = obj1.offsetWidth; disH = obj1.offsetHeight; document.onmousemove = function (ev) { var ev = ev || window.event; var W = require("./rang.js").rang(ev.clientX - disX + disW, 500, 100); var H = require("./rang.js").rang(ev.clientY - disY + disH, 500, 100); obj1.style.width = W + "px"; obj1.style.height = H + "px"; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } return false } } exports.scale = scale; })
A小伙伴儿的main5.js的javascript代码
//A小伙伴儿开发的模块 define(function (require, exports, module) { var oInp = document.getElementById("inp1"); var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var oDiv3 = document.getElementById("div3"); //A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js require("./drag2.js").drag(oDiv3); //A小伙伴儿开发的弹层 oInp.onclick = function () { oDiv1.style.display = "block"; //调取C小伙伴儿的拖拽改变层大小模块 require("./scale2.js").scale(oDiv1, oDiv2); } })
限制范围模块的拖拽改变层大小的HTML代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙小站</title> <style type="text/css"> #div1 {width:200px;height:200px;background:red;position:absolute;display:none;} #div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;} #div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;} </style> <!-- 引入seaJs --> <script type="text/javascript" src="sea/sea.js"></script> <!-- 引入主程序 --> <script type="text/javascript"> seajs.use("./js/main5.js") </script> </head> <body> <input type="button" value="点击" id="inp1" /> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> </body> </html>
限制范围模块的拖拽改变层大小预览地址
http://www.leemagnum.com/seaJs/i/ex/e.html
刷新之后不难看出,层的拖拽范围被限定到了最大值500,最小值100了。这个绿色的也是限制范围的拖拽了。好,产品过几个月说把拖拽的限制范围取消了,感觉没必要对拖拽限制范围。这时候只需要B小伙伴儿进行操作就可以了。只需要把之前的依赖rang去掉就可以了。再去掉之前,先问大家个问题,rang在drag2.js中加载了至少一次,那么会不会真加载很多次呢?其实不会,seaJs在这里做了处理,多次依赖同一个js,在上面的网址打开网络刷新即可看到,只需要加载一次,在性能上也做了优化。
取消限制范围的拖拽drag3.js的javascript代码
//B小伙伴儿开发的拖拽 define(function (require, exports, module) { function drag (obj) { var disX = 0; var disY = 0; obj.onmousedown = function (ev) { var ev = ev || window.event; disX = ev.clientX - obj.offsetLeft; disY = ev.clientY - obj.offsetTop; document.onmousemove = function (ev) { var ev = ev || window.event; /* 限制范围的拖拽 var L = require("./rang.js").rang(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth, 0); var T = require("./rang.js").rang(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight, 0); */ var L = ev.clientX - disX; var T = ev.clientY - disY; obj.style.left = L + "px"; obj.style.top = T + "px"; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } return false } } exports.drag = drag; })
A小伙伴儿的main6.js的javascript代码
//A小伙伴儿开发的模块 define(function (require, exports, module) { var oInp = document.getElementById("inp1"); var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var oDiv3 = document.getElementById("div3"); //A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js require("./drag3.js").drag(oDiv3); //A小伙伴儿开发的弹层 oInp.onclick = function () { oDiv1.style.display = "block"; //调取C小伙伴儿的拖拽改变层大小模块 require("./scale2.js").scale(oDiv1, oDiv2); } })
取消限制范围的拖拽的HTML代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙小站</title> <style type="text/css"> #div1 {width:200px;height:200px;background:red;position:absolute;display:none;} #div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;} #div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;} </style> <!-- 引入seaJs --> <script type="text/javascript" src="sea/sea.js"></script> <!-- 引入主程序 --> <script type="text/javascript"> seajs.use("./js/main6.js") </script> </head> <body> <input type="button" value="点击" id="inp1" /> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> </body> </html>
取消限制范围的拖拽预览地址
http://www.leemagnum.com/seaJs/i/ex/f.html
刷新不难看出,不管怎么变,互相之间没有太大的冲突,也不会因为依赖而出现问题,这就是javascript模块化的好处。seaJs学习笔记之seaJs实现webQQ部分功能就为大家介绍到这里,有了seaJs可以让开发变得容易。更多有关seaJs的相关知识敬请关注梦龙小站有关seaJs的更新。