js修炼——手写全屏滚动插件

全屏滚动是目前网站开发常用的效果，笔者也曾使用过类似插件，但是对此类插件的开发一直抱有强烈兴趣，而今在前人的经验指导下，终于领悟到了一些插件开发的思维。

如下效果：

接下来看PageSwitch.js代码

(function($){
	//浏览器兼容性处理
    var _prefix=(function(temp){
    	var aPrefix=["webkit","Moz","o","ms"],
    	    props="";
    	for(var i in aPrefix){
    		props=aPrefix[i]+"Transition";
    		if(temp.style[props]!=undefined){
    			return "-"+aPrefix[i].toLowerCase()+"-";
    		}
    	}
    	return false;
    })(document.createElement(PageSwitch));
	
	/*
	 * 闭包的运用，对外只暴露一个变量PageSwitch
	 */
	var PageSwitch=(function(){
		//PageSwitch构造函数
	     function PageSwitch(element,options){
	     	this.settings=$.extend(true,$.fn.PageSwitch.defaults,options||{});
	     	this.element=element;
	     	this.init();
	     }
	     //构造函数原型上挂载实例方法
	     PageSwitch.prototype={
	     	//初始化
	     	init:function(){
	     		var me=this;
	     		me.selectors=me.settings.selectors;
	     		me.sections=me.element.find(me.selectors.sections);
	     		me.section=me.sections.find(me.selectors.section);
	     		me.pagesCount=me.pagesCount();
	     		me.index=me.settings.index;
	     	    //页面布局初始化
	     	    this._initPaging();
	     	    //事件初始化
	     		this._initEvent();
	     		
	     	},
	     	//返回滚动页数
	     	pagesCount:function(){
	     		return this.section.length;
	     	},
	     	//向上滚动，改变对象的index属性值，每滚动一次属性值自减一
	     	prev:function(){
	     		var me=this;
	     		if(me.index>0){
	     			me.index--;
	     		}
	     		//调用滚动方法，该方法根据index值确定滚动大小
	     		me._scrollPage();
	     	},
	     	//向下滚动，改变对象的index属性值，每滚动一次属性值自加一
	     	next:function(){
	     		var me=this;
	     		if(me.index<me.pagesCount){
	     			me.index++;
	     		}
	     		me._scrollPage();
	     	},
	     	_initPaging:function(){
	     		var me=this,
	     		    pagesClass=me.selectors.pages.substring(1);
	     		me.activeClass=me.selectors.active.substring(1);
	     		var pageHtml="<ul class="+pagesClass+">";
	     		for(var i=0;i<me.pagesCount;i++){
	     			pageHtml+="<li></li>";
	     		}
	     		pageHtml+="</ul>";
	     		me.element.append(pageHtml);
	     		var pages=me.element.find(me.selectors.pages);
	     	    me.pageItem=pages.find("li");
	     	    //页面初始化时，给第一个li添加active类名
	     		me.pageItem.eq(me.index).addClass(me.activeClass);
	     		
	     	},
	     	_initEvent:function(){
	     		var me=this;
	     		//绑定点击事件，这里使用事件委托的形式，减少资源消耗
	     		me.element.on("click",me.selectors.pages+" li",function(){
	     			me.index=$(this).index();
	     			me._scrollPage();
	     			
	     		});
	     		//绑定滚轮事件，同上
	     		me.element.on("mousewheel DOMMouseSroll",function(e){
	     			var delta=e.originalEvent.wheelDelta||-e.originalEvent.detail;
	     			//console.log(delta);
	     			if(delta>0){
	     				me.prev();
	     			}
	     			if(delta<0){
	     				me.next();
	     			}
	     		})
	     	},
	     	_scrollPage:function(){
	     		var me=this,
	     		    dest=me.section.eq(me.index).position();
	     	    if(!dest)return;
	     	    if(_prefix){
	     	    //	console.log("nihao")
	     	    	me.sections.css(_prefix+"transition","all "+me.settings.duration+"ms "+me.settings.easing);
	     	    	var translate="translateY(-"+dest.top+"px)";
	     	    	me.sections.css(_prefix+"transform",translate);
	     	    }else{
	     	    	var animateCss={top:-dest.top};
	     	    	me.sections.animate(animateCss,me.settings.duration);
	     	    }
	        	me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
	     	    
	     	}

	     }
	     return PageSwitch;//返回构造函数，赋给外面接受的PageSwitch
	})();
	$.fn.PageSwitch=function(options){
		//单例模式创建实例对象
	    return this.each(function(){
	    	var me=$(this),
	    	    instance=me.data("PageSwitch");
	    	if(!instance){
	    		instance=new PageSwitch(me,options);
	    		me.data("PageSwitch",instance);
	    	}
	    	
	    })
	}
	$.fn.PageSwitch.defaults={
		selectors:{
			sections:".sections",
			section:".section",
			pages:".pages",
			active:".active"
			
		},
		index:0,
		easing:"ease",
		duration:1000
	}
})(jQuery);

总结一下：

1.本插件多次运用闭包，减少全局变量的外露，避免污染全局

2.采用构造方法却不用再HTML代码中实例化，只需建立jQuery对象调用挂载在jQuery原型上的PageSwitch方法，该PageSwitch方法利用单利模式返回唯一一个PageSwitch实例对象

3.在原型对象的运用上比较灵活，PageSwitch构造方法的原型上挂载了事件方法，$.fn上挂载了PageSwitch实例对象和默认参数

4.在兼容性处理上也单独写了_prefix

最后，挂上HTML代码，供大家调试使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pageSwitch.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			
			#container,
			.sections,
			.section {
				height: 100%;
				position: relative;
			}
			
			.section {
				background-color: #000;
				background-size: cover;
				background-position: 50% 50%;
				text-align: center;
				color: white;
			}
			
			#section0 {
				background: url(img/1.jpg);
			}
			
			#section1 {
				background: url(img/2.jpg);
			}
			
			#section2 {
				background: url(img/3.jpg);
			}
			
			#section3 {
				background: url(img/4.jpg);
			}
		
			.pages {
				position: fixed;
				right: 10px;
				top: 50%;
				list-style: none;
			}
			.pages li {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: #fff;
				margin: 10px 5px;
				cursor: pointer;
			}
			.pages li.active {
				width: 14px;
				height: 14px;
				border: 2px solid #FFFE00;
				background: none;
				margin-left: 0;
			}
			
			
		</style>
	</head>

	<body>
		<div id="container">
			<div class="sections">
				<div class="section" id="section0">
					<h3>this is the page0</h3>
				</div>
				<div class="section" id="section1">
					<h3>this is the page1</h3>
				</div>
				<div class="section" id="section2">
					<h3>this is the page2</h3>
				</div>
				<div class="section" id="section3">
					<h3>this is the page3</h3>
				</div>

			</div>
		</div>

		<script type="text/javascript">
			$("#container").PageSwitch();
		</script>
	</body>

</html>

本插件只是实现了竖屏滚动，也没有实现键盘事件，还具有很大的扩展空间