require、backbone等重构手机图片查看器
本文是对之前的部分补充,也是对最近学习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还没用上)让数据逻辑层等分离更加顺手减少了代码混乱。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要为大家详细介绍了require、backbone等重构手机图片查看器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
JavaScript的Backbone.js框架入门学习指引
这篇文章主要介绍了JavaScript的Backbone.js框架入门学习指引, 其中特别讲到了Backbone中的关键部分Router路由器,需要的朋友可以参考下...2016-05-09Lua中的loadfile、dofile、require详解
这篇文章主要介绍了Lua中的loadfile、dofile、require详解,本文分别用实例讲解它的用法和特点等内容,需要的朋友可以参考下...2020-06-30- Perl中的文件包含,有三种方法:do, require, 以及use,这里简单的介绍下方便需要的朋友...2020-06-29
php中set_include_path和require,include介绍
在php中set_include_path会导致require,include用法不一样了,对于这个问题我们来看一个简单的例子,具体如下。 在PHP中经常使用include,require来引用其他文件,使用相...2016-11-25- 本文主要对handlebars+require基本使用方法进行详细介绍,文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧...2017-01-09
- 如果你做过各种大小的Web站点,一定会对重用代码段的重要性深有体会,不管是HTML还是PHP代码块。比如需要一年修改一次包含版权信息的页脚,而你有1000个Web页(就算是10...2016-11-25
php中include require utf-8文件时顶部产生空行的
本文章来介绍关于php中include require utf-8文件时顶部产生空行的解决办法有需要学习的朋友可参考。 include()产生一个警告而require()则导致一个致命错误。换...2016-11-25简单谈谈PHP中的include、include_once、require以及require_once语句
include() 、require()语句包含并运行指定文件。这两结构在包含文件上完全一样,唯一的区别是对于错误的处理。require()语句在遇到包含文件不存在,或是出错的时候,就停止即行,并报错。include()则继续即行。...2016-04-26- PHP Include 文件 服务器端包括 您可以插入的内容的文件到PHP文件之前,服务器执行它,与包括( )或要求( )函数。这两项职能是相同的各种方式,但他们如何处理错误。在包括( )函...2016-11-25
- Perl 中的use和require,都是用来加载和引用Perl的模块,或者是子程序,区别在于Perl use是在当前默认的里面去寻找,一旦模块不在指定的区域内的化,用Perl use是不可以引入的...2020-06-29
- 引用文件的方法有两种:require 及 include。两种方式提供不同的使用弹性。 require 的使用方法如 require("MyRequireFile.php"); 。这个函数通常放在 PHP 程序的...2016-11-25
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器,图片可以实现滑动、缩放、双击缩放等效果,...2016-11-22- 文章介绍了大家在 php开发中会常常碰到的一个关于require_once用法,有需要的朋友可参考一下。 wwwroot //网站根目录 绝对路径为: F:/wwwroot -- folder_a // 文...2016-11-25
- 这篇文章主要介绍了jQuery实现简单的图片查看器的相关资料,需要的朋友可以参考下...2016-01-05
- 在php中我们调用外部文件都会用到php include 与require 来包含进来了,但是否include 和require他们两有什么区别呢 服务器端include(小型工业)用于创建功能,页眉,...2016-11-25
php中include include_once require require_once性能比较详解
文章利用图文详细的介绍了在php中关于include与include_once和require与require_once性能图,有需要的朋友可以详细的看看,但总体来讲include_once和require_once性能要...2016-11-25JavaScript的Backbone.js框架环境搭建及Hellow world示例
这篇文章主要介绍了JavaScript的Backbone.js框架环境搭建及Hellow world示例,Backbone是一个类似MVC结构的前端MVVM框架,非常轻量,需要的朋友可以参考下...2016-05-09phpmyamdin安装出现Warning: require(./libraries/Error_Handler.class.php) 错误解决办法
windows2003,在装phpmyadmin的时候居然报错 Warning: require(./libraries/Error_Handler.class.php) [function.require]: 。解决方法如下 在安装phpMyAdmin-4.0....2016-11-25PHP文件包含语句 include、include_once、require、require_onc
1、include() include(/path/to/filename) include()语句将在其被调用的位置处包含一个文件。包含一个文件与在该语句所在位置复制制定文件的数据具有相同内容的效果...2016-11-25