JavaScript - Ventajas del objeto literal

Question

He leído que en lugar de simplemente escribir un montón de funciones, debería usar el literal de objeto.

¿Puede alguien explicar cuáles son las ventajas del objeto literal con ejemplos, porque no entiendo hasta ahora?

Gracias

Answer 1

Como dijo Russ Cam, evita contaminar el espacio de nombres global, lo cual es muy importante en estos días de combinar scripts de múltiples ubicaciones (TinyMCE, etc.).

Como dijo Alex Sexton, también es una buena organización de código.

Si está utilizando esta técnica, sugeriría usar el patrón del módulo. Esto todavía usa literales de objetos, pero como el valor de retorno de una función de alcance:

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 externo:

MyThingy.doSomethingCool();

La función de alcance se ajusta a todas sus funciones, y luego la llama de inmediato y almacena su valor de retorno. Ventajas:

• Las funciones se declaran normalmente y, por lo tanto, tienen nombres . (Mientras que con el formato {name: function () {...}} , todas sus funciones son anónimas, aunque las propiedades que las mencionan tienen nombres.) Las herramientas de ayuda de nombres le ayudan a mostrar llame a las pilas en un depurador, para decirle qué función lanzó una excepción. (Actualización de 2015: la última especificación de JavaScript, ECMAScript 6ª edición, define un gran número de formas en que el motor de JavaScript debe inferir el nombre de una función. Una de ellas es cuando la función se asigna a una propiedad como en nuestra Ejemplo de {name: function () {...}} . Por lo tanto, a medida que los motores implementan ES6, esta razón desaparecerá.)
• Le da la libertad de tener funciones privadas que solo utiliza su módulo (como mi internalSomething arriba). Ningún otro código en la página puede llamar a esas funciones; Son realmente privados. Solo los que exporta al final, en la declaración de retorno, son visibles fuera de la función de alcance.
• Facilita la devolución de diferentes funciones según el entorno, si la implementación solo cambia por completo (como IE-vs-W3C o SVG vs. Canvas, etc.).

Ejemplo de devolución de diferentes funciones:

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

El uso de un objeto literal (a.k.a. objeto patrón literal) no contaminará el espacio de nombres global tan severamente como el uso de muchas funciones declaradas globalmente, y también ayuda a organizar el código de una manera lógica

Por ejemplo, este objeto literal

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

comparado con

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

creará solo una propiedad en el objeto global en comparación con tres. A continuación, puede utilizar fácilmente las funciones como tal

obj.doSomething();

Answer 3

Rebecca Murphey hizo una charla sobre Object Literals en la Conferencia jQuery de este año. Una de las mejores razones para usarlos es simplemente una buena organización de código.

Aquí está la reseña de Rebecca sobre el Patrón Literal de Objetos: http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

Siempre he usado literales de objetos porque son una forma clara de organizar el código. Por eso no me gusta el prototipo, es demasiado desordenado.

Las funciones no contaminan el espacio de nombres como alguien mencionado anteriormente más que los literales de objetos.

Fácilmente podrías escribir un literal como

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

que se contamina creando muchos objetos globales de la misma forma que las funciones. de manera similar podrías hacer:

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

que no crearía esos objetos globales (todo es un objeto en JS)

de esa manera todavía no creas cargas de objetos globales.

En mi opinión, los literales de objetos tienen dos ventajas. Uno es utilizado por muchos complementos como jQuery, por lo que las personas son más familiares y fáciles de leer. Haciéndolos fáciles de pasar a través de los datos en un complemento. Es fácil crear métodos tanto públicos como privados ...

Aunque pueden ser lentos, ya que cada vez que creas una instancia del objeto, todos sus métodos se duplican. Tengo entendido que ese no es el caso con el prototipo, ya que tiene una copia de los métodos y los nuevos objetos simplemente hace referencia al prototipo.

Podría estar equivocado, por supuesto ...