JavaScript - Vantaggi dell'oggetto letterale

Question

Ho letto che invece di scrivere semplicemente un po 'di funzioni, dovrei usare l'oggetto letterale.

Qualcuno può spiegare quali sono i vantaggi dell'oggetto letterale con gli esempi, perché non ho capito fino ad ora.

Grazie

Answer 1

Come ha detto Russ Cam, si evita di inquinare il namespace globale, che è molto importante in questi giorni di combinazione di script da più postazioni (TinyMCE, ecc).

Come ha detto Alex Sexton, rende anche buona organizzazione del codice.

Se si utilizza questa tecnica, suggerirei di utilizzare il modello del modulo. Questo utilizza ancora letterali oggetto, ma come valore restituito da una funzione di scoping:

var MyThingy = (function() { 

    function doSomethingCool() { 
     ... 
    } 

    function internalSomething() { 
     .... 
    } 

    function anotherNiftyThing() { 
     // Note that within the scoping function, functions can 
     // call each other direct. 
     doSomethingCool(); 
     internalSomething(); 
    } 

    return { 
     doSomethingCool: doSomethingCool, 
     anotherNiftyThing: anotherNiftyThing 
    }; 
})(); 

Uso esterno:

MyThingy.doSomethingCool(); 

La funzione di scoping è avvolto intorno a tutte le funzioni, e quindi si chiama subito e memorizza il suo valore di ritorno. Vantaggi:

• funzioni sono dichiarate normalmente e quindi hanno nomi. (Mentre con il formato {name: function() { ... }}, tutte le funzioni sono anonime, anche se le proprietà che le fanno riferimento hanno nomi.) I nomi degli strumenti di aiuto aiutano a visualizzare quale stack di chiamate in un debugger ti dice quale funzione ha generato un'eccezione. (Aggiornamento 2015: l'ultima specifica JavaScript, ECMAScript 6a edizione, definisce un gran numero di modi in cui il motore JavaScript deve dedurre il nome di una funzione. Uno di questi è quando la funzione viene assegnata a una proprietà come nell'esempio {name: function() { ... }}. motori implementano ES6, questo motivo andrà via.)
• Ti dà la libertà di avere funzioni private utilizzate solo dal tuo modulo (come il mio internalSomething sopra). Nessun altro codice sulla pagina può chiamare quelle funzioni; sono veramente privati. Solo quelli che esporti alla fine, nell'istruzione return, sono visibili al di fuori della funzione scoping.
• Consente di restituire diverse funzioni in base all'ambiente, se l'implementazione cambia completamente (ad esempio materiale IE-vs-W3C o SVG o Canvas, ecc.).

Esempio di restituzione diverse funzioni:

var MyUtils = (function() { 
    function hookViaAttach(element, eventName, handler) { 
     element.attachEvent('on' + eventName, handler); 
    } 

    function hookViaListener(element, eventName, handler) { 
     element.addEventListener(eventName, handler, false); 
    } 

    return { 
     hook: window.attachEvent ? hookViaAttach : hookViaListener 
    }; 
})(); 

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */); 

Answer 2

utilizzare un oggetto letterale (aka modello oggetto letterale) non inquinare il namespace globale così severamente come utilizzare molte funzioni dichiarate a livello globale sarà, e aiuta anche ad organizzare il codice in modo logico

Per esempio, questo oggetto letterale

var obj = { 
       find : function(elem) { /* find code */ }, 
       doSomething: function() { /* doSomething code */ }, 
       doSomethingElse: function() { /* doSomethingElse code */ } 
      } 

confrontato

function find(elem) { /* find code */ }, 
function doSomething() { /* doSomething code */ }, 
function doSomethingElse() { /* doSomethingElse code */ } 

creerà solo una proprietà sull'oggetto globale rispetto a tre. È quindi possibile utilizzare facilmente le funzioni in questo modo

obj.doSomething(); 

Answer 3

Rebecca Murphey ha fatto un discorso sul letterali oggetto alla conferenza jQuery di quest'anno. Uno dei migliori motivi per usarli è semplicemente una buona organizzazione del codice.

Ecco scrittura di Rebecca sul Motivo ornamentale Oggetto Letterale: http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

Ho sempre usato letterali oggetto perché sono un modo chiaro per organizzare codice. Ecco perché non mi piace il prototipo, è troppo disordinato.

Le funzioni non indicano lo spazio dei nomi come qualcuno menzionato sopra più di un oggetto letterale.

si potrebbe facilmente scrivere un letterale come

var obj = {} 
var find = function(elem) { /* find code */ }, 
var doSomething = function() { /* doSomething code */ }, 
var doSomethingElse = function() { /* doSomethingElse code */ } 

che inquinare con la creazione di un sacco di oggetti globali lo stesso lo stesso come le funzioni. Allo stesso modo si potrebbe fare:

(function() { 
function find(elem) { /* find code */ }, 
function doSomething() { /* doSomething code */ }, 
function doSomethingElse() { /* doSomethingElse code */ } 
})(); 

che non creerebbe quegli oggetti globali (tutto è un oggetto in JS)

in questo modo ancora non si crea carichi di oggetti globali.

A mio parere, gli oggetti letterali hanno due vantaggi. Uno sono utilizzati da molti plugin come jQuery, quindi le persone sono più familiari e sono facili da leggere. Rendendoli facili da passare attraverso i dati in un plugin. È facile creare metodi sia pubblici che privati ​​....

Possono essere lenti anche se ogni volta che si crea un'istanza dell'oggetto tutti i suoi metodi sono duplicati. Ho capito che non è il caso del prototipo in quanto si dispone di una copia dei metodi e i nuovi oggetti fanno semplicemente riferimento al prototipo.

Ovviamente potrei sbagliarmi ...