SeaJS模块化开发-实战篇

最新推荐文章于 2024-07-20 15:31:25 发布

jmin_coming

最新推荐文章于 2024-07-20 15:31:25 发布

阅读量489

点赞数

分类专栏：模块化开发文章标签：模块化 seajs

本文链接：https://blog.csdn.net/jian_xi/article/details/54142462

版权

模块化开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在前面基础部分基本讲述了SeaJS开发的背景以及使用方法，下面模拟webQQ多人协作开发进行实战操作。

项目结构：

主要功能实现:弹窗的缩放以及div的拖拽

其中A同事开发main.js模块，B同事开发drag.js(拖拽)模块，C同事开发scale.js(缩放)模块，下面看看seajs是怎么处理他们之间的关系？

html页面中调用接口：

	<body>
		<button type="button" id="btn">弹窗</button>
		<div id="div1">
			<div id="div2"></div>
		</div>
		<div id="div3"></div>
		<script src="sea/sea.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			seajs.use("./js/main.js");
		</script>
	</body>

mian.js:

//A同事开发的main.js模块

define(function(require,exports,module){
	//需要注意的是:参数中的名称不能改变,并且顺序不能发生调换!
	var buttonDom = document.getElementById("btn"),
	div1Dom = document.getElementById("div1"),
	div2Dom = document.getElementById("div2"),
	div3Dom = document.getElementById("div3");
	//调用拖拽方法
	require("./drag.js").drag(div3Dom);
	
	buttonDom.onclick = function(){
		div1Dom.style.display = "block";
		require("./scale.js").scale(div1Dom,div2Dom);
	}
	
});

drag.js:

//B同事开发的拖拽功能
define(function(require,exports,module){
	function drag(obj){
		var disX = 0;
		var disY = 0;
		
		obj.onmousedown = function(e){
			var ev = e || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(e){
				var ev = e || window.event;
				obj.style.left = ev.clientX - disX +"px";
				obj.style.top = ev.clientY - disY +"px";
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}
	}
	exports.drag = drag;
});

scale.js:

//C同事开发改变层大小模块

define(function(requier,exports,module){
	function scale(obj1,obj2){
		var downX = 0,
		downY = 0,
		downW = 0,
		downH = 0;
		
		obj2.onmousedown = function(e){
			var ev = e || window.event;
			downX = ev.clientX;
			downY = ev.clientY;
			downW = obj1.offsetWidth;
			downH = obj1.offsetHeight;
			document.onmousemove = function(e){
				var ev = e || window.event;
				obj1.style.width = ev.clientX - downX + downW + "px";
				obj1.style.height = ev.clientY - downY + downH + "px ";
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}
	}
	exports.scale = scale;
});

仔细看看不管在代码编写方面的方便程度还有处理团队多人合作开发中冲突的问题中，还是在后期维护代码上都有很大的提升，特别是在大的项目中，seajs起到的作用是不可估量的。下面看看seajs是怎么满足产品经理的吧！！！

经理：B同事，现在要求把拖拽加个范围限制吧，你去做一下。

B同事:行，没问题！

这时候B同事直接在自己写的模块里面进行操作、（为了凸显seajs处理模块的能力，把范围限制写在一个独立的模range.js当中）

range.js:

define(function(requier,exports,module){
	function range(val,min,max){
		if(val>max){
			return max;
		}else if(val<min){
			return min;
		}else{
			return val;
		}
	}
	exports.range = range;
});

这时候在drag.js中进行调用模块：

//B同事开发的拖拽功能
define(function(require,exports,module){
	function drag(obj){
		var disX = 0;
		var disY = 0;
		
		obj.onmousedown = function(e){
			var ev = e || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(e){
				var ev = e || window.event;
				//范围限制
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				//最大值
				maxL = document.documentElement.clientWidth - obj.offsetWidth;
				maxT = document.documentElement.clientHeight- obj.offsetHeight;
				//引入模块
				L = require("./range.js").range(L,0,maxL);
				T = require("./range.js").range(T,0,maxT);
				
				obj.style.left =  L+"px";
				obj.style.top =  T+"px";
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}
	}
	exports.drag = drag;
});

这时候就满足了产品需求，假如说客户不需要范围限制了，直接注释模块引用即可。或许经理又说需要给弹窗加上范围限制，这时候只需要C同事加上同样大小限制即可。。。

jmin_coming

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SeaJS模块化开发-实战篇

在前面基础部分基本讲述了SeaJS开发的背景以及使用方法，下面模拟webQQ多人协作开发进行实战操作。项目结构：主要功能实现:弹窗的缩放以及div的拖拽其中A同事开发main.js模块，B同事开发drag.js(拖拽)模块，C同事开发scale.js(缩放)模块，下面看看seajs是怎么处理他们之间的关系？html页面中调用接口：弹窗
复制链接

扫一扫

专栏目录