Backbone页面路由技术分析与实例

894 views

Published on

backbone router 应用与源码分析

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
894
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Backbone页面路由技术分析与实例

  1. 1. 请放心地将你的相片地址发给他人 Backbone 页面路由技术分析与实例 分享人:杨凯 QQ:786506
  2. 2. 现状单张图片没有指定的url
  3. 3. 12
  4. 4. 改变现状运用锚文片段(hash #pic)给图片提供固定链接
  5. 5. (function() { var Model = Backbone.Model = function(attributes, options) {…}; _.extend(Model.prototype, Events, {…}); var Collection = Backbone.Collection = function(models, options) {…}; _.extend(Collection.prototype, Events, {…}); var Router = Backbone.Router = function(options) {…} //路由配置器构造函数 _.extend(Router.prototype, Events, {…}); var History = Backbone.History = function() {…}; // 路由器构造函数 _.extend(History.prototype, Events, {…}); var View = Backbone.View = function(options) {…}; _.extend(View.prototype, Events, {…}); Backbone.sync = function(method, model, options) {…}; var extend = function (protoProps, classProps) {…}; Model.extend = Collection.extend = Router.extend = View.extend = extend;}).call(this);
  6. 6. _.extend = function(obj) { each(slice.call(arguments,1), function(source) { for (var prop in source) { obj[prop] = source[prop]; } Router.prototype }); return obj; Router.prototype.initialize = function() {}; }; underscore.js Router.prototype.route = function(route, name, callback) {…}; Router.prototype.navigate = function(fragment, options) {…}; Router.prototype._bindRoutes = function(){…}; Router.prototype._routeToRegExp = var Events = Backbone.Events = { function(route){…}; on: function(events, callback, context) {…}, off: function(events, callback, context) {…}, Router.prototype._extractParameters = trigger: function(events) {…} function(route, fragment) {…}; }; Router.prototype.on = function(events, callback, Events.bind = Events.on; context) {…}; Events.unbind = Events.off; Router.prototype.off = function(events, callback, context) {…}; Router.prototype.trigger = function(events, callback, context) {…}; History.prototype …_.extend(Router.prototype, Events, { initialize: function(){}, route: function(route, name, callback) {…}, navigate: function(fragment, options) {…}, 接下来对Router/History源码进行分析 (‧‧)nnn _bindRoutes: function() {…}, _routeToRegExp: function(route) {…}, _extractParameters: function(route, fragment) {…}});
  7. 7. 谢谢大家欢迎拍砖

×