require、backbone等重构手机图片查看器
本文是对之前的部分补充，也是对最近学习require、backbone的一次实例化的实践，希望对正在学习理解中的同学们有帮助
前文请前往：制作手机使用的网页图片查看器
新手机图片查看器
网页部分
require引入是重点，指明了主函数所在文件路径
<!doctypehtml> <htmllang="zh-cn"> <head> <title>webapp图片查看器</title> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <scriptsrc="http://cdn.file1.goodid.com/static/js/require.min.js"data-main="/static/js/pic/main"></script> </head> <body> <sectionclass="index"> <h1>手机网页图片查看器</h1> <figureclass="download"> <a>其它文件</a> <aurl="http://static.bootcss.com/www/assets/img/opencdn.png">图片a</a> <aurl="http://static.bootcss.com/www/assets/img/buttons.png">图片b</a> <a>其它文件</a> <a>其它文件</a> <aurl="http://static.bootcss.com/www/assets/img/gruntjs.png">图片c</a> <aurl="http://static.bootcss.com/www/assets/img/lesscss.png">图片d</a> <a>其它文件</a> </figure> </section> </body> </html>
require.js加载完成后即加载main.js；样式部分就不占篇幅了，后面自己看完整网页
模版引擎部分
第一个是对话框、第二个是当前位置、第三个是当前展示图片
<scriptid="dialog_tmpl"type="text/template"> <section></section> <figureid="swipe"><ul></ul></figure> <footer> <spanid="l">左旋</span> <spanid="r">右旋</span> <spanid="pos"index="<%=index%>"length="<%=length%>"><%=index%>/<%=length%></span> </footer> </script> <scriptid="pos_tmpl"type="text/template"> <spanid="pos"index="<%=index%>"length="<%=length%>"><%=index%>/<%=length%></span> </script> <scriptid="item_tmpl"type="text/template"> <imgsrc="<%=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){
varglobal=newGlobal;
});
});
paths定义了各模块路径；shim中重新解析了jquery模块，fastclick（一款帮助提高触摸体验的微型插件）指明依赖模块jquery
require首先依次加载underscore、backbone、jquery、fastclick模块，然后再加载全局控制视图global模块并实例化
全局控制视图global.js
define(['model/pic','collection/set','view/imager'],function(Pic,Set,Imager){
varset=newSet;
//全局控制视图
varglobal=Backbone.View.extend({
el:'body',
data:$('.download[url]'),
events:{
'click.download[url]':'open'
},
open:function(model){
varurl=$(model.target).attr('url');
varindex=this.data.index($(model.target));
varlength=this.data.length;
vartotal=newPic.total({
index:index+1,
length:length
});
vardialog=newImager.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)returnfalse;
this.data.each(function(){
varname=$(this).text();
varurl=$(this).attr('url');
varitem=newPic.item({
name:name,
url:url
});
set.add(item);//添加模型
});
},
list:function(){
varobj=$('#swipeul');
set.each(function(model){
varlist=newImager.list({
model:model
});
obj.append(list.render().el);//绘制图片列表
});
},
swipe:function(index){
require(['swipe'],function(){
varswipe=newImager.swipe;
swipe.render(index).el;//绘制图片滑动特效
});
},
loading:function(url,index){
varitem=newPic.item({
url:url
});
varloading=newImager.loading({
model:item,
el:$('#swipeli').eq(index).find('img')
});
loading.render();//绘制图片加载
}
});
returnglobal;
});
依次加载它依赖的数据模型pic模块、数据集合set模块、渲染视图imager模块并实例化了一个集合模块
全局控制视图中我们定义了：绘制图片查看器的open方法、添加模型的collect方法、绘制图片列表的list方法、绘制图片滑动特效的swipe方法、绘制图片加载的loading方法
渲染视图imager.js
define(['model/pic'],function(Pic){
varimager=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()));
returnthis;
},
turn:function(model){
varindex=parseInt($('#pos').attr('index'))-1;
varobj=$('#swipeli').eq(index).find('img');
vardeg=parseInt(obj.attr('deg')?obj.attr('deg'):0);
vartype=model.target.id;
if(type&&type=='l')deg-=90;
elseif(type&&type=='r')deg+=90;
if(deg>360)deg-=360;
elseif(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:{
'clickimg':'close'
},
render:function(){
$(this.el).html(this.template(this.model.toJSON()));
returnthis;
},
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');
returnthis;
}
});
//图片加载视图
imager.loading=Backbone.View.extend({
initialize:function(){
_.bindAll(this,'render');
},
template:_.template('<imgsrc="<%=url%>"/>'),
render:function(){
varobj=$(this.el);
varhtml=this.template(this.model.toJSON());
varimg=newImage();
img.src=this.model.attributes.url;
img.onload=function(){
obj.replaceWith(html);
};
returnthis;
}
});
//图片滑动特效视图
imager.swipe=Backbone.View.extend({
initialize:function(){
_.bindAll(this,'render');
},
render:function(index){
varobj=document.getElementById('swipe');
window.mySwipe=Swipe(obj,{
startSlide:index,
continuous:false,
disableScroll:true,
callback:function(index,element){
varlength=$('#pos').attr('length');
vartotal=newPic.total({
index:index+1,
length:length
});
varfix=newimager.fix({
model:total
});
fix.render();//绘制图片滑动定位
varurl=$(element).find('img').attr('url');
if(!url||url.length==0)returnfalse;
varitem=newPic.item({
url:url
});
varloading=newimager.loading({
model:item,
el:$(element).find('img')
});
loading.render();//绘制图片加载
}
});
returnthis;
}
});
returnimager;
});
数据模型pic.js
define(function(){
varpic=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
}
});
returnpic;
});
数据集合set.js
define(['model/pic'],function(Pic){
//图片数据集合
varset=Backbone.Collection.extend({
model:Pic.item
});
returnset;
});
模块定义让程序更加清晰了，模块加载让文件加载执行在我们的掌控之中；MVC模式（C还没用上）让数据逻辑层等分离更加顺手减少了代码混乱。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。