当前位置：Gxlcms > JavaScript > require、backbone等重构手机图片查看器

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

时间：2021-07-01 10:21:17 帮助过：14人阅读

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

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

新手机图片查看器

网页部分

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

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <title>webapp图片查看器</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  7. <script src="http://cdn.file1.goodid.com/static/js/require.min.js" data-main="/static/js/pic/main"></script>
  8. </head>
  9. <body>
  10. <section class="index">
  11.  <h1>手机网页图片查看器</h1>
  12.  <figure class="download">
  13.   <a>其它文件</a>
  14.   <a url="http://static.bootcss.com/www/assets/img/opencdn.png">图片a</a>
  15.   <a url="http://static.bootcss.com/www/assets/img/buttons.png">图片b</a>
  16.   <a>其它文件</a>
  17.   <a>其它文件</a>
  18.   <a url="http://static.bootcss.com/www/assets/img/gruntjs.png">图片c</a>
  19.   <a url="http://static.bootcss.com/www/assets/img/lesscss.png">图片d</a>
  20.   <a>其它文件</a>
  21.  </figure>
  22. </section>
  23. </body>
  24. </html>

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

模版引擎部分

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

  1. <script id="dialog_tmpl" type="text/template">
  2. <section></section>
  3. <figure id="swipe"><ul></ul></figure>
  4. <footer>
  5.  <span id="l">左旋</span>
  6.  <span id="r">右旋</span>
  7.  <span id="pos" index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span>
  8. </footer>
  9. </script>
  10. <script id="pos_tmpl" type="text/template">
  11. <span id="pos" index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span>
  12. </script>
  13. <script id="item_tmpl" type="text/template">
  14. <img src="<%=src %>" width="<%=width %>" height="<%=height %>" url="<%=url %>" />
  15. </script>

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

程序开发部分

主函数main.js

  1. require.config({
  2.  paths : {
  3.   jquery  : 'http://cdn.file1.goodid.com/static/js/zepto.min',
  4.   fastclick : 'http://cdn.file1.goodid.com/static/js/fastclick.min',
  5.   underscore : 'http://cdn.file1.goodid.com/static/js/underscore.min',
  6.   backbone : 'http://cdn.file1.goodid.com/static/js/backbone.min',
  7.   swipe  : 'http://cdn.file1.goodid.com/static/js/swipe.min'
  8.  },
  9.  shim : {
  10.   jquery : {
  11.    exports : '$'
  12.   },
  13.   fastclick : {
  14.    deps : ['jquery']
  15.   }
  16.  }
  17. });
  18. require(['underscore', 'backbone', 'fastclick'], function (){
  19.  FastClick.attach(document.body);
  20.  require(['./view/global'], function(Global){
  21.   var global = new Global;
  22.  });
  23. });

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

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

