JavaScript - Преимущества объектного литерала

Question

Я читал, что вместо того, чтобы просто писать кучу функций, я должен использовать объектный литерал.

Может ли кто-нибудь объяснить, в чем преимущества объектного литерала, на примерах, потому что я пока не понимаю.

Спасибо

Answer 1

Как сказал Расс Кэм, вы избегаете загрязнения глобального пространства имен, что очень важно в наши дни при объединении скриптов из нескольких местоположений (TinyMCE и т.д.).

Как сказал Алекс Секстон, это также способствует хорошей организации кода.

Если вы используете эту технику, я бы предложил использовать шаблон модуля.При этом по-прежнему используются объектные литералы, но в качестве возвращаемого значения из функции определения области видимости:

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

Наружное применение:

MyThingy.doSomethingCool();

Функция определения области действия оборачивается вокруг всех ваших функций, а затем вы немедленно вызываете ее и сохраняете возвращаемое значение.Преимущества:

• Функции объявляются обычным образом и, следовательно, имеют имена.(В то время как с {name: function() { ... }} формат, все ваши функции анонимны, даже несмотря на то, что свойства, ссылающиеся на них, имеют имена.) Инструменты справки по именам помогают вам, начиная с отображения стеков вызовов в отладчике и заканчивая сообщением о том, какая функция выдала исключение.(Обновление 2015 года:Последняя спецификация JavaScript, ECMAScript 6th edition, определяет большое количество способов, которыми движок JavaScript должен выводить имя функции.Один из них - это когда функция присваивается свойству, как в нашем {name: function() { ... }} пример.Так что по мере того, как движки внедрят ES6, эта причина исчезнет.)
• Предоставляет вам свободу использования частных функций только вашим модулем (например, my internalSomething выше).Никакой другой код на странице не может вызывать эти функции;они действительно частные.Только те, которые вы экспортируете в конце, в инструкции return, видны за пределами функции определения области видимости.
• Упрощает возврат различных функций в зависимости от среды, если реализация просто полностью меняется (например, материал IE-vs-W3C или SVG vs.Холст и т.д.).

Пример возврата различных функций:

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

Использование объектного литерала (он же.object literal pattern) не будет загрязнять глобальное пространство имен так сильно, как это может сделать использование многих функций, объявленных глобально, а также помогает организовать код логическим образом

Например, этот объектный литерал

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

по сравнению с

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

создаст только одно свойство для глобального объекта по сравнению с тремя.Затем вы можете легко использовать следующие функции

obj.doSomething();

Answer 3

Ребекка Мерфи выступила с докладом об объектных литералах на конференции jQuery в этом году.Одна из лучших причин их использования - просто хорошая организация кода.

Вот запись Ребекки о шаблоне объектного литерала : http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

Я всегда использовал объектные литералы, потому что они представляют собой понятный способ организации кода.Вот почему мне не нравится prototype, это слишком грязно.

Функции не загрязняют пространство имен, как кто-то упоминал выше, больше, чем объектные литералы.

Вы могли бы легко написать литерал, подобный

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

что привело бы к загрязнению, создав множество глобальных объектов, таких же, как и функции.аналогичным образом вы могли бы сделать:

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

который не создавал бы эти глобальные объекты (все является объектом в JS)

таким образом, вы по-прежнему не создаете множество глобальных объектов.

На мой взгляд, объектные литералы имеют два преимущества.Во-первых, они используются многими плагинами, такими как jQuery, чтобы люди были более знакомы и их было легко читать.Упрощение передачи данных через них в плагин.Легко создавать как общедоступные, так и частные методы....

Однако они могут быть медленными, поскольку каждый раз, когда вы создаете экземпляр объекта, все его методы дублируются.Насколько я понимаю, это не относится к prototype, поскольку у вас есть одна копия методов, а новые объекты просто ссылаются на prototype.

Конечно, я могу ошибаться...