本文是對之前的部分補充，也是對最近學習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還沒用上）讓數據邏輯層等分離更加順手減少了代碼混亂。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。