JS中工厂模式的示例分析

这篇文章主要介绍了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

感谢你能够认真阅读完这篇文章，希望小编分享的“JS中工厂模式的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!