2012-08-16 3 views
7

Ich bin moderate Ebene Javascript Entwickler, der versucht zu verstehen, wie Backbone-Bibliothek intern arbeiten und wird zutiefst schätzen, wenn mir jemand helfen, einige Herausforderungen zu lösen.erklären Rückgrat Objekt und Klasse Erstellungsmuster

so hier ist, was ich

grundlegende Definition Konstruktorfunktion in Backbone verstehen ist

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

dann verwenden sie für allgemeine Zwecke Verfahren verlängern gemeinsame Merkmale in Prototyp unseres Konstruktor hinzuzufügen.

_.extend(Backbone.Model.prototype, Backbone.Events, {...}) 

jetzt bis zu diesem Teil weiß, dass ich genau das, was passiert ist, und würde gerne neues Objekt instanziiert obwohl Code folgenden

var user = new Backbone.Model() 

und das ist der Teil i anspruchs

bin zu finden Natürlich ist es nicht die Art, wie wir ein Objekt in Backbone instanziieren, aber wir verwenden die extend-Methode

var Users = Backbone.Model.extend({}); 
var user = new Users() 

und in Backbone-Code

Backbone.Model.extend = extend; 

var extend = function(protoProps, classProps) { 
     var child = inherits(this, protoProps, classProps); 
     child.extend = this.extend; 
     return child; 
}; 

var inherits = function(parent, protoProps, staticProps) { 
    var child; 
    if (protoProps && protoProps.hasOwnProperty('constructor')) { 
     child = protoProps.constructor; 
    } else { 
     child = function() { 
      return parent.apply(this, arguments); 
     }; 
    } 
    _.extend(child, parent); 
    ctor.prototype = parent.prototype; 
    child.prototype = new ctor(); 
    if (protoProps) _.extend(child.prototype, protoProps); 
    if (staticProps) _.extend(child, staticProps); 
    child.prototype.constructor = child; 
    child.__super__ = parent.prototype; 
    return child; 
}; 

mir bitte erklären, was Funktion innerhalb erben geschieht und was ist der Nutzen der extend Funktion der Mitglieder (Funktionen und Eigenschaften) von der zweiten übergeht Methode Ansatz

+0

Backbone hat Quelle mit Kommentaren: http://documentcloud.github.com/backbone/docs/backbone.html für die inherits Methode suchen. Sie haben eine schöne Beschreibung. – jForrest

Antwort

10

Unders verlängern Argument in die erste. Zum Beispiel:

var reciever = { 
    name: "Jonny", 
    age: 29 
}; 

var supplier: { 
    languages: [ "javascript", "actionscript" ]; 
    sayHi: function() { 
     console.log("Hi, name name is " + this.name); 
    } 
}; 

_.extend(receiver, supplier); 

Nach dem obigen Code ausgeführt wird, wird sich das Empfängerobjekt erweitert worden ist (modifiziert) und nun wie folgt aussehen:

/* 
    { 
     age: 29, 
     languages: [ "javascript", "actionscript" ], 
     name: "Jonny", 
     sayHi: <<function>> 
    } 
*/ 
console.dir(receiver); 

Beachten Sie, dass der Lieferant Objekt bleibt unverändert und das Empfängerobjekt erhält alle Eigenschaften und Funktionen vom Lieferanten. Dieser Prozess wird im Allgemeinen als mixin bezeichnet und wird verwendet, um zu vermeiden, dass Funktionen neu deklariert werden müssen (als Teil eines breiteren Programmierprinzips ist ein DRY - Don't Repeat Yourself bekannt).

Jetzt als für Model.extend Funktion des Backbone, es fungiert als factory method Sie eine Constructor-Funktion zurückkehren, die verwendet werden können, neue Instanzen des Modells mit der internen inherits Funktion macht den Großteil der Arbeit zu schaffen. Die inherits Funktion führt das Mixinkonzept einen Schritt weiter und erzeugt eine inheritance chain zwischen dem gelieferten Objekt und einem Elternteil (in diesem speziellen Fall das Backbone.Model Objekt).

Dieser erste Codeblock versucht, eine Konstruktorfunktion innerhalb des übergebenen Object-Hash zu finden; Wenn einer nicht vorhanden ist, erstellt er für Sie eine neue Konstruktorfunktion, die die übergebenen Argumente automatisch an Backbone.Modelconstructor function übergibt.

_.extend(child, parent); 

nächstes nennen wir die erweitern streichen Methode mixin alle Eigenschaften und Funktionen von der mitgelieferten Hash von Eigenschaften und Funktionen in den Konstruktor-Funktion; Dadurch wird sichergestellt, dass jede von Ihnen erstellte Instanz über eigene Daten verfügt (z. B .: Eigenschaften sind nicht statisch und werden von allen Instanzen, die Sie erstellen, gemeinsam genutzt).

ctor.prototype = parent.prototype; 
child.prototype = new ctor(); 
if (protoProps) _.extend(child.prototype, protoProps); 
if (staticProps) _.extend(child, staticProps); 
child.prototype.constructor = child; 
child.__super__ = parent.prototype; 

Dieser letzte Block ist die aufregendste und schafft eine Beziehung zwischen dem frisch erstellten Constructor-Funktion des Prototyps und der übergeordneten (Backbone.Model) den Prototyp des Objekts. Auf diese Weise enthalten alle vom Konstruktor zurückgegebenen neuen Instanzen die üblichen Backbone-Modellmethoden (dh: get und set), da sie aus der Prototypkette aufgelöst werden. Wenn Sie mehr über diesen bestimmten Codeblock erfahren möchten, ist Douglas Crockford's article on Prototypal inheritance ein großartiger Ausgangspunkt.

Der Punkt dieses Ansatzes ist, dass es können Sie einen Hash von Eigenschaften und Funktion liefern, die die resultierende Constructor Funktion als Vorlage, zum Beispiel verwenden:

var Person = Backbone.Model.extend({ 
    name: "Jon Doe", 
    sayHi: function() { 
     console.log("Hi, my name is " + this.get("name")); 
    } 
}); 

Jetzt jede Person Objekt Sie haben instanziiert sowohl eine name Eigenschaft und eine sayHi Funktion, zB:

var dave = new Person(); 
dave.sayHi(); // "Hi, my name is Jon Doe" 

dave.set("name", "Dave"); 
dave.sayHi(); // "Hi, my name is Dave" 

// You can also supply properties when invoking the constructor. 
var jimmy = new Person({ name: "Jimmy" }); 
jimmy.sayHi(); // "Hi, my name is Jimmy" 
+0

danke für wunderbare Erklärung, obwohl ich immer noch ziemlich verwirrt bin mit diesem Block des Codes 'if (ProtoProps && protoProps.hasOwnProperty ('Konstruktor')) { child = protoProps.constructor; } ' ist es nicht immer Objekt und was ist der Sinn es zu benutzen. 'else { child = function() { return Eltern.apply (this, Argumente); }; } ' und dieser Code-Block ist die gleiche wie die Rückkehr Backbone.Model (Eltern, protoProps, staticProps) die wiederum verwirrend ist als Argument Objekt was ist der Schaden bei der Verwendung nur ' Kind = function() übergeordnete Parameter haben {} ' –

+0

Wenn das definierte Backbone Ihre Konstruktorfunktion verwendet. Andernfalls wird Backbones Modellkonstruktor verwendet. Dieser Konstruktor muss auch wissen, welche Argumente an das Objekt übergeben werden. Daher müssen Sie den Elternkonstruktor mit der Methode parent.apply aufrufen. –

Verwandte Themen