入门级seajs

 13年在部门做了一个简单的分享seajs,温故一下。

js模块化

我们看一下问题

1,当你的网站开发越来越复杂的时候,会经常遇到这些问题吗?

  比如说冲突,比如说性能,比如说依赖

这些问题用模块化开发都可以解决。

那么我们先看一下这些问题怎么产生的。

多人开发。

如:问题1,A:写的js,common.js

有:

function tab(){}

function drag(){}

function tips(){}

使用的时候页面引用common.js

1,B在页面中也写了function tab(){}

这时候页面中的tab()就会覆盖common.js里面的tab();产生冲突

2,B如果引入一个写好的插件,和你的common.js的tab()有冲突,为了不把插件改的比较乱,让A来改common.js就更加杯具了。

我们为了降低冲突,可以加命名空间,但是这时又不能无法避免冲突.,因为有太多工程师,可能有两个人同时用同一个命名空间。并且名称使用的时候还需要特别长。

问题2,新的页面只需要tab(),那么引入common.js(里面有10几个方法)浪费很多资源

那么我们可以把每个方法拆分一下,如 tab.js,drag.js,tips.js

按需要来引入js

那么要引入多个,如果说没有这么多js没有相互依赖的话还可以,如果有依赖的问题,,顺序不能改变

有依赖关系的话,

问题3,

你写的test.js直接 test()用

你的同事

拿到test.js,直接用很高兴。//出问题了,

然后去看看文件发现要依赖另个js,

你忘记这个需要依赖a.js

那么在调用a.js

//没有问题了

过一段时段如果说产品经理又要加不同的需求,可能还要依赖另一个文件,依赖b.js

则每个页面都要加个b.js

过一段时间这个时候产品经理又要砍掉一些功能。

没有用的js就要拿到。所以要去掉a.js,,

去掉后出问题了

检查代码发现test2.js依赖a.js。。所以又要加上a.js。

因为有依赖的问题,加上产品经理的需求的改动让我们大多的时间都在调试改BUG。那么

加班就在所难免

这个时候我们就要想到用模块化来管理我们的代码

js模块化

一个适合web端的模块加载器

解决刚才出现的问题,提升代码的可维护性

模块的概念:

是做什么的呢,也就是解决这些问题的

分享的是一个现成的库。先看看他是怎么来使用的。

为什么我们要来选择seajs呢,还有很多其他的模块化库的。

1,他是中文的,学习起来方便。

2,适合中国国情,并且他有很多网站已经在使用了。

概念,为了提高性能我们把一个方法放到一个js文件里面,然后按需的加载

这些文件,比如说把common.js拆分一下,但是拆分以后不用模块化库的话,

会出现一种依赖的问题,

那么我们用模块化来解决这些问题。

3,seajs如何解决?如何使用

㈠引入seajs库,

㈡如何变成模块?define

㈢如果调用模块?exports,seajs.use

㈣如何依赖模块?require

模块化的角色更像后勤,我们要开发的组件就是将军,模块化只是会多人开发服务的。

4,深入学习seajs

㈠define   

㈡require//异步

㈢seajs.use//写入多个模块,

㈣seajs.config    alias,preload,debug

 //改根目录,

插件,把不是模块化的文件改成模块化的文件

构建工具,可以利用构建压缩打包合并等

http://seajs.org/docs/#docs

下面是个简单的例子

test.html

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="dist/sea.js"></script>
	<script>
	//seajs.use()页面去调用模块,第一个参数:模块的地址,
	//第二个参数是地址加载成功后的回调函数。
	//回调的参数,相当于就是模块中的exports
		seajs.use("./js/test1.js",function(ex){//还可以写多个模块
			//alert(1);
			ex.tab();//很好的避免了命名冲突
		});
		tab();//B同事
		function tab(){
			alert(456);
		}
		//seajs的默认根目录
	</script>
	<body>
		
	</body>
</html>

test1.js 

//A同事
define(function(require,exports,module){
//规定好的三个参数不能变,尽量不要修改,或者赋值。
	//exports : 对外的接口
	//require : 依赖的接口

	//require("./test2.js");//test依赖于test2文件...
	//如果地址是一个模块的花,那么require返回值就是模块中的exports
	
	function tab(){
		//alert(123);
		alert(require("./test2.js").a);//依赖test2
	}
	exports.tab = tab;
});

test2.js

//var a = 10;
define(function(require,exports,module){

	var a = 1000;
	exports.a = a;

});

下面我们用一个例子来说明seajs的使用。webqq的一些功能:

ABC代表技术开发人员,加一个产品经理:

<html>
	<head>
		<meta charset="utf-8" />
		<title>webqq</title>
		<style>
	#div1{width:200px; height:200px; background: red; position: relative; display: none;}
	#div2{width:30px; height: 30px; background: yellow; position: absolute; right: 0; bottom: 0; }
	#div3{ width: 100px; height: 100px; background: red; position: absolute; right: 0; top:0; cursor:pointer;}
		</style>
		<script type="text/javascript" src="dist/sea.js"></script>
		<script>
//A
	seajs.use("./js/main.js");
		</script>
	</head>
	<body>
		<input type="button" value="点击" id="input1" />
		<div id="div1">
			<div id="div2"></div>
		</div>
		<div id="div3"></div>
	</body>
</html>

 main.js

//A
define(function(require,exports,module){

	var oInput = document.getElementById("input1");
	var oDiv1 = document.getElementById("div1");
	var oDiv2 = document.getElementById("div2");
	var oDiv3 = document.getElementById("div3");

	require("./drag.js").drag(oDiv3);
	
	oInput.onclick = function(){
		oDiv1.style.display = "block";
		
		require("./scale.js").scale(oDiv1,oDiv2);//同步的,全部加载好

	//require.async("./scale.js",function(ex){
	//	ex.scale(Div1,oDiv2);
	//});//异步,不用等待
	};

});

drag.js

//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("./range.js").range(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth,0);
				//var T = require("./range.js").range(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;
			};
		};
	}

	exports.drag = drag;
	
});

scale.js

//C  拖拽改变层大小
define(function(require,exports,module){

	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("./range.js").range(ev.clientX - disX + disW, 500, 50);
				//var H = require("./range.js").range(ev.clientY - disY + disH ,500, 50);

				//obj1.style.width = W + "px";
				//obj1.style.height = H +"px";

				obj1.style.width = ev.clientX - disX + disW + 'px';
				obj1.style.height = ev.clientY - disY + disH + 'px';

			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};

		};

	}
	
	exports.scale = scale;
});

range.js

//产品经理新加需求,只能拖拽在可视区B做
define(function(require,exports,module){

	function range(iNum,iMax,iMin){
		if(iNum>iMax){
			return iMax;
		}
		else if(iNum<iMin){
			return iMin;
		}
		else{
			return iNum;
		}
	}
	exports.range = range;
});

OK这个就是一个简单的seajs模块化开发。。。

相关推荐