JS工厂模式开发实践案例分析

本文实例讲述了JS工厂模式开发。分享给大家供大家参考，具体如下：基于JS工厂模式的H5应

本文实例讲述了JS工厂模式开发。分享给大家供大家参考，具体如下：

基于JS工厂模式的H5应用，实现了轮播图功能与滑屏功能，并且实现了文字大小的自适应功能，基于SASS样式开发。

核心的JS代码如下：

index.js

define(function(){
 var self = null,
 start = null,
 move = null,
 end = null,
 handle = null,
 timer = null,
 left = 0,
 x = 0,
 startX = 0,
 baseWidth = window.screen.width, // 移动设备屏幕的宽度
 baseSize = baseWidth * 0.2, // 滑动切换阈值
 banner = document.getElementById("banner"), // 获取Banner
 center = document.getElementById("center"), // 获取center
 ulList = document.getElementsByTagName("ul"),
 incBanner = document.getElementById('incBanner'),
 incCenter = document.getElementById('incCenter');
 var app = {
 init : function(){
 self = this;
 start = self.touchStart;
 move = self.touchMove;
 end = self.touchEnd;
 handle = self.addHandler;
 self.pageInit();
 self.bindTouch(banner, start, move, end);
 self.bindTouch(center, start, move, end);
 self.shiftBanner(banner);
 },
 pageInit : function(){
 for (var i=0; i < ulList.length; i++) {
 ulList[i].style.left = 0 + 'px';
 ulList[i].style.width = 3 * baseWidth + 'px';
 }
 },
 bindTouch : function(elem, handler1, handler2, handler3){
 handle(elem, "touchstart", handler1);
 handle(elem, "touchmove", handler2);
 handle(elem, "touchend", handler3);
 },
 touchStart : function(event){
 var touch = event.touches[0];
 left = parseInt(this.style.left);
 x = 0;
 startX = 0;
 startX = touch.pageX; //刚触摸时的坐标
 if(this == banner){
 timer = clearInterval(timer);
 }
 },
 touchMove : function(event){ //滑动过程
 var touch = event.touches[0]; 
 x = startX - touch.pageX; //滑动的距离 
 this.style.left = left - x + 'px'; 
 },
 touchEnd : function(event){ //手指离开屏幕
 self.move(this);
 self.moveAdjust(this);
 self.indicate(this);
 if(this == banner){
 self.shiftBanner(banner);
 }
 },
 move : function(elem){
 var leftTmp = left; //缓存touchMove结束时的滑动位置
 elem.style.left = left;
 if (x > baseSize) {
 elem.style.left = left - baseWidth + 'px';
 } else if (x < -baseSize) {
 elem.style.left = left + baseWidth + 'px';
 } else {
 elem.style.left = leftTmp + 'px';
 }
 },
 moveAdjust : function(elem){
 left = parseInt(elem.style.left)
 if (left < -baseWidth * 2) {
 left = -baseWidth * 2;
 elem.style.left = left + 'px';
 }
 if (left > 0) {
 left = 0;
 elem.style.left = left + 'px';
 }
 x = 0; 
 },
 indicate : function(elem){
 if (elem == banner) {
 self.activeClass(incBanner);
 }else if (elem == center) {
 self.activeClass(incCenter);
 }
 },
 activeClass : function(elem){
 var len = elem.children.length;
 for (var i = 0; i < len; i++) {
 elem.children[i].className=" ";
 }
 if (left == 0) {
 elem.children[0].className = "active";
 } else if (left == (-baseWidth)) {
 elem.children[1].className = "active";
 }else if (left == (-2*baseWidth)) {
 elem.children[2].className = "active";
 }
 },
 shiftBanner : function(elem){
 var t = new Date();
 var tmpLeft = parseInt(elem.style.left);
 timer = setInterval(function(){
 if ((tmpLeft == 0) || (tmpLeft == -baseWidth)) {
 elem.style.left = tmpLeft - baseWidth + 'px';
 } else if (tmpLeft == -2*baseWidth) {
 elem.style.left = 0 + 'px';
 }
 tmpLeft = parseInt(elem.style.left);
 left = tmpLeft;
 // console.log(elem.style.left);
 // console.log(t);
 self.indicate(banner);
 },4000);
 },
 addHandler : function(element, type, handler){
 if (element.addEventListener) {
 element.addEventListener(type, handler, true);
 } else if (element.attachEvent) {
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 }
 };
 return {
 init : function(){
 app.init();
 }
 };
});
 

可以在浏览器中打开： https://iove1123.github.io/policy

项目源码见GitHub：https://github.com/iove1123/policy