全局控制视图global.js

  1. define(['model/pic', 'collection/set', 'view/imager'], function (Pic, Set, Imager){
  2.  var set = new Set;
  3.  // 全局控制视图
  4.  var global = Backbone.View.extend({
  5.   el : 'body',
  6.   data : $('.download [url]'),
  7.   events : {
  8.    'click .download [url]' : 'open'
  9.   },
  10.   open : function (model){
  11.    var url = $(model.target).attr('url');
  12.    var index = this.data.index($(model.target));
  13.    var length = this.data.length;
  14.    var total = new Pic.total({
  15.     index : index + 1,
  16.     length : length
  17.    });
  18.    var dialog = new Imager.dialog({
  19.     model : total
  20.    });
  21.    $(this.el).prepend(dialog.render().el); // 绘制图片查看器
  22.    this.collect();
  23.    this.list();
  24.    this.swipe(index);
  25.    this.loading(url, index);
  26.   },
  27.   collect : function (){
  28.    if(set.length > 0) return false;
  29.    this.data.each(function(){
  30.     var name = $(this).text();
  31.     var url = $(this).attr('url');
  32.     var item = new Pic.item({
  33.      name : name,
  34.      url : url
  35.     });
  36.     set.add(item); // 添加模型
  37.    });
  38.   },
  39.   list : function (){
  40.    var obj = $('#swipe ul');
  41.    set.each(function(model){
  42.     var list = new Imager.list({
  43.      model : model
  44.     });
  45.     obj.append(list.render().el); // 绘制图片列表
  46.    });
  47.   },
  48.   swipe : function (index){
  49.    require(['swipe'], function(){
  50.     var swipe = new Imager.swipe;
  51.     swipe.render(index).el; // 绘制图片滑动特效
  52.    });
  53.   },
  54.   loading : function (url, index){
  55.    var item = new Pic.item({
  56.     url : url
  57.    });
  58.    var loading = new Imager.loading({
  59.     model : item,
  60.     el : $('#swipe li').eq(index).find('img')
  61.    });
  62.    loading.render(); // 绘制图片加载
  63.   }
  64.  });
  65.  return global;
  66. });

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

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

 渲染视图imager.js

  1. define(['model/pic'], function (Pic){
  2.  var imager = Object;
  3.  // 图片查看器视图
  4.  imager.dialog = Backbone.View.extend({
  5.   initialize : function (){
  6.    _.bindAll(this, 'render');
  7.   },
  8.   tagName : 'section',
  9.   className : 'dialog',
  10.   template : _.template($('#dialog_tmpl').html()),
  11.   events : {
  12.    'click #l, #r' : 'turn'
  13.   },
  14.   render : function (){
  15.    $(this.el).html(this.template(this.model.toJSON()));
  16.    return this;
  17.   },
  18.   turn : function(model){
  19.    var index = parseInt($('#pos').attr('index')) - 1;
  20.    var obj = $('#swipe li').eq(index).find('img');
  21.    var deg = parseInt(obj.attr('deg') ? obj.attr('deg') : 0);
  22.    var type = model.target.id;
  23.    if(type && type == 'l') deg -= 90;
  24.    else if(type && type == 'r') deg += 90;
  25.    if(deg > 360) deg -= 360;
  26.    else if(deg < -360) deg += 360;
  27.    obj.css({'-webkit-transform':'rotate(' + deg + 'deg)'}).attr({'deg':deg});
  28.   }
  29.  });
  30.  // 图片列表视图
  31.  imager.list = Backbone.View.extend({
  32.   initialize : function (){
  33.    _.bindAll(this, 'render');
  34.   },
  35.   tagName : 'li',
  36.   template : _.template($('#item_tmpl').html()),
  37.   events : {
  38.    'click img' : 'close'
  39.   },
  40.   render : function (){
  41.    $(this.el).html(this.template(this.model.toJSON()));
  42.    return this;
  43.   },
  44.   close : function (){
  45.    $('.dialog').remove();
  46.   }
  47.  });
  48.  // 图片滑动定位视图
  49.  imager.fix = Backbone.View.extend({
  50.   initialize : function (){
  51.    _.bindAll(this, 'render');
  52.   },
  53.   el : '#pos',
  54.   template : _.template($('#pos_tmpl').html()),
  55.   render : function (){
  56.    $(this.el).replaceWith(this.template(this.model.toJSON()));
  57.    $('#swipe [deg]').removeAttr('deg').removeAttr('style');
  58.    return this;
  59.   }
  60.  });
  61.  // 图片加载视图
  62.  imager.loading = Backbone.View.extend({
  63.   initialize : function (){
  64.    _.bindAll(this, 'render');
  65.   },
  66.   template : _.template('<img src="<%=url %>" />'),
  67.   render : function (){
  68.    var obj = $(this.el);
  69.    var html = this.template(this.model.toJSON());
  70.    var img = new Image();
  71.    img.src = this.model.attributes.url;
  72.    img.onload = function(){
  73.     obj.replaceWith(html);
  74.    };
  75.    return this;
  76.   }
  77.  });
  78.  // 图片滑动特效视图
  79.  imager.swipe = Backbone.View.extend({
  80.   initialize : function (){
  81.    _.bindAll(this, 'render');
  82.   },
  83.   render : function (index){
  84.    var obj = document.getElementById('swipe');
  85.    window.mySwipe = Swipe(obj, {
  86.     startSlide : index,
  87.     continuous : false,
  88.     disableScroll : true,
  89.     callback  : function(index, element){
  90.      var length = $('#pos').attr('length');
  91.      var total = new Pic.total({
  92.       index : index + 1,
  93.       length : length
  94.      });
  95.      var fix = new imager.fix({
  96.       model : total
  97.      });
  98.      fix.render(); // 绘制图片滑动定位
  99.      var url = $(element).find('img').attr('url');
  100.      if(!url || url.length == 0) return false;
  101.      var item = new Pic.item({
  102.       url : url
  103.      });
  104.      var loading = new imager.loading({
  105.       model : item,
  106.       el : $(element).find('img')
  107.      });
  108.      loading.render(); // 绘制图片加载
  109.     }
  110.    });
  111.    return this;
  112.   }
  113.  });
  114.  return imager;
  115. });
  116.

数据模型pic.js

  1. define(function (){
  2.  var pic = Object;
  3.  // 图片数据统计模型
  4.  pic.total = Backbone.Model.extend({
  5.   defaults : {
  6.    index : 1,
  7.    length : 1
  8.   }
  9.  });
  10.  // 图片数据模型
  11.  pic.item = Backbone.Model.extend({
  12.   defaults : {
  13.    name : '图片加载中...',
  14.    src : 'http://cdn.file1.goodid.com/static/images/loading.gif',
  15.    url : '',
  16.    width : 40,
  17.    height : 40
  18.   }
  19.  });
  20.  return pic;
  21. });
  22.

数据集合set.js

  1. define(['model/pic'], function (Pic){
  2.  // 图片数据集合
  3.  var set = Backbone.Collection.extend({
  4.   model : Pic.item
  5.  });
  6.  return set;
  7. });
  8.

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！