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

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

本文是对之前的部分补充，也是对最近学习require、backbone的一次实例化的实践，希望对正在学习理解中的同学们有帮助

前文请前往：制作手机使用的网页图片查看器

新手机图片查看器

网页部分

require引入是重点，指明了主函数所在文件路径

其它文件

图片a

图片b

其它文件

&ltudhPJzVe;a>其它文件

图片c

图片d

其它文件

require.js加载完成后即加载main.js；样式部分就不占篇幅了，后面自己看完整网页

模版引擎部分

第一个是对话框、第二个是当前位置、第三个是当前展示图片

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(''),

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;

// 图片udhPJzVe数据统计模型

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还没用上）让数据逻辑层等分离更加顺手减少了代码混乱。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。