首頁 > 開發者 > JavaScript
require、backbone等重構手機圖片查看器，
本文是對之前的部分補充，也是對最近學習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還沒用上）讓資料邏輯層等分離更加順手減少了代碼混亂。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
