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

---

 

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