Статьи

Быстрый взгляд на исходный код backbone.js

Март 3, 2019

Копаем в исходный код backbone.js
http://documentcloud.github.com/backbone/backbone.js

Сегодня я решил быстро взглянуть на источник backbone.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')._; 
 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')._;
  • Во-первых, root ссылается на глобальный объект JavaScript.
  • Require используется для загрузки файлов JavaScript верхнего уровня или внутри модулей для динамического извлечения зависимостей.
  • Дополнительная информация о глобальных объектах JavaScript: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects
  • Кажется, backbone.js можно использовать с не-браузерными языками бэкэнда JavaScript, которые соответствуют спецификации CommonJS, такими как Node.js.
  • CommonJS — это инфраструктура JavaSCript на стороне сервера. Он проверяет наличие require из спецификации модуля CommonJS. В нем говорится, что если глобальный объект не содержит _, попробуйте запросить модуль подчеркивания (если определено требование) и получите _ оттуда.
  • Дальнейшее чтение по require () в документах node.js: 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 () и некоторые другие. Поскольку он занимает всего 10 КБ, его основной задачей является разработка мобильных приложений, и это можно увидеть в исходном коде . 

 ['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');

Здесь также генерируется уникальный идентификатор для свойства cid с использованием функции _.uniqueId (), которая принимает префикс в качестве параметра, в этом случае 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 // ------------------- // 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, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(///g,'/'); };

Вспомогательная функция escapeHTML, которая использует регулярные выражения.

Это было просто быстро в backbone.js Я уверен, что некоторые из вас посмотрели намного ближе и хотели бы узнать ваши мысли. Оставить комментарий.

37
Share: