JavaScript und Objektinitialisierung

Question

Ich habe beschlossen, "tiefer zu gehen" mit Javascript, und vor ECMA6 zu versuchen, ECMA5 Fähigkeiten zu meistern, und jetzt bin ich mit Objekt Erstellung und Initialisierung fest, welche Version ist besser, praktischer, besser zu lesen und so weiter. Welcher zu haften und als Grundlage zu verwenden. Also, was ich versuche:

Version 1 und ist am beliebtesten in Führungen gefunden googeln

;(function() { 
    var magic = magic || {}; 

    magic.doStuff = function() { 
     alert('Magic'); 
    }; 

    window.magic = magic; 
    document.addEventListener('DOMContentLoaded', function() { 
     magic.doStuff(); 
    }, false); 

})(); 

Version 2, ganz genauso wie die Version 1, nur ein bisschen anders Syntax

Version 3, diese ist für mich am schlechtesten, schwierige Syntax, mehr Platz für Fehler, und ich bin nicht einmal sicher, ob es richtig geschrieben ist ctly

(function() { 
    var magic = (function() { 
     magic.doStuff = function() { 
      alert('Wow!'); 
     }; 

     return magic; 
    }); 

    document.addEventListener('DOMContentLoaded', function() { 
     (new magic()).doStuff(); 
    }, false); 
})(); 

Version 4 wurde dies mir gezeigt Senioren Entwickler, nicht so in Führungen populär, oder es ist nur habe ich es nicht bemerkt, aber nach einiger Erklärung wahrscheinlich ist mein Favorit.

(function() { 
    var magic = (function() { 
     function publicDoStuff() { 
      alert('Magic'); 
     } 

     return { 
      doStuff: publicDoStuff 
     }; 
    })(); 

    document.addEventListener('DOMContentLoaded', function() { 
     magic.doStuff(); 
    }, false); 
})(); 

Answer 1

Ich mag es einfach zu halten für einfache Objekte

var magic = { 
    doStuff: function() { 
     alert('Wow!'); 
    }, 
}; 

document.addEventListener('DOMContentLoaded', function() { 
    magic.doStuff(); 
}, false); 

Wenn Sie viele Instanzen eines Objekts verwenden, dann its faster to use prototype

Magic = function() { 
}; 

Magic.prototype.doStuff = function() { 
    alert('Wow!'); 
};