Skip to content

Commit cad94e2

Browse files
sunwenchaosunwenchao
committed
注释
1 parent 38fbce0 commit cad94e2

File tree

7 files changed

+111
-10
lines changed

7 files changed

+111
-10
lines changed

‎public/html/home.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<title>蜡笔同步 - 日历</title>
66
<link type="image/x-icon" href="/image/labi.ico" rel="icon"/>
7+
<base href="http://10.10.0.232"/>
78
<link rel="stylesheet" href="/combo?type=css&files=reset.css,bootstrap/bootstrap.min.css" type="text/css"/>
89
<link rel="stylesheet" href="/css/less/calendar.css" type="text/css"/>
910
</head>

‎public/html/slide/img/labi.ico

2.79 KB
Binary file not shown.

‎public/html/slide/impress-demo.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -678,4 +678,9 @@ a:focus {
678678
.ssmall{
679679
font-size: 26px;
680680
color: #ccc;
681+
}
682+
.tips{
683+
margin-top: 20px;
684+
line-height: 1.5;
685+
padding-left: 25px;
681686
}

‎public/html/slide/index.html

Lines changed: 95 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<title>Backbone.js</title>
6-
5+
<title>Backbone by Sun</title>
6+
<link type="image/x-icon" href="img/labi.ico" rel="icon"/>
77
<link href="impress-demo.css" rel="stylesheet" />
88
<link href="themes/tricolore.css" rel="stylesheet" type="text/css" media="screen">
99
</head>
@@ -125,13 +125,47 @@ <h1>Backbone.js</h1>
125125
</div>
126126

127127
<div class="step" data-x="0" data-y="5000" data-z="-3000" data-rotate="300" data-scale="1">
128-
<p>Let's start <b>search</b> it !</p>
128+
<p>small <b>module</b>, big <b>thought</b></p>
129+
<p><b>Extend it</b> to <b>Use it</b> !</p>
130+
</div>
131+
132+
<div class="step slide" data-x="2000" data-y="1500">
133+
<strong class="stitle">Create a Backbone Class</strong>
134+
<pre>
135+
<code data-language="javascript">
136+
137+
// jQuery
138+
document.getElementById( 'abc' )
139+
$( '#abc' )
140+
141+
142+
// Backbone var aaa = new Backbone.Model(); ???
143+
// We need a variety of models
144+
var Calendar = Backbone.Model.extend({
145+
146+
changeDate : function(){
147+
//ooxx
148+
}
149+
});
150+
151+
// create a instance
152+
var aCal = new Calendar();
153+
</code>
154+
</pre>
155+
</div>
156+
157+
<!-------------------------------------------------------------------------------- -->
158+
159+
<div class="step" data-x="1000" data-y="5000" data-z="-3000" data-rotate="300" data-scale="1">
160+
<p>Let's start <b>search</b> it in <b>real world <br/>( Labi 2.0 )</b> !</p>
129161
</div>
130162

131163
<div class="step slide" data-x="-1000" data-y="2400">
132-
<strong class="stitle">Start from Html !</strong>
164+
<strong class="stitle">Single Page App</strong>
133165
<pre>
134166
<code data-language="javascript">
167+
168+
135169
// Server We want single page
136170
app.get( /\/calendars\/[\w]*/, function( req, res ) {
137171
if( !req.xhr ) res.sendfile( './public/html/home.html' );
@@ -145,21 +179,76 @@ <h1>Backbone.js</h1>
145179
seajs.use( '/js/home/router', function( homeRouter ){
146180
homeRouter.init();
147181
});
182+
183+
// 管理浏览器历史
184+
// 提供每个视图可访问的单独 URL
148185
</code>
149186
</pre>
150187
</div>
151188

189+
<div class="step slide" data-x="0" data-y="2400">
190+
<strong class="stitle">Manage Route</strong>
191+
<div class="tips">
192+
<b>pushState, replaceState</b><br/>
193+
<b># hash</b>
194+
</div>
195+
<pre>
196+
<code data-language="javascript">
197+
// home/router ---- init ----- www.labi.com/ooxx
198+
$(function(){
199+
Backbone.history.start( { pushState : true, root : "/" } );
200+
});
152201

202+
// 唯一的路由表太混乱 且不利于统一管理
203+
'calendars*path' : 'calendarCommon'
153204

205+
calendarCommon : function( path ){
206+
// 日历模块的统一处理 分配给子路由进行匹配执行
207+
require.async( '../calendar/router', function( calendarRouter ) {
208+
calendarRouter.routeURL( path );
209+
});
210+
}
211+
212+
// Router-Util ^_^
213+
</code>
214+
</pre>
215+
</div>
154216

217+
<div class="step" data-x="2000" data-y="5000" data-z="-3000" data-rotate="300" data-scale="1">
218+
<p>Route to <b>View</b> !</p>
219+
</div>
220+
221+
<div class="step slide" data-x="3500" data-y="-1500">
222+
<strong class="stitle">Route to View</strong>
223+
<pre>
224+
<code data-language="javascript">
225+
// home/router ---- init ----- www.labi.com/ooxx
226+
$(function(){
227+
Backbone.history.start( { pushState : true, root : "/" } );
228+
});
229+
230+
// 唯一的路由表太混乱 且不利于统一管理
231+
'calendars*path' : 'calendarCommon'
232+
233+
calendarCommon : function( path ){
234+
// 日历模块的统一处理 分配给子路由进行匹配执行
235+
require.async( '../calendar/router', function( calendarRouter ) {
236+
calendarRouter.routeURL( path );
237+
});
238+
}
239+
240+
// Router-Util ^_^
241+
</code>
242+
</pre>
243+
</div>
155244

156-
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
245+
<div id="big" class="step" data-x="3500" data-y="8100" data-rotate="180" data-scale="6">
157246
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
158247
</div>
159248

160249

161250

162-
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
251+
<div id="its-in-3d" class="step" data-x="6200" data-y="8300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
163252
<p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
164253
<span class="footnote">* beat that, prezi ;)</span>
165254
</div>

‎public/js/calendar/router.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/**
22
* 日历的Router
3+
* 此模块同时依赖了所有日历相关文件 统一打包处理
34
*/
45
define(function (require, exports, module) {
56

‎public/js/home/router.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,38 @@ define(function (require, exports, module) {
77

88
var HomeRouter = Backbone.Router.extend({
99

10+
// 模块路由表
1011
routes : {
12+
1113
'calendars*path' : 'calendarCommon',
1214

1315
'' : 'initRedirect'
1416
},
1517

1618
calendarCommon : function( path ){
17-
// 日历模块的统一处理
19+
// 日历模块的统一处理 分配给子路由进行匹配执行
1820
require.async( '../calendar/router', function( calendarRouter ) {
21+
1922
calendarRouter.routeURL( path );
2023
});
2124
},
2225

2326
initRedirect : function(){
24-
// 根请求转发
25-
var initPath = 'calendars'
27+
// 根请求转发 针对'www.labi.com' 先假定设置为 calendars
28+
var initPath = 'calendars';
2629

2730
homeRouter.navigate( initPath, { replace : true } );
2831
}
2932
});
3033

3134
window.homeRouter = new HomeRouter();
3235

36+
// 页面入口
3337
exports.init = function(){
3438

3539
// Because hash-based history in Internet Explorer relies on an <iframe>,
3640
// be sure to only call start() after the DOM is ready.
3741
$(function(){
38-
3942
Backbone.history.start( { pushState : true, root : "/" } );
4043
});
4144
};

‎public/js/util/router-util.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/**
22
* @fileOverview : Router模块相关的工具方法
33
* @author : Sunwenchao
4+
* @version : 0.1.0
45
*/
56
define(function (require, exports, module) {
67

@@ -61,6 +62,7 @@ define(function (require, exports, module) {
6162
});
6263
};
6364

65+
// 对外的接口 API
6466
exports.createRouterHandlers = createRouterHandlers;
6567
exports.handleFragment = handleFragment;
6668

0 commit comments

Comments
 (0)