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

2024-12-17 16:45:52

本文是对之前的部分补充，也是对最近学习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还没用上）让数据逻辑层等分离更加顺手减少了代码混乱。

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

C#如何实现图片查看器

这篇文章将简单介绍下如何使用C#来实现一个图片查看器的功能的,该工具保存的功能有: 1. 可以通过"上一张" "下一张"这样的按钮来轮换浏览图片 2.实现对图片的旋转 3.实现对旋转后图片的保存功能.本程序不仅提供旋转90/180/270这样的实现,同时提供一个方法来完成旋转任意角度的实现 4.该程序未实现Windows图片查看图片缩放的功能,这部分的功能主要要点是改变图片在PictureBox控件中的高度和宽度就可以的二.实现思路 2.1 图片轮换浏览功能的
Android实现的可以调整透明度的图片查看器实例

本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下: main.xml部分代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
Android仿微信朋友圈图片查看器

再看文章之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个"九宫格"的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下.首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Root,不能录屏,悲催啊,大家见谅,想要看真实效果的话,烦请移到文章最下方转载文章中进行源码下载,点击下载源码,运行后再看效果哈~~)
jQuery实现简单的图片查看器

项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如
CSS+JS构建的图片查看器

这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichp
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性 PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站 http://www.photoswipe.com/ 源码示例 http://github.com/downloads/codecomputerlove/P
移动端js图片查看器

本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下功能点整理首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集其次,图片查看器的制作及图
Android编程实现网络图片查看器和网页源码查看器实例

本文实例讲述了Android编程实现网络图片查看器和网页源码查看器.分享给大家供大家参考,具体如下: 网络图片查看器清单文加入网络访问权限:  <uses-permission android:name="android.permission.INTERNET"/> 界面如下: 示例: public class MainActivity extends Activity { private EditText image
基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

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

相关推荐

随机推荐