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

网络编程 2024/11/19 佚名

3 1 2

本文是对之前的部分补充，也是对最近学习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="/UploadFiles/2021-04-02/require.min.js">

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="/UploadFiles/2021-04-02/<%=src %>">

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') "<%=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还没用上）让数据逻辑层等分离更加顺手减少了代码混乱。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

require,backbone,手机图片查看器

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“require、backbone等重构手机图片查看器”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

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

整理一下常见的IE错误

基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

评论“require、backbone等重构手机图片查看器”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接