前文请前往：制作手机使用的网页图片查看器
新手机图片查看器
网页部分
require引入是重点，指明了主函数所在文件路径
<!doctype html> <html lang="zh-cn"> <head> <title>webapp图片查看器</title> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <script src="https://cdn.file1.goodid.com/static/js/require.min.js" data-main="/static/js/pic/main"></script> </head> <body> <section> <h1>手机网页图片查看器</h1> <figure> <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 type="text/template"> <section></section> <figure><ul></ul></figure> <footer> <span>左旋</span> <span>右旋</span> <span index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span> </footer> </script> <script type="text/template"> <span index="<%=index %>" length="<%=length %>"><%=index %>/<%=length %></span> </script> <script type="text/template"> <img src="<%=src %>" 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模块并实例化了一个集合模块