seaJs学习笔记之seaJs实现webQQ部分功能2

　　好了，经过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代码

 

<script type=text/javascript src=sea/sea.js>《script》 <script type=text/javascript>seajs.use(./js/main4.js)《script》
　　限制范围的拖拽预览地址

 

 

　　http://www.leemagnum.com/seaJs/i/ex/d.

 

 

　　我们刷新之后，便发现范围已经限制住了。那 这个需求改完之后，发现只需要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代码

 

<script type=text/javascript src=sea/sea.js>《script》 <script type=text/javascript>seajs.use(./js/main5.js)《script》

 

　　限制范围模块的拖拽改变层大小预览地址

 

　　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代码

 

<script type=text/javascript src=sea/sea.js>《script》 <script type=text/javascript>seajs.use(./js/main6.js)《script》