require、backbone等重构手机图片查看器
前端之家收集整理的这篇文章主要介绍了
require、backbone等重构手机图片查看器，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文是对之前的部分补充，也是对最近学习require、backbone的一次实例化的实践，希望对正在学习理解中的同学们有帮助
前文请前往：
新手机图片查看器
网页部分
require引入是重点，指明了主函数所在文件路径
webapp图片查看器
<script id="pos_tmpl" type="text/template">
<span id="pos" index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %>
<script id="item_tmpl" type="text/template">
3个模版需要写入HTML文件内
程序开发部分
主函数main.js
score : 'http://cdn.file1.goodid.com/static/js/under
score.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
<div class="jb51code">
<pre class="brush: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
<div class="jb51code">
<pre class="brush: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,tagName : 'li',template : .template($('#item_tmpl').html()),events : {
'click img' : 'close'
},close : function (){
$('.dialog').remove();
}
});
// 图片滑动定位视图
imager.fix = Backbone.View.extend({
initialize : function (){
.bindAll(this,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,template : .template('
'),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 : 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(); // 绘制<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>加载
}
});
return this;
}
});
return imager;
});
