require、backbone等重构手机图片查看器


Posted in Javascript onNovember 17, 2016

本文是对之前的部分补充,也是对最近学习require、backbone的一次实例化的实践,希望对正在学习理解中的同学们有帮助

前文请前往:制作手机使用的网页图片查看器

新手机图片查看器

网页部分

require引入是重点,指明了主函数所在文件路径

<!doctype html>
<html lang="zh-cn">
<head>
<title>webapp图片查看器</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script src="http://cdn.file1.goodid.com/static/js/require.min.js" data-main="/static/js/pic/main"></script>
</head>
<body>
<section class="index">
 <h1>手机网页图片查看器</h1>
 <figure class="download">
  <a>其它文件</a>
  <a url="http://static.bootcss.com/www/assets/img/opencdn.png">图片a</a>
  <a url="http://static.bootcss.com/www/assets/img/buttons.png">图片b</a>
  <a>其它文件</a>
  <a>其它文件</a>
  <a url="http://static.bootcss.com/www/assets/img/gruntjs.png">图片c</a>
  <a url="http://static.bootcss.com/www/assets/img/lesscss.png">图片d</a>
  <a>其它文件</a>
 </figure>
</section>
</body>
</html>

require.js加载完成后即加载main.js;样式部分就不占篇幅了,后面自己看完整网页 

模版引擎部分

第一个是对话框、第二个是当前位置、第三个是当前展示图片

<script id="dialog_tmpl" type="text/template">
<section></section>
<figure id="swipe"><ul></ul></figure>
<footer>
 <span id="l">左旋</span>
 <span id="r">右旋</span>
 <span id="pos" index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span>
</footer>
</script>

<script id="pos_tmpl" type="text/template">
<span id="pos" index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span>
</script>

<script id="item_tmpl" type="text/template">
<img src="<%=src %>" width="<%=width %>" height="<%=height %>" url="<%=url %>" />
</script>

3个模版需要写入HTML文件内 

程序开发部分

主函数main.js

require.config({
 paths : {
  jquery  : 'http://cdn.file1.goodid.com/static/js/zepto.min',
  fastclick : 'http://cdn.file1.goodid.com/static/js/fastclick.min',
  underscore : 'http://cdn.file1.goodid.com/static/js/underscore.min',
  backbone : 'http://cdn.file1.goodid.com/static/js/backbone.min',
  swipe  : 'http://cdn.file1.goodid.com/static/js/swipe.min'
 },
 shim : {
  jquery : {
   exports : '$'
  },
  fastclick : {
   deps : ['jquery']
  }
 }
});

require(['underscore', 'backbone', 'fastclick'], function (){
 FastClick.attach(document.body);
 require(['./view/global'], function(Global){
  var global = new Global;
 });
});

paths定义了各模块路径;shim中重新解析了jquery模块,fastclick(一款帮助提高触摸体验的微型插件)指明依赖模块jquery

require首先依次加载underscore、backbone、jquery、fastclick模块,然后再加载全局控制视图global模块并实例化 

全局控制视图global.js

define(['model/pic', 'collection/set', 'view/imager'], function (Pic, Set, Imager){
 var set = new Set;

 // 全局控制视图
 var global = Backbone.View.extend({
  el : 'body',
  data : $('.download [url]'),
  events : {
   'click .download [url]' : 'open'
  },
  open : function (model){
   var url = $(model.target).attr('url');
   var index = this.data.index($(model.target));
   var length = this.data.length;
   var total = new Pic.total({
    index : index + 1,
    length : length
   });
   var dialog = new Imager.dialog({
    model : total
   });
   $(this.el).prepend(dialog.render().el); // 绘制图片查看器

   this.collect();
   this.list();
   this.swipe(index);
   this.loading(url, index);
  },
  collect : function (){
   if(set.length > 0) return false;

   this.data.each(function(){
    var name = $(this).text();
    var url = $(this).attr('url');
    var item = new Pic.item({
     name : name,
     url : url
    });
    set.add(item); // 添加模型
   });
  },
  list : function (){
   var obj = $('#swipe ul');
   set.each(function(model){
    var list = new Imager.list({
     model : model
    });
    obj.append(list.render().el); // 绘制图片列表
   });
  },
  swipe : function (index){
   require(['swipe'], function(){
    var swipe = new Imager.swipe;
    swipe.render(index).el; // 绘制图片滑动特效
   });
  },
  loading : function (url, index){
   var item = new Pic.item({
    url : url
   });
   var loading = new Imager.loading({
    model : item,
    el : $('#swipe li').eq(index).find('img')
   });
   loading.render(); // 绘制图片加载
  }
 });

 return global;
});

依次加载它依赖的数据模型pic模块、数据集合set模块、渲染视图imager模块并实例化了一个集合模块

全局控制视图中我们定义了:绘制图片查看器的open方法、添加模型的collect方法、绘制图片列表的list方法、绘制图片滑动特效的swipe方法、绘制图片加载的loading方法

 渲染视图imager.js

define(['model/pic'], function (Pic){
 var imager = Object;

 // 图片查看器视图
 imager.dialog = Backbone.View.extend({
  initialize : function (){
   _.bindAll(this, 'render');
  },
  tagName : 'section',
  className : 'dialog',
  template : _.template($('#dialog_tmpl').html()),
  events : {
   'click #l, #r' : 'turn'
  },
  render : function (){
   $(this.el).html(this.template(this.model.toJSON()));
   return this;
  },
  turn : function(model){
   var index = parseInt($('#pos').attr('index')) - 1;
   var obj = $('#swipe li').eq(index).find('img');
   var deg = parseInt(obj.attr('deg') ? obj.attr('deg') : 0);
   var type = model.target.id;
   if(type && type == 'l') deg -= 90;
   else if(type && type == 'r') deg += 90;
   if(deg > 360) deg -= 360;
   else if(deg < -360) deg += 360;
   obj.css({'-webkit-transform':'rotate(' + deg + 'deg)'}).attr({'deg':deg});
  }
 });

 // 图片列表视图
 imager.list = Backbone.View.extend({
  initialize : function (){
   _.bindAll(this, 'render');
  },
  tagName : 'li',
  template : _.template($('#item_tmpl').html()),
  events : {
   'click img' : 'close'
  },
  render : function (){
   $(this.el).html(this.template(this.model.toJSON()));
   return this;
  },
  close : function (){
   $('.dialog').remove();
  }
 });

 // 图片滑动定位视图
 imager.fix = Backbone.View.extend({
  initialize : function (){
   _.bindAll(this, 'render');
  },
  el : '#pos',
  template : _.template($('#pos_tmpl').html()),
  render : function (){
   $(this.el).replaceWith(this.template(this.model.toJSON()));
   $('#swipe [deg]').removeAttr('deg').removeAttr('style');
   return this;
  }
 });

 // 图片加载视图
 imager.loading = Backbone.View.extend({
  initialize : function (){
   _.bindAll(this, 'render');
  },
  template : _.template('<img src="<%=url %>" />'),
  render : function (){
   var obj = $(this.el);
   var html = this.template(this.model.toJSON());
   var img = new Image();
   img.src = this.model.attributes.url;
   img.onload = function(){
    obj.replaceWith(html);
   };
   return this;
  }
 });

 // 图片滑动特效视图
 imager.swipe = Backbone.View.extend({
  initialize : function (){
   _.bindAll(this, 'render');
  },
  render : function (index){
   var obj = document.getElementById('swipe');
   window.mySwipe = Swipe(obj, {
    startSlide : index,
    continuous : false,
    disableScroll : true,
    callback  : function(index, element){
     var length = $('#pos').attr('length');
     var total = new Pic.total({
      index : index + 1,
      length : length
     });
     var fix = new imager.fix({
      model : total
     });
     fix.render(); // 绘制图片滑动定位

     var url = $(element).find('img').attr('url');
     if(!url || url.length == 0) return false;

     var item = new Pic.item({
      url : url
     });
     var loading = new imager.loading({
      model : item,
      el : $(element).find('img')
     });
     loading.render(); // 绘制图片加载
    }
   });
   return this;
  }
 });

 return imager;
});

数据模型pic.js

define(function (){
 var pic = Object;

 // 图片数据统计模型
 pic.total = Backbone.Model.extend({
  defaults : {
   index : 1,
   length : 1
  }
 });

 // 图片数据模型
 pic.item = Backbone.Model.extend({
  defaults : {
   name : '图片加载中...',
   src : 'http://cdn.file1.goodid.com/static/images/loading.gif',
   url : '',
   width : 40,
   height : 40
  }
 });

 return pic;
});

数据集合set.js

define(['model/pic'], function (Pic){
 // 图片数据集合
 var set = Backbone.Collection.extend({
  model : Pic.item
 });

 return set;
});

模块定义让程序更加清晰了,模块加载让文件加载执行在我们的掌控之中;MVC模式(C还没用上)让数据逻辑层等分离更加顺手减少了代码混乱。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 #Javascript
移动端js图片查看器
Nov 17 #Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 #Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 #Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 #Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
详解Python中的Cookie模块使用
2015/07/06 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python如何安装第三方模块
2020/05/28 Python
python实现学生成绩测评系统
2020/06/22 Python
python 下载文件的多种方法汇总
2020/11/17 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
天游软件面试
2013/11/23 面试题
大学生自荐书范文
2013/12/10 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
建筑安全责任书范本
2014/07/24 职场文书
新郎婚礼答谢词
2015/01/04 职场文书