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


Posted in Javascript onOctober 17, 2019

本文实例讲述了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工厂模式开发实践案例分析

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

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 字符串转化成数字的代码
Jun 29 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
JavaScript变量声明详解
Nov 27 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
You might like
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
父母对孩子说的话
2014/04/12 职场文书
布达拉宫导游词
2015/02/02 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Django如何与Ajax交互
2021/04/29 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript