Backbone.js 0.9.2 Quellcode-Kommentare Chinesische Übersetzungsversion_Grundkenntnisse

// Backbone.js 0.9.2

 

// (c) 2010–2012 Jeremy Ashkenas, DocumentCloud Inc.

// Backbone darf unter der MIT-Lizenz frei verbreitet werden.

// Für alle Details und Dokumentation:

// http://backbonejs.org

(Funktion() {

 

  // Erstelle ein globales Objekt, dargestellt als Fensterobjekt im Browser und als globales Objekt in Node.js

  var root = this;

 

  // Den Wert der Variable „Backbone“ speichern, bevor er überschrieben wurde

  // Wenn ein Namenskonflikt vorliegt oder die Spezifikation berücksichtigt wird, können Sie die Methode Backbone.noConflict() verwenden, um den Wert der Variablen wiederherzustellen, bevor sie von Backbone belegt wurde, und das Backbone-Objekt zum Umbenennen zurückzugeben

  var previousBackbone = root.Backbone;

 

  //Zwischenspeichern der Slice- und Splice-Methoden in Array.prototype in lokalen Variablen zum Aufrufen

  var Slice = Array.prototype.slice;

  var splice = Array.prototype.splice;

 

  var Rückgrat;

  if( Art der Exporte !== 'undefiniert') {

    Rückgrat = Exporte;

  } anders {

    Backbone = root.Backbone = {};

  }

 

  //Backbone-Version definieren

  Backbone.VERSION = '0.9.2';

 

  // Underscore automatisch in die Serverumgebung importieren. Einige Methoden in Backbone hängen von Underscore ab oder erben von diesem.

  var _ = root._;

  if(!_ && ( typeof require !== 'undefiniert'))

    _ = require('underscore');

 

  // Definieren Sie die Bibliothek eines Drittanbieters als einheitliche Variable „$“, die zum Aufrufen von Methoden in der Bibliothek während der Ansicht (View), der Ereignisverarbeitung und der Synchronisierung mit Serverdaten (Sync) verwendet wird.

  // Zu den unterstützten Bibliotheken gehören jQuery, Zepto usw. Sie haben die gleiche Syntax, aber Zepto eignet sich besser für die mobile Entwicklung. Es richtet sich hauptsächlich an Webkit-Kernbrowser.

  // Sie können auch eine benutzerdefinierte Bibliothek mit einer jQuery-ähnlichen Syntax für die Verwendung durch Backbone anpassen (manchmal benötigen wir möglicherweise eine angepasste Version, die leichter als jQuery oder Zepto ist).

  // Das hier definierte „$“ ist eine lokale Variable und hat daher keinen Einfluss auf die normale Verwendung von Bibliotheken von Drittanbietern außerhalb des Backbone-Frameworks.

  var $ = root.jQuery ||. root.Zepto ||.

 

  // Bibliotheken von Drittanbietern manuell einrichten

  // Wenn Sie vor dem Import von Backbone keine Bibliothek eines Drittanbieters importiert haben, können Sie die lokale Variable „$“ über die Methode setDomLibrary festlegen

  // Die setDomLibrary-Methode wird häufig auch zum dynamischen Importieren benutzerdefinierter Bibliotheken in Backbone verwendet.

  Backbone.setDomLibrary = function(lib) {

    $ = lib;

  };

  // Geben Sie die Benennung des Frameworks nach „Backbone“ auf und geben Sie das Backbone-Objekt zurück. Dies wird im Allgemeinen verwendet, um Namenskonflikte zu vermeiden oder Benennungsmethoden zu standardisieren

  // Zum Beispiel:

  // var bk = Backbone.noConflict(); // Brechen Sie die Benennung „Backbone“ ab und speichern Sie das Backbone-Objekt in der bk-Variablen

  // console.log(Backbone); // Diese Variable kann nicht mehr auf das Backbone-Objekt zugreifen und wird auf den Wert vor der Definition von Backbone zurückgesetzt.

  // var MyBackbone = bk; // Und bk speichert das Backbone-Objekt, wir benennen es in MyBackbone um

  Backbone.noConflict = function() {

    root.Backbone = previousBackbone;

    gib dies zurück;

  };

  // Für Browser, die REST nicht unterstützen, können Sie Backbone.emulateHTTP = true setzen

  // Die Serveranforderung wird im POST-Modus gesendet und der Parameter _method wird zu den Daten hinzugefügt, um den Operationsnamen zu identifizieren. Außerdem werden die Headerinformationen X-HTTP-Method-Override gesendet.

  Backbone.emulateHTTP = false;

 

  // Für Browser, die die Anwendungs-/JSON-Codierung nicht unterstützen, können Sie Backbone.emulateJSON = true;

  // Setzen Sie den Anforderungstyp auf application/x-www-form-urlencoded und platzieren Sie die Daten im Modellparameter, um Kompatibilität zu erreichen

  Backbone.emulateJSON = false;

 

  // Backbone.Events im Zusammenhang mit benutzerdefinierten Ereignissen

  // -------------------

 

  // eventSplitter gibt die Parsing-Regeln für Ereignisnamen bei der Verarbeitung mehrerer Ereignisse an.

  var eventSplitter = /s /;

 

  // Benutzerdefinierter Event-Manager

  // Durch die Bindung ereignisbezogener Methoden im Objekt ist es möglich, benutzerdefinierte Ereignisse zum Objekt hinzuzufügen, zu löschen und auszulösen.

  var Events = Backbone.Events = {

 

    // Benutzerdefinierte Ereignisse und Rückruffunktionen an das aktuelle Objekt binden

    // Das Kontextobjekt in der Rückruffunktion ist der angegebene Kontext. Wenn der Kontext nicht festgelegt ist, wird als Kontextobjekt standardmäßig das Objekt des aktuell gebundenen Ereignisses verwendet.

    // Diese Methode ähnelt der addEventListener-Methode in DOM Level2

    // events ermöglicht die Angabe mehrerer Ereignisnamen, getrennt durch Leerzeichen (z. B. Leerzeichen, Tabulatoren usw.)

    // Wenn der Ereignisname „all“ ist und ein Ereignis durch Aufrufen der Trigger-Methode ausgelöst wird, werden alle im „all“-Ereignis gebundenen Rückruffunktionen aufgerufen.

    on: Funktion(Ereignisse, Rückruf, Kontext) {

      //Definieren Sie lokale Variablen, die in einigen Funktionen verwendet werden

      var-Aufrufe, Ereignis, Knoten, Schwanz, Liste;

      //Die Callback-Funktion muss festgelegt werden

      if(!callback)

        gib dies zurück;

      // Ereignisnamen über eventSplitter analysieren, mit Split mehrere Ereignisnamen in ein Array aufteilen

      // Verwenden Sie im Allgemeinen Leerzeichen, um mehrere Ereignisnamen anzugeben

      events = events.split(eventSplitter);

      // Aufrufe zeichnen die Liste der im aktuellen Objekt gebundenen Ereignisse und Rückruffunktionen auf

      ruft = this._callbacks ||. (this._callbacks = {});

 

      // Durchlaufen Sie die Liste der Ereignisnamen und speichern Sie die Ereignisnamen vom Anfang bis zum Ende in der Ereignisvariablen.

      while( event = events.shift()) {

        // Holen Sie sich die Rückruffunktion, die an das Ereignisereignis gebunden wurde

        // list speichert die Liste der Rückruffunktionen, die an einen einzelnen Ereignisnamen gebunden sind

        // Die Funktionsliste wird nicht in einem Array gespeichert, sondern ist sequentiell über die nächsten Attribute mehrerer Objekte verknüpft.

        /**数据格式如:

         * {

         * Schwanz: {Objekt},

         *   nächste: {

         * Rückruf: {Funktion},

         * Kontext: {Objekt},

         *     nächste: {

         * Rückruf: {Funktion},

         * Kontext: {Objekt},

         * weiter: {Objekt}

         * }

         * }

         * }*/

        // Das nächste Objekt auf jeder Ebene der Liste speichert Informationen zu einem Rückrufereignis (Funktionskörper, Kontext und nächstes Rückrufereignis).

        // Die oberste Ebene der Ereignisliste speichert ein Endobjekt, das die Kennung des letzten gebundenen Rückrufereignisses speichert (dasselbe Objekt wie das nächste des letzten Rückrufereignisses).

        // Anhand der Endkennung können Sie beim Durchlaufen der Rückrufliste erkennen, dass die letzte Rückruffunktion erreicht wurde

        list = Anrufe[Ereignis];

        // Die Knotenvariable wird zum Aufzeichnen von Informationen zu dieser Rückruffunktion verwendet.

        //tail speichert nur die Kennung der zuletzt gebundenen Callback-Funktion

        // Wenn die Rückruffunktion zuvor gebunden wurde, weisen Sie daher den vorherigen Schwanz dem Knoten als Objekt zu und erstellen Sie dann einen neuen Objektbezeichner für den Schwanz

        // Der Grund, warum dieses Rückrufereignis zum Endobjekt des vorherigen Rückrufs hinzugefügt wird, besteht darin, die Objekthierarchie der Rückruffunktionsliste in der Bindungsreihenfolge anzuordnen (das neueste gebundene Ereignis wird unten platziert).

        node = list ? list.tail : {};

        node.next = tail = {};

        //Zeichnen Sie den Funktionskörper und die Kontextinformationen dieses Rückrufs auf

        node.context = context;

        node.callback = Rückruf;

        // Die Rückrufliste des aktuellen Ereignisses neu zusammenstellen. Dieses Rückrufereignis wurde der Liste hinzugefügt

        Aufrufe[Ereignis] = {

          Schwanz: Schwanz,

          next: Liste? list.next: Knoten

        };

      }

      // Das aktuelle Objekt zurückgeben, um Methodenkettenaufrufe zu erleichtern

      gib dies zurück;

    },

    // Gebundene Ereignisse oder Rückruffunktionen im Objekt entfernen Sie können die Ereignisse oder Rückruffunktionen, die gelöscht werden müssen, nach Ereignissen, Rückruf und Kontext filtern.

    // – Wenn der Kontext leer ist, alle durch den Rückruf angegebenen Funktionen entfernen

    // – Wenn der Rückruf leer ist, alle Rückruffunktionen im Ereignis entfernen

    // – Wenn „events“ leer ist, aber Callback oder Kontext angegeben ist, entfernen Sie die durch Callback oder Kontext angegebene Callback-Funktion (Ereignisnamen werden nicht unterschieden).

    // – Wenn keine Parameter übergeben werden, entfernen Sie alle im Objekt gebundenen Ereignisse und Rückruffunktionen

    aus: Funktion(Ereignisse, Rückruf, Kontext) {

      var-Ereignis, Aufrufe, Knoten, Schwanz, cb, ctx;

 

      // Keine Ereignisse oder *alle* Ereignisse entfernen.

      //An das aktuelle Objekt sind keine Ereignisse gebunden

      if(!(calls = this._callbacks))

        zurückkehren;

      // Wenn keine Parameter angegeben sind, entfernen Sie alle Ereignisse und Rückruffunktionen (entfernen Sie das _callbacks-Attribut).

      if(!(events || callback || context)) {

        lösche dies._callbacks;

        gib dies zurück;

      }

 

      // Analysieren Sie die Ereignisliste, die entfernt werden muss

      // – Wenn Ereignisse angegeben sind, wird der Ereignisname gemäß eventSplitter analysiert

      // – Wenn keine Ereignisse angegeben sind, analysieren Sie die Namensliste aller gebundenen Ereignisse

      events = events ? events.split(eventSplitter) : _.keys(calls);

 

      // Namensliste für Schleifenereignisse

      while( event = events.shift()) {

        // Das aktuelle Ereignisobjekt aus der Liste entfernen und in der Knotenvariablen zwischenspeichern

        node = ruft[Ereignis] auf;

        Anrufe löschen[Ereignis];

        // Wenn das aktuelle Ereignisobjekt nicht vorhanden ist (oder keine Entfernungsfilterbedingungen angegeben sind, wird davon ausgegangen, dass das aktuelle Ereignis und alle Rückruffunktionen entfernt werden), beenden Sie diesen Vorgang (das Ereignisobjekt wurde im vorherigen Schritt entfernt). )

        if(!node || !(callback || context))

          weitermachen;

        // Eine neue Liste erstellen und die angegebenen Rückrufe weglassen.

        // Bauen Sie gemäß den Bedingungen der Rückruffunktion oder des Kontextfilters ein neues Ereignisobjekt zusammen und binden Sie es erneut

        tail = node.tail;

        // Alle Rückrufobjekte im Ereignis durchlaufen

        while(( node = node.next) !== tail) {

          cb = node.callback;

          ctx = node.context;

          // Basierend auf der Rückruffunktion und dem Kontext in den Parametern die Rückruffunktion filtern und die Rückruffunktion, die die Filterbedingungen nicht erfüllt, erneut an das Ereignis binden (da oben alle Rückruffunktionen im Ereignis entfernt wurden)

          if((callback && cb !== callback) || (context && ctx !== context)) {

            this.on(event, cb, ctx);

          }

        }

      }

 

      gib dies zurück;

    },

    // Ein oder mehrere definierte Ereignisse auslösen und die gebundene Rückruffunktionsliste nacheinander ausführen

    Auslöser: Funktion(Ereignisse) {

      var event, node,calls, tail, args, all, rest;

      //An das aktuelle Objekt sind keine Ereignisse gebunden

      if(!(calls = this._callbacks))

        gib dies zurück;

      // Die in der Callback-Funktionsliste gebundene Ereignisliste „all“ abrufen

      all = ruft.all auf;

      // Analysieren Sie den Ereignisnamen, der ausgelöst werden muss, gemäß den EventSplitter-Regeln in einem Array

      events = events.split(eventSplitter);

      // Zeichnen Sie die Parameter des Triggers von der zweiten bis zur restlichen Variablen auf, die wiederum an die Rückruffunktion übergeben werden.

      rest = Slice.call(Argumente, 1);

 

      // Durchlaufe die Liste der Ereignisse, die ausgelöst werden müssen

      while( event = events.shift()) {

        // Die Knotenvariable zeichnet hier eine Liste aller Callback-Funktionen des aktuellen Ereignisses auf

        if( Knoten = Aufrufe[Ereignis]) {

          //Die Tail-Variable zeichnet die Objekt-ID des letzten Bindungsereignisses auf

          tail = node.tail;

          //Der Wert der Knotenvariablen wird dem gebundenen einzelnen Callback-Ereignisobjekt der Reihe nach entsprechend der Bindungsreihenfolge des Ereignisses zugewiesen.

          // Die nächste Eigenschaft des letzten gebundenen Ereignisses bezieht sich auf dasselbe Objekt wie tail und wird als Grundlage für die Beurteilung verwendet, ob das Ende der Liste erreicht wurde.

          while(( node = node.next) !== tail) {

            // Alle gebundenen Ereignisse ausführen und die Parameter beim Aufruf des Triggers an die Callback-Funktion übergeben

            node.callback.apply(node.context || this, rest);

          }

        }

        // Die Variable all zeichnet das „all“-Ereignis während der Bindung auf, d. h. wenn ein beliebiges Ereignis aufgerufen wird, wird die Rückruffunktion im „all“-Ereignis ausgeführt.

        // – Die Rückruffunktionen im „all“-Ereignis werden unabhängig von der Bindungsreihenfolge nacheinander ausgeführt, nachdem alle Rückruffunktionslisten des aktuellen Ereignisses ausgeführt wurden.

        // – Das „all“-Ereignis sollte automatisch aufgerufen werden, wenn ein normales Ereignis ausgelöst wird. Wenn das „all“-Ereignis ausgelöst werden muss, wird die Rückruffunktion im Ereignis zweimal ausgeführt.

        if(Knoten = alle) {

          tail = node.tail;

          //Der Unterschied zum Aufruf der Rückruffunktion eines normalen Ereignisses besteht darin, dass das All-Ereignis den aktuell aufgerufenen Ereignisnamen als ersten Parameter an die Rückruffunktion übergibt.

          args = [event].concat(rest);

          // Durchlaufen und Ausführen der Callback-Funktionsliste im „all“-Ereignis

          while(( node = node.next) !== tail) {

            node.callback.apply(node.context || this, args);

          }

        }

      }

 

      gib dies zurück;

    }

  };

 

  // Aliase für Bindungsereignisse und Release-Ereignisse, auch aus Kompatibilitätsgründen mit früheren Versionen von Backbone

  Events.bind = Events.on;

  Events.unbind = Events.off;

 

  // Backbone.Model Datenobjektmodell

  //-------------

 

  // Model ist die Basisklasse aller Datenobjektmodelle in Backbone und wird zum Erstellen eines Datenmodells verwendet

  // @param {Object}-Attribute geben die Initialisierungsdaten beim Erstellen des Modells an

  // @param {Object}-Optionen

  /*** @format-Optionen

   * {

   * analysieren: {Boolean},

   * Sammlung: {Collection}

   * }*/

  var Model = Backbone.Model = function(attributes, options) {

    // Die Standardvariable wird zum Speichern der Standarddaten des Modells verwendet

    var-Standardwerte;

    // Wenn der Attribute-Parameter nicht angegeben ist, setzen Sie Attribute auf ein leeres Objekt

    Attribute ||. (Attribute = {});

    //Legen Sie die Analysemethode für Attributstandarddaten fest. Die Standarddaten werden beispielsweise vom Server abgerufen (oder die Originaldaten liegen im XML-Format vor, um mit dem für die festgelegte Methode erforderlichen Datenformat kompatibel zu sein). -Methode kann zum Parsen verwendet werden.

    if(Optionen && Optionen.parse)

      attributes = this.parse(attributes);

    if( defaults = getValue(this, 'defaults')) {

      // Wenn das Modell bei der Definition Standarddaten festlegt, verwenden die Initialisierungsdaten die mit den Standardeinstellungen und Attributparametern zusammengeführten Daten (die Daten in den Attributen überschreiben die Daten mit demselben Namen in den Standardeinstellungen).

      attributes = _.extend({}, defaults, attributes);

    }

    // Geben Sie explizit das Sammlungsobjekt an, zu dem das Modell gehört (beim Aufrufen der Add-, Push- und anderer Methoden der Sammlung, um das Modell zur Sammlung hinzuzufügen, wird das Sammlungsobjekt, zu dem das Modell gehört, automatisch festgelegt.)

    if(Optionen && Optionen.Sammlung)

      this.collection = options.collection;

    //Das Attribut attributes speichert die JSON-objektivierten Daten des aktuellen Modells und ist beim Erstellen des Modells standardmäßig leer.

    this.attributes = {};

    // Definieren Sie das Cache-Objekt _escapedAttributes, das über die Escape-Methode verarbeitete Daten zwischenspeichert

    this._escapedAttributes = {};

    // Konfigurieren Sie für jedes Modell eine eindeutige Kennung

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

    //Definieren Sie eine Reihe von Objekten, die zum Aufzeichnen des Datenstatus verwendet werden. Bitte beachten Sie die Kommentare beim Definieren des Objekts für spezifische Bedeutungen.

    this.changed = {};

    this._silent = {};

    this._pending = {};

    // Beim Erstellen einer Instanz Initialisierungsdaten festlegen. Wenn Sie den Silent-Parameter zum ersten Mal verwenden, wird das Änderungsereignis nicht ausgelöst.

    this.set(Attribute, {

      still: wahr

    });

    // Die Initialisierungsdaten wurden oben festgelegt. Der Status der geänderten, _silent- und _pending-Objekte hat sich möglicherweise hier geändert.

    this.changed = {};

    this._silent = {};

    this._pending = {};

    // Die Variable _ previousAttributes speichert eine Kopie der Modelldaten

    // Wird verwendet, um den Status abzurufen, bevor die Modelldaten im Änderungsereignis geändert werden. Die Daten des vorherigen Status können über die Methode previous oder previousAttributes abgerufen werden.

    this._ previousAttributes = _.clone(this.attributes);

    //Initialisierungsmethode initialisieren aufrufen

    this.initialize.apply(this, arguments);

  };

  // Verwenden Sie die Erweiterungsmethode, um eine Reihe von Eigenschaften und Methoden für den Modellprototyp zu definieren

  _.extend(Model.prototype, Events, {

 

    // Das geänderte Attribut zeichnet die Schlüsselsammlung der geänderten Daten jedes Mal auf, wenn die Set-Methode aufgerufen wird.

    geändert: null,

 

    // // Wenn das Silent-Attribut angegeben ist, wird das Änderungsereignis nicht ausgelöst und die geänderten Daten werden aufgezeichnet, bis das nächste Änderungsereignis ausgelöst wird.

    // Das _silent-Attribut wird verwendet, um die geänderten Daten aufzuzeichnen, wenn Silent verwendet wird

    _silent: null,

 

    _pending: null,

 

    // Das eindeutige Identifikationsattribut jedes Modells (Standard ist „id“, der Name des ID-Attributs kann durch Ändern von idAttribute angepasst werden)

    // Wenn das ID-Attribut beim Festlegen der Daten enthalten ist, überschreibt die ID die ID des Modells.

    // Die ID wird verwendet, um das Modell in der Sammlung zu finden und zu identifizieren. Bei der Kommunikation mit der Backend-Schnittstelle wird die ID auch als Kennung eines Datensatzes verwendet.

    idAttribute: 'id',

 

    // Modellinitialisierungsmethode, die automatisch aufgerufen wird, nachdem das Modell erstellt wurde

    initialisieren: function() {

    },

    // Eine Kopie der Daten im aktuellen Modell zurückgeben (JSON-Objektformat)

    toJSON: Funktion(Optionen) {

      return _.clone(this.attributes);

    },

    // Rufen Sie den Datenwert im Modell anhand des attr-Attributnamens ab

    get: function(attr) {

      return this.attributes[attr];

    },

    // Entsprechend dem attr-Attributnamen den Datenwert im Modell abrufen. Die im Datenwert enthaltenen HTML-Sonderzeichen werden in HTML-Entitäten umgewandelt, einschließlich &