快速浏览一下ribs.js源代码

浦琪

2023-12-01

深入研究bone.js源代码
http://documentcloud.github.com/backbone/backbone.js

今天，我决定快速浏览一下lobb.js源代码，以了解这个令人敬畏的MVC框架的幕后故事。

对Backbone.js 0.5.3的先前版本进行了审核（最新版本为Backbone.js 0.9.1）

line 32: require('underscore')._;

// Require Underscore, if we're on the server, and it's not already present.
var _ = root._;
if (!_ && (typeof require !== 'undefined')) _ = require('underscore')._;

首先，根引用全局JavaScript对象。
Require用于加载顶级JavaScript文件或模块内部以动态获取依赖关系。
有关JavaScript全局对象的进一步阅读： https : //developer.mozilla.org/en/JavaScript/Reference/Global_Objects
似乎骨干.js可以与遵循CommonJS规范的非浏览器JavaScript后端语言一起使用，例如Node.js。
CommonJS是服务器端JavaSCript框架。它正在检查CommonJS模块规范中是否存在require。这就是说，如果全局对象不包含_，请尝试要求使用下划线模块（如果定义了require）并从那里获取_。
进一步阅读node.js文档中的require（）： http : //nodejs.org/docs/v0.4.2/api/modules.html#loading_from_the_require.paths_Folders
在CommonJS中，现在仅需使用Underscore：var _ = require（“ underscore”）。
现在我们有了一个完整的函数列表，所有函数都以下划线变量名称开头（例如_.size（），_。toArray（）等）。

第35行：$ = root.jQuery

// For Backbone's purposes, jQuery or Zepto owns the `$` variable.
var $ = root.jQuery || root.Zepto;

Zepto.js非常类似于精简版的jQuery，不同之处在于它的函数名称略有不同，例如ajaxJSONP（）和其他一些名称。仅有10kb的痕迹，它的主要重点是移动开发，这可以在源代码中看到。

['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'longTap'].forEach(function(m){
  $.fn[m] = function(callback){ return this.bind(m, callback) }
});

第132行：Backbone.Model

// Backbone.Model
// --------------

// Create a new model, with defined attributes. A client id (`cid`)
// is automatically generated and assigned for you.
Backbone.Model = function(attributes, options) {
  var defaults;
  attributes || (attributes = {});
  if (defaults = this.defaults) {
    if (_.isFunction(defaults)) defaults = defaults.call(this);
    attributes = _.extend({}, defaults, attributes);
  }
  this.attributes = {};
  this._escapedAttributes = {};
  this.cid = _.uniqueId('c');
  this.set(attributes, {silent : true});
  this._changed = false;
  this._previousAttributes = _.clone(this.attributes);
  if (options && options.collection) this.collection = options.collection;
  this.initialize(attributes, options);
};

这是核心模型原型对象，其中为模型设置了所有属性。

this.cid = _.uniqueId('c');

在这里，它还使用_.uniqueId（）函数为cid属性生成了唯一的ID，该函数将前缀作为参数，在这种情况下，ac会返回c104，c201等…

并设置模型的默认值，您可以执行以下操作：

var Meal = Backbone.Model.extend({
  defaults: {
    "appetizer":  "caesar salad",
    "entree":     "ravioli",
    "dessert":    "cheesecake"
  }
});

alert("Dessert will be " + (new Meal).get('dessert'));

第150行：_。extend（Backbone.Model.prototype

_.extend(Backbone.Model.prototype, Backbone.Events, {
    ...
    methods: initialize(), escape(), set(), get() etc...
    ...

这只是将方法和事件对象添加到模型原型对象中，因此它具有使用extend（）函数（underscore.js提供）的所有功能。

第414行：Backbone.Collection

// Backbone.Collection
// -------------------

// Provides a standard collection class for our sets of models, ordered
// or unordered. If a `comparator` is specified, the Collection will maintain
// its models in sort order, as they're added and removed.
Backbone.Collection = function(models, options) {
  options || (options = {});
  if (options.comparator) this.comparator = options.comparator;
  _.bindAll(this, '_onModelEvent', '_removeReference');
  this._reset();
  if (models) this.reset(models, {silent: true});
  this.initialize.apply(this, arguments);
};

第656行：Backbone.Router

// Backbone.Router
// -------------------

// Routers map faux-URLs to actions, and fire events when routes are
// matched. Creating a new one sets its `routes` hash, if not set statically.
Backbone.Router = function(options) {
  options || (options = {});
  if (options.routes) this.routes = options.routes;
  this._bindRoutes();
  this.initialize.apply(this, arguments);
};

735行：骨干。历史

// Backbone.History
// ----------------

// Handles cross-browser history management, based on URL fragments. If the
// browser does not support `onhashchange`, falls back to polling.
Backbone.History = function() {
  this.handlers = [];
  _.bindAll(this, 'checkUrl');
};

879行：Backbone.View

// Backbone.View
// -------------

// Creating a Backbone.View creates its initial element outside of the DOM,
// if an existing element is not provided...
Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  this._configure(options || {});
  this._ensureElement();
  this.delegateEvents();
  this.initialize.apply(this, arguments);
};

第1038行：Backbone.sync

// Backbone.sync
// -------------

// Override this function to change the manner in which Backbone persists
// models to the server. You will be passed the type of request, and the
// model in question. By default, uses makes a RESTful Ajax request
// to the model's `url()`. Some possible customizations could be:
//
// * Use `setTimeout` to batch rapid-fire updates into a single request.
// * Send up the models as XML instead of JSON.
// * Persist models via WebSockets instead of Ajax.
//
// Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
// as `POST`, with a `_method` parameter containing the true HTTP method,
// as well as all requests with the body as `application/x-www-form-urlencoded` instead of
// `application/json` with the model in a param named `model`.
// Useful when interfacing with server-side languages like **PHP** that make
// it difficult to read the body of `PUT` requests.
Backbone.sync = function(method, model, options) {
  var type = methodMap[method];

1137行：抛出新错误（

// Throw an error when a URL is needed, and none is supplied.
var urlError = function() {
  throw new Error('A "url" property or function must be specified');
};

这是一个辅助函数，它将引发新的自定义JavaScript错误。就像这样，但会自定义消息。

try{
  document.body.filters[0].apply()
}
catch(e){
  alert(e.name + "n" + e.message)
}

第1153行：var escapeHTML = function（string）

// Helper function to escape a string for HTML rendering.
var escapeHTML = function(string) {
  return string.replace(/&(?!w+;|#d+;|#x[da-f]+;)/gi, '&amp;').replace(//g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(///g,'&#x2F;');
};

使用正则表达式替换的escapeHTML的辅助函数。

我只是很快地了解了骨干.js，我敢肯定你们中的一些人看起来更近了，想知道您的想法。发表评论。

From: https://www.sitepoint.com/quick-backbone-js-source-code/

快速浏览一下ribs.js源代码

line 32: require('underscore')._;