spiegare l'oggetto backbone e il modello di creazione della classe

Question

Sono uno sviluppatore javascript di livello moderato che sta cercando di capire come la libreria backbone funziona internamente e apprezzerà profondamente se qualcuno mi aiuta a risolvere alcune sfide.

ecco quello che ho capito

definizione di base di funzione di costruzione di backbone è

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

poi uso generale metodo extend per aggiungere caratteristiche comuni nel prototipo del nostro costruttore.

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

ora fino a questa parte io so esattamente che cosa sta accadendo e sarebbe felice di istanziare nuovo oggetto se seguente codice

var user = new Backbone.Model() 

e questa è la parte mi sto trovando difficile

naturalmente non è il modo in cui istanziamo un oggetto in Backbone ma usiamo il metodo di estensione

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

e nel codice dorsale

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; 
}; 

si prega di spiegare a me che cosa sta accadendo all'interno funzione di ereditare e che cosa è il vantaggio di estendere l'approccio metodo

Answer 1

funzione di sottolineatura extend fonde i membri (funzioni e proprietà) a partire dalla seconda argomento nel primo. Per esempio:

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

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

_.extend(receiver, supplier); 

Dopo l'esecuzione del codice di cui sopra, l'oggetto ricevente sarà stata aumentata (modificato) e ora questo aspetto:

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

Nota che l'oggetto fornitore non vengano apportate modifiche e l'oggetto ricevente ottiene tutte le proprietà e le funzioni dal fornitore. Questo processo viene comunemente indicato come mixin e viene utilizzato per evitare di dover ridichiarare le funzioni (come parte di un più ampio principio di programmazione noto allo DRY - Don't Repeat Yourself).

Ora, come per la funzione di Backbone Model.extend, agisce come un factory method per restituire una funzione di costruzione che può essere usato per creare nuove istanze del modello con la funzione interna inherits fare il grosso del lavoro. La funzione inherits prende il concetto di mixin un ulteriore passo avanti e crea uno inheritance chain tra l'oggetto fornito e un genitore (in questo caso particolare, l'oggetto Backbone.Model).

var child; 
if (protoProps && protoProps.hasOwnProperty('constructor')) { 
    child = protoProps.constructor; 
} else { 
    child = function() { 
     return parent.apply(this, arguments); 
    }; 
} 

Questo primo blocco di codice sta cercando di trovare una funzione di costruzione all'interno dell'hash dell'oggetto fornito; se uno non è presente, crea una nuova funzione Costruttore per te che passa automaticamente gli argomenti forniti a constructor function proprio da Backbone.Model.

_.extend(child, parent); 

Successivo chiamiamo sottolineare di estendere metodo mixin tutte le proprietà e funzioni di hash fornito delle proprietà e funzioni nella funzione di costruzione; questo assicura che ogni istanza creata abbia i propri dati (es: le proprietà non sono statiche e condivise tra tutte le istanze che crei).

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; 

Questo blocco finale è la più emozionante e crea una relazione tra prototipo della funzione di costruzione appena creata e il genitore prototipo (Backbone.Model) dell'oggetto. In questo modo, tutte le nuove istanze restituite dal Costruttore conterranno i consueti metodi del modello backbone (ad esempio: get e set) in quanto vengono risolti dalla catena del prototipo. Se vuoi saperne di più su questo particolare blocco di codice, Douglas Crockford's article on Prototypal inheritance è un ottimo punto di partenza.

Il punto di questo approccio è che esso permette di fornire un hash di proprietà e funzione che la funzione di costruzione risultante userà come modello, ad esempio:

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

Ora ogni Person oggetto si crea un'istanza avrà sia una proprietà name e sayHi funzione, per es:

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"