现在的位置: 首页 > 综合 > 正文

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

2014年01月23日 ⁄ 综合 ⁄ 共 6652字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