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

Love The Way You Lie 2022-09-17 15:26 160阅读 0赞

好了，经过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>
    
    <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>
    
    <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>
    
    <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的更新。