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 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 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
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python字符串,数值计算
2016/10/05 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python实现彩票系统
2020/06/28 Python
python版本单链表实现代码
2018/09/28 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
思想品德自我鉴定
2013/10/12 职场文书
服务员岗位责任制
2014/02/11 职场文书
食品安全承诺书
2014/05/22 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
使用Python获取字典键对应值的方法
2022/04/26 Python