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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
jquery css实现流程进度条
Mar 26 jQuery
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
使用数据库保存session的方法
2006/10/09 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP插入排序实现代码
2013/04/04 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python打包多类型文件的操作方法
2020/09/21 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
业绩考核岗位职责
2014/02/01 职场文书
生日庆典策划方案
2014/06/02 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL