同样的效果不一样的效率----代码优化

      最近在学习的时候，不同的代码可以实现相同的效果，即便是逻辑一致，经过优化的代吗，不仅可以在代码上闲的简洁，易懂；而且在运行速度上也可以有所提高。所以说不一样的代码实现同样的效果却有着不一样的效率。

     还记得高中数学老师说过一句话：一道题解法不唯一，如果你思考的多，那么你的解答过程就简洁；如果思考的少，那么解答过程就会有些复杂。

      下面是一段最近学习的一段关于在页面中，让窗口固定位置显示的代码：

       首先是一段没有简化，直接根据逻辑来写的代码：

$.fn.mywin=function(position, hidefunc){
	var currentwin=this;
	if(position && position instanceof Object){
		var positionleft=position.left;
		var positiontop=position.top;
		var windowobj=$(window);
		var scrollleft=$(window).scrollLeft();
		var scrolltop=$(window).scrollTop();
		var browserwidth=$(window).width();
		var browserheight=$(window).height();
		var cwinwidth=this.outerWidth(true);
		var cwinheight=this.outerHeight(true);
		var left;
		var top;
		//获得窗口距离左边的位置
		function calLeft(positionleft,scrollleft,browserwidth,cwinwidth){
		if(positionleft && typeof positionleft=="string"){
			if(positionleft=="center"){
				left=scrollleft+(browserwidth-cwinwidth)/2;
			}else if(positionleft=="left"){
				left=scrollleft;
			}else if(positionleft=="right"){
				left=scrollleft+browserwidth-cwinwidth;
			}
		}
		//缓存数据
		currentwin.data("positionleft",positionleft);
		}
		calLeft(positionleft,scrollleft,browserwidth,cwinwidth);
		//确定窗口距离上边的距离
		function callTop(positiontop,scrolltop,browserheight,cwinheight){
		if(positiontop && typeof positiontop=="string"){
			if(positiontop=="center"){
			    top=scrolltop+(browserheight-cwinheight)/2;	
			}else if(positiontop=="top"){
				top=scrolltop;
			}else if(positiontop=="bottom"){
				top=scrolltop+browserheight-cwinheight;
			}
		}	
		//缓存数据
		currentwin.data("positiontop",positiontop);
		}
		callTop(positiontop,scrolltop,browserheight,cwinheight);
		
		
		//滚动条移动函数，获得滚动条左边距和上边距		
		$(window).scroll(function(){			
				var scrollleft=$(window).scrollLeft();
				var scrolltop=$(window).scrollTop();
				var browserwidth=$(window).width();
				var browserheight=$(window).height();
				calLeft(currentwin.data("positiontop"),scrollleft,browserwidth,cwinwidth);
				callTop(currentwin.data("positiontop"),scrolltop,browserheight,cwinheight);	
				currentwin.css("left",left).css("top",top);
				  
		});
		
		//窗体收缩获得截面的长宽高		
		$(window).resize(function(){
			var scrollleft=$(window).scrollLeft();
			var scrolltop=$(window).scrollTop();
			var browserwidth=$(window).width();
			var browserheight=$(window).height();
			calLeft(currentwin.data("positiontop"),scrollleft,browserwidth,cwinwidth);
			callTop(currentwin.data("positiontop"),scrolltop,browserheight,cwinheight);		
			currentwin.css("left",left).css("top",top);
		});
		
		//修改弹出框在界面的位置		
		currentwin.css("left",left).css("top",top);
		
		currentwin.children(".title").children("img").click(function(){
		    if(!hidefunc){
				currentwin.hide("slow");
			}else{
				hidefunc();
			}
	 });
	//返回当前对象，以便于可以级联的执行其他方法
	return this;
		
	}	
}

由以上代码可以看出：

                var scrollleft=$(window).scrollLeft();
		var scrolltop=$(window).scrollTop();
		var browserwidth=$(window).width();
		var browserheight=$(window).height();

                calLeft(positionleft,scrollleft,browserwidth,cwinwidth);
		callTop(positiontop,scrolltop,browserheight,cwinheight);

等代码重复出现，违背了代码的可复用性，只是简单的复制了。所以这段代码需要简化；简化如下：

///封装插件  
$.fn.mywin=function(position, hidefunc,initPos){
	
	if(position && position instanceof Object){
		var positionleft=position.left;
		var positiontop=position.top;
		
		var windowobj=$(window);
		var currentwin=this;
		var cwinwidth=this.outerWidth(true);
		var cwinheight=this.outerHeight(true);
		var left;
		var top;		
		
		var scrollleft;
		var scrolltop;
		var browserwidth;
		var browserheight;
		
		//计算浏览器当前可是区域的宽和高，以及滚动条左上边界
		function getWinDin(){
			 scrollleft=$(window).scrollLeft();
			 scrolltop=$(window).scrollTop();
			 browserwidth=$(window).width();
			 browserheight=$(window).height();
		}
		
	
		//计算窗口真的左边界的值
		function calLeft(positionleft,scrollleft,browserwidth,cwinwidth){
		if(positionleft && typeof positionleft=="string"){
			if(positionleft=="center"){
				left=scrollleft+(browserwidth-cwinwidth)/2;
			}else if(positionleft=="left"){
				left=scrollleft;
			}else if(positionleft=="right"){
				left=scrollleft+browserwidth-cwinwidth;
			}
		}
		//缓存数据
		currentwin.data("positionleft",positionleft);
		}
	
		//计算窗口真实的上边界值
		function callTop(positiontop,scrolltop,browserheight,cwinheight){
		if(positiontop && typeof positiontop=="string"){
			if(positiontop=="center"){
			    top=scrolltop+(browserheight-cwinheight)/2;	
			}else if(positiontop=="top"){
				top=scrolltop;
			}else if(positiontop=="bottom"){
				top=scrolltop+browserheight-cwinheight;
			}
		}	
		//缓存数据
		currentwin.data("positiontop",positiontop);
		}
		//窗体位置改变
		function moveWin(){
		calLeft(positionleft,scrollleft,browserwidth,cwinwidth);
		callTop(positiontop,scrolltop,browserheight,cwinheight);
		currentwin.css("left",left).css("top",top);
				  
			
}
		//浏览器滚动条滚动时，移动窗口的位置
		var scrollTimeout;
		$(window).scroll(function(){	
			clearTimeout(scrollTimeout);
			scrollTimeout=setTimeout(function(){
				getWinDin();
				moveWin();
			 },300);
		});
		//浏览器大小改变时，移动窗口的位置
		$(window).resize(function(){
			getWinDin();
			moveWin();
		});
		
	
		currentwin.children(".title").children("img").click(function(){
		    if(!hidefunc){
				currentwin.hide("slow");
			}else{
				hidefunc();
			}
	 });
		if(initPos && initPos instanceof Object){
			var initleft=initPos.left;
			var inittop=initPos.top;
			if(initleft && typeof initleft =="number"){
				currentwin.css("left",initleft);				
			}else{
				currentwin.css("left",0);
			}
			if(inittop && typeof inittop =="number"){
				currentwin.css("top",inittop);				
			}else{
				currentwin.css("top",0);
			}
			currentwin.show();
		}
		getWinDin();
		moveWin();
		
	//返回当前对象，以便于可以级联的执行其他方法
	return this;
		
	}	
}

可以看到将代码：

                        scrollleft=$(window).scrollLeft();
			 scrolltop=$(window).scrollTop();
			 browserwidth=$(window).width();
			 browserheight=$(window).height();

封装在方法：getWinDin()中，需要时调用即可

其他重复利用的代码页进行封装。

        这段代码的学习让我反思自己，是不是只是简单的符合逻辑要求后，就不在整理代码，而使得代码冗余，不简洁，所以以后的学习中要多思考，才可以实现更简洁，复用性强的代码！