JavaScript - Avantages de l'objet littéral

Question

J'ai lu que plutôt que d'écrire simplement un tas de fonctions, je devrais utiliser l'objet littéral. Est-ce que quelqu'un peut expliquer quels sont les avantages de l'objet littéral avec des exemples, parce que je ne comprends pas jusqu'à présent.

Merci

Answer 1

Comme Russ Cam a dit, vous évitez de polluer l'espace de nommage global, ce qui est très important dans ces jours de combiner des scripts à partir de plusieurs endroits (TinyMCE, etc.). Comme l'a dit Alex Sexton, cela permet également une bonne organisation du code.

Si vous utilisez cette technique, je suggère d'utiliser le modèle de module. Celui-ci utilise encore littéraux d'objet, mais comme la valeur de retour d'une fonction de cadrage:

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

Usage externe:

MyThingy.doSomethingCool(); 

La fonction de cadrage est enroulé autour de toutes vos fonctions, puis vous l'appelez immédiatement et stocker sa valeur de retour. Avantages:

• Les fonctions sont normalement déclarées et ont donc noms. (Alors qu'avec le format {name: function() { ... }}, toutes vos fonctions sont anonymes, même si les propriétés qui les référencent ont des noms.) Les outils d'aide aux noms vous aident, depuis l'affichage des piles d'appels dans un débogueur jusqu'à la fonction qui déclenche une exception. (Mise à jour 2015: La dernière spécification JavaScript, ECMAScript 6ème édition, définit un grand nombre de façons dont le moteur JavaScript doit infer le nom d'une fonction, notamment lorsque la fonction est affectée à une propriété comme dans notre exemple {name: function() { ... }}. les moteurs implémentent ES6, cette raison disparaîtra.)
• Vous donne la liberté d'avoir des fonctions privées utilisées uniquement par votre module (par exemple mon internalSomething ci-dessus). Aucun autre code sur la page ne peut appeler ces fonctions; ils sont vraiment privés. Seuls ceux que vous exportez à la fin, dans l'instruction return, sont visibles en dehors de la fonction de portée.
• Facilite le retour de différentes fonctions en fonction de l'environnement, si l'implémentation change juste complètement (comme IE-vs-W3C, SVG ou Canvas, etc.).

Exemple de retour différentes fonctions:

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

Utilisation d'un littéral objet (objet aka modèle littéral) ne pollueront pas l'espace de noms global aussi sévèrement que l'utilisation de nombreuses fonctions déclarées à l'échelle mondiale va, et contribue également à organiser le code d'une manière logique

Pour par exemple, cet objet littéral

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

par rapport à

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

va créer une seule propriété sur l'objet global par rapport à trois. Vous pouvez ensuite utiliser facilement les fonctions comme si

obj.doSomething(); 

Answer 3

Rebecca Murphey a fait un exposé sur littéraux d'objet lors de la conférence de cette année jQuery. L'une des meilleures raisons de les utiliser est simplement une bonne organisation du code.

Voici l'écriture de Rebecca sur l'objet littérales Motif: http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

Ive toujours utilisé littéraux d'objet parce qu'ils sont une façon claire pour organiser le code. C'est pourquoi je n'aime pas les prototypes, c'est trop compliqué.

Les fonctions ne polarisent pas l'espace de nom en tant que personne mentionnée ci-dessus, pas plus que les littéraux d'objet.

Vous pouvez facilement écrire un littéral comme

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

qui en créant beaucoup polluer d'objets globaux même les mêmes que les fonctions. De même, vous pouvez faire:

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

qui ne serait pas créer ces objets globaux (tout est un objet JS)

cette façon, vous ne créez pas encore les charges d'objets globaux.

À mon avis, les littéraux d'objets ont deux avantages. Un qu'ils sont utilisés par de nombreux plugins tels que jQuery afin que les gens sont familiers et ils sont faciles à lire. Les rendant faciles à passer à travers les données dans un plugin. Il est facile de créer des méthodes publiques et privées ....

Ils peuvent être lents, car chaque fois que vous créez une instance de l'objet, toutes ses méthodes sont dupliquées. Je crois comprendre que ce n'est pas le cas avec le prototype car vous avez une copie des méthodes et les nouveaux objets réfèrent simplement au prototype.

Je pourrais me tromper bien sûr ...