JavaScript - Vantaggi dell'oggetto letterale

Question

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

Qualcuno può spiegare quali sono i vantaggi dell'oggetto letterale con esempi, perché non capisco finora.

Grazie

Answer 1

Come ha detto Russ Cam, eviti di inquinare lo spazio dei nomi globale, che è molto importante in questi giorni di combinazione di script da più posizioni (TinyMCE, ecc.).

Come diceva Alex Sexton, è anche una buona organizzazione del codice.

Se stai usando questa tecnica, suggerirei di usare il modello del modulo. Questo utilizza ancora valori letterali oggetto, ma come valore di ritorno 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 è racchiusa in tutte le tue funzioni, quindi la chiami immediatamente e memorizzi il suo valore di ritorno. Vantaggi:

• Le funzioni sono dichiarate normalmente e quindi hanno nomi . (Considerando che con il formato {name: function () {...}} , tutte le tue funzioni sono anonime, anche se le proprietà a cui fanno riferimento hanno nomi.) I nomi aiutano gli strumenti che ti aiutano, dal mostrare chiama stack in un debugger, per dirti 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 inferire il nome di una funzione. Uno di questi è quando la funzione è assegnata a una proprietà come nella nostra {name: function () {...}} . Quindi, poiché i motori implementano ES6, questo motivo sparirà.)
• 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 di scoping.
• Semplifica la restituzione di funzioni diverse a seconda dell'ambiente, se l'implementazione cambia completamente (come roba IE-vs-W3C, SVG vs. Canvas, ecc.).

Esempio di restituzione di 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

L'uso di un oggetto letterale (a.k.a. modello letterale oggetto) non inquinerà lo spazio dei nomi globale così gravemente come l'utilizzo di molte funzioni dichiarate a livello globale, e aiuta anche a organizzare il codice in modo logico

Ad esempio, questo oggetto letterale

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

rispetto a

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

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

obj.doSomething();

Answer 3

Rebecca Murphey ha tenuto un discorso su Object Literals alla conferenza jQuery di quest'anno. Uno dei migliori motivi per usarli è semplicemente una buona organizzazione del codice.

Ecco la scrittura di Rebecca sul modello letterale dell'oggetto: http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

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

Le funzioni non inquinano lo spazio dei nomi come qualcuno menzionato sopra non più dei letterali di oggetti.

Potresti facilmente scrivere un letterale come

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

che sarebbe inquinante creando molti oggetti globali uguali alle funzioni. allo stesso modo potresti 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 non crei ancora un sacco di oggetti globali.

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

Possono essere lenti sebbene ogni volta che crei un'istanza dell'oggetto tutti i suoi metodi siano duplicati. Comprendo che non è il caso del prototipo in quanto hai una copia dei metodi e i nuovi oggetti espongono semplicemente il prototipo.

Potrei sbagliarmi ovviamente ...