This article is a part of the previous one, and it is also an instantiation practice for recent learning require and backbone. I hope it will be helpful to students who are learning and understanding.
For the previous article, please go to:Make a web page picture viewer for mobile phones
New mobile phone picture viewer
Web page section
The introduction of require is the key point, indicating the file path where the main function is located
<!doctype html> <html lang="zh-cn"> <head> <title>webappPicture viewer</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./static/js/" data-main="/static/js/pic/main"></script> </head> <body> <section class="index"> <h1>手机网页Picture viewer</h1> <figure class="download"> <a>Other documents</a> <a url="/www/assets/img/">picturea</a> <a url="/www/assets/img/">pictureb</a> <a>Other documents</a> <a>Other documents</a> <a url="/www/assets/img/">picturec</a> <a url="/www/assets/img/">pictured</a> <a>Other documents</a> </figure> </section> </body> </html>
Load it after the loading is completed; the style part will not take up any space, and you will see the full web page yourself later.
Template engine part
The first is the dialog box, the second is the current location, and the third is the current display picture
<script type="text/template"> <section></section> <figure ><ul></ul></figure> <footer> <span >Left rotation</span> <span >Right rotation</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 %>" width="<%=width %>" height="<%=height %>" url="<%=url %>" /> </script>
3 templates need to be written into HTML files
Program Development Section
Main function
({
paths : {
jquery : 'http://cdn./static/js/',
fastclick : 'http://cdn./static/js/',
underscore : 'http://cdn./static/js/',
backbone : 'http://cdn./static/js/',
swipe : 'http://cdn./static/js/'
},
shim : {
jquery : {
exports : '$'
},
fastclick : {
deps : ['jquery']
}
}
});
require(['underscore', 'backbone', 'fastclick'], function (){
();
require(['./view/global'], function(Global){
var global = new Global;
});
});
paths define the paths of each module; the jquery module is re-parsed in the shim, fastclick (a mini plug-in that helps improve the touch experience) indicates the dependency module jquery
require first load the underscore, backbone, jquery, and fastclick modules in turn, and then load the global control view global module and instantiate it.
Global Control View
define(['model/pic', 'collection/set', 'view/imager'], function (Pic, Set, Imager){
var set = new Set;
// Global Control View var global = ({
el : 'body',
data : $('.download [url]'),
events : {
'click .download [url]' : 'open'
},
open : function (model){
var url = $().attr('url');
var index = ($());
var length = ;
var total = new ({
index : index + 1,
length : length
});
var dialog = new ({
model : total
});
$().prepend(().el); // Draw picture viewer
();
();
(index);
(url, index);
},
collect : function (){
if( > 0) return false;
(function(){
var name = $(this).text();
var url = $(this).attr('url');
var item = new ({
name : name,
url : url
});
(item); // Add a model });
},
list : function (){
var obj = $('#swipe ul');
(function(model){
var list = new ({
model : model
});
(().el); // Draw a picture list });
},
swipe : function (index){
require(['swipe'], function(){
var swipe = new ;
(index).el; // Draw picture sliding effect });
},
loading : function (url, index){
var item = new ({
url : url
});
var loading = new ({
model : item,
el : $('#swipe li').eq(index).find('img')
});
(); // Draw pictures and load them }
});
return global;
});
Load the data model pic module, data collection set module, render view imager module and instantiate a collection module.
In the global control view, we define: open method of drawing image viewer, collect method of adding model, list method of drawing image list, swipe method of drawing image sliding effect, loading method of drawing image loading
Rendering view
define(['model/pic'], function (Pic){
var imager = Object;
// Picture viewer view = ({
initialize : function (){
_.bindAll(this, 'render');
},
tagName : 'section',
className : 'dialog',
template : _.template($('#dialog_tmpl').html()),
events : {
'click #l, #r' : 'turn'
},
render : function (){
$().html((()));
return this;
},
turn : function(model){
var index = parseInt($('#pos').attr('index')) - 1;
var obj = $('#swipe li').eq(index).find('img');
var deg = parseInt(('deg') ? ('deg') : 0);
var type = ;
if(type && type == 'l') deg -= 90;
else if(type && type == 'r') deg += 90;
if(deg > 360) deg -= 360;
else if(deg < -360) deg += 360;
({'-webkit-transform':'rotate(' + deg + 'deg)'}).attr({'deg':deg});
}
});
// Picture list view = ({
initialize : function (){
_.bindAll(this, 'render');
},
tagName : 'li',
template : _.template($('#item_tmpl').html()),
events : {
'click img' : 'close'
},
render : function (){
$().html((()));
return this;
},
close : function (){
$('.dialog').remove();
}
});
// Picture sliding positioning view = ({
initialize : function (){
_.bindAll(this, 'render');
},
el : '#pos',
template : _.template($('#pos_tmpl').html()),
render : function (){
$().replaceWith((()));
$('#swipe [deg]').removeAttr('deg').removeAttr('style');
return this;
}
});
// Picture loading view = ({
initialize : function (){
_.bindAll(this, 'render');
},
template : _.template('<img src="<%=url %>" />'),
render : function (){
var obj = $();
var html = (());
var img = new Image();
= ;
= function(){
(html);
};
return this;
}
});
// Picture sliding effect view = ({
initialize : function (){
_.bindAll(this, 'render');
},
render : function (index){
var obj = ('swipe');
= Swipe(obj, {
startSlide : index,
continuous : false,
disableScroll : true,
callback : function(index, element){
var length = $('#pos').attr('length');
var total = new ({
index : index + 1,
length : length
});
var fix = new ({
model : total
});
(); // Draw pictures and position them
var url = $(element).find('img').attr('url');
if(!url || == 0) return false;
var item = new ({
url : url
});
var loading = new ({
model : item,
el : $(element).find('img')
});
(); // Draw pictures and load them }
});
return this;
}
});
return imager;
});
Data Model
define(function (){
var pic = Object;
// Picture data statistics model = ({
defaults : {
index : 1,
length : 1
}
});
// Picture data model = ({
defaults : {
name : 'Image loading...',
src : 'http://cdn./static/images/',
url : '',
width : 40,
height : 40
}
});
return pic;
});
Data collection
define(['model/pic'], function (Pic){
// Image data collection var set = ({
model :
});
return set;
});
Module definition makes the program clearer, module loading makes file loading and execution under our control; MVC mode (C has not been used yet) makes separation of data logic layers and other things easier, reducing code confusion.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.