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