Plone技术资料

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2653|回复: 0

看源码学Backbone

[复制链接]
发表于 2019-8-16 17:14:17 | 显示全部楼层 |阅读模式
Backbone是一个javascript库,主要用于WEB应用开发,其代码本身有很好的结构化,容易理解,容易维护。
当前稳定版是Backbone1.4,源代码在github,主库网址:https://github.com/jashkenas/backbone/blob/master/backbone.js.

Backbone唯一依存件是underscore(一个十分强大的javascript工具库)。
源码结构如下:
Backbone.Events
  1.   // A module that can be mixed in to *any object* in order to provide it with
  2.   // a custom event channel. You may bind a callback to an event with `on` or
  3.   // remove with `off`; `trigger`-ing an event fires all callbacks in
  4.   // succession.
  5.   //
  6.   //     var object = {};
  7.   //     _.extend(object, Backbone.Events);
  8.   //     object.on('expand', function(){ alert('expanded'); });
  9.   //     object.trigger('expand');
  10.   //
复制代码
Backbone.Events是一个可以混合到*任何对象*的模块,以便为其提供自定义事件通道。 您可以使用`on`将回调绑定到事件,或使用`off`将其删除; `触发'事件会连续触发所有回调。

Backbone.Model
  1. // Backbone **Models** are the basic data object in the framework --
  2.   // frequently representing a row in a table in a database on your server.
  3.   // A discrete chunk of data and a bunch of useful, related methods for
  4.   // performing computations and transformations on that data.

  5.   // Create a new model with the specified attributes. A client id (`cid`)
  6.   // is automatically generated and assigned for you.
复制代码
Backbone.Model是框架中的基本数据对象 - 通常用来描述数据对象的属性,模拟服务器上数据库中数据表的一行数据。包含 离散的数据块和一堆有用的相关方法,用于对该数据执行计算和转换。

Backbone.Collection
  1.   // If models tend to represent a single row of data, a Backbone Collection is
  2.   // more analogous to a table full of data ... or a small slice or page of that
  3.   // table, or a collection of rows that belong together for a particular reason
  4.   // -- all of the messages in this particular folder, all of the documents
  5.   // belonging to this particular author, and so on. Collections maintain
  6.   // indexes of their models, both in order, and for lookup by `id`.

  7.   // Create a new **Collection**, perhaps to contain a specific type of `model`.
  8.   // If a `comparator` is specified, the Collection will maintain
  9.   // its models in sort order, as they're added and removed.
复制代码



Backbone.View


  1. // Backbone Views are almost more convention than they are actual code. A View
  2.   // is simply a JavaScript object that represents a logical chunk of UI in the
  3.   // DOM. This might be a single item, an entire list, a sidebar or panel, or
  4.   // even the surrounding frame which wraps your whole app. Defining a chunk of
  5.   // UI as a **View** allows you to define your DOM events declaratively, without
  6.   // having to worry about render order ... and makes it easy for the view to
  7.   // react to specific changes in the state of your models.

  8.   // Creating a Backbone.View creates its initial element outside of the DOM,
  9.   // if an existing element is not provided...
复制代码


Backbone.sync


  1. // Override this function to change the manner in which Backbone persists
  2.   // models to the server. You will be passed the type of request, and the
  3.   // model in question. By default, makes a RESTful Ajax request
  4.   // to the model's `url()`. Some possible customizations could be:
  5.   //
  6.   // * Use `setTimeout` to batch rapid-fire updates into a single request.
  7.   // * Send up the models as XML instead of JSON.
  8.   // * Persist models via WebSockets instead of Ajax.
  9.   //
  10.   // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
  11.   // as `POST`, with a `_method` parameter containing the true HTTP method,
  12.   // as well as all requests with the body as `application/x-www-form-urlencoded`
  13.   // instead of `application/json` with the model in a param named `model`.
  14.   // Useful when interfacing with server-side languages like **PHP** that make
  15.   // it difficult to read the body of `PUT` requests.
复制代码



Backbone.Router


  1. // Routers map faux-URLs to actions, and fire events when routes are
  2.   // matched. Creating a new one sets its `routes` hash, if not set statically.
复制代码
路由器将虚拟URL映射到操作,并在匹配路由时触发事件。 如果没有静态设置,创建一个新的`routes`哈希。


Backbone.History


  1. // Handles cross-browser history management, based on either
  2.   // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
  3.   // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
  4.   // and URL fragments. If the browser supports neither (old IE, natch),
  5.   // falls back to polling.
复制代码
处理跨浏览器历史记录管理,基于[pushState](http://diveintohtml5.info/history.html)和真实URL,或[onhashchange](https://developer.mozilla.org/en-/docs/ DOM / window.onhashchange)和URL片段。 如果浏览器既不支持(旧的IE,natch),则回退到轮询。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|Archiver|手机版|Plone技术资料 ( 湘ICP备14006519号-1 )

GMT+8, 2019-12-8 09:25 , Processed in 0.044352 second(s), 14 queries , Gzip On.

Powered by Plone! X3.4

© 2001-2019 Plone.org.

快速回复 返回顶部 返回列表