jQuery namespacing с использованием объектов и самоисполнением анонимных функций

Question

Я ищу создание пространства имен с использованием объектов и самоисполнение анонимных функций. Какой из них считается лучшим вариантом?

Использование объектов, дает уникальное имя «myAppName», достаточное для предотвращения столкновений?

var myAppName = { 
    val1: "abc", 
    val2: "xyz", 
    myFunc1: function() { 
     return this.val2; 
    } 
} 

console.log(myAppName.val1); // abc 
console.log(myAppName.myFunc1()); // xyz 

Используя себя выполнение анонимной функции:

(function() { 
val1 = "abc"; 
    var val2 = "xyz"; 

    myFunc1 = function() { 
     return val1; 
    } 

    var myFunc2 = function() { 
     return val2; 
    } 
})(); 

console.log(val1); // abc 
console.log(myFunc1()); // abc 
console.log(myFunc2()); // xyz 

В приведенном выше коде для самостоятельного выполнения функции, все они, кажется, выполнить. Есть ли смысл использовать и не использовать var перед именами переменных и функций? Я не совсем понимаю. Есть ли способ сделать переменные и функции частными и общедоступными? или все внутри функции самоисследования закрыто?

Что произойдет, если я использую «var» перед выполнением функции self, как показано ниже?

var myAppName = (function() { 
val1 = "abc"; 
    var val2 = "xyz"; 

    myFunc1 = function() { 
     return val1; 
    } 

    var myFunc2 = function() { 
     return val2; 
    } 
})(); 

Answer 1

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

Глобальные переменные являются действительно свойствами объекта window. Если вы используете var вне функции, вы определяете глобальную переменную. Если вы используете var внутри функции, вы определяете локальную переменную. Если вы ссылаетесь на переменную someValue, не объявляя ее var, она совпадает с ссылкой window.someValue.

В следующем коде показаны различные способы установки глобальной переменной и один способ определения локальной переменной.

window.global1 = 'abc'; 
global2 = 'def'; 
var global3 = "ghi"; 

(function() { 
    window.global4 = 'jkl'; 
    global5 = 'mno'; 
    var local1 = 'xyz'; 
})(); 

console.log(global1); // 'abc' 
console.log(global2); // 'def' 
console.log(global3); // 'ghi' 
console.log(global4); // 'jkl' 
console.log(global5); // 'mno' 
console.log(local1); // ReferenceError: local1 is not defined 

В общем, вы хотите ограничить установку глобальных переменных (по крайней мере, при создании библиотеки JavaScript). Пространство имен - это просто глобальная переменная. Когда вы размещаете все остальное в этом пространстве имен, вы добавили только одну глобальную переменную.

Я думаю, что также рекомендуется избегать установки глобальных переменных, таких как global2 и global5 выше. Вместо этого вы должны использовать var oustide функции (например, global3) или задать объект на объекте window (например, global1 и global4).

Заимствуя пример кода из другого ответа, мы можем создать пространство имен, как это:

var myApp = (function() { 
    var privateValue = 'abc'; // Don't forget "var" here. 

    function privateFunction() { 
     return privateValue; 
    } 

    return { 
     publicValue: 'xyz', 

     publicFunction: function() { 
      return privateFunction(); 
     } 
    } 
})(); 

Мы могли бы добиться того же, выполнив следующие действия, но я считаю это плохой стиль:

(function() { 
    var privateValue = 'abc'; // Don't forget "var" here. 

    function privateFunction() { 
     return privateValue; 
    } 

    myApp = { 
     publicValue: 'xyz', 

     publicFunction: function() { 
      return privateFunction(); 
     } 
    } 
})(); 

В обоих случаях мы установили глобальную переменную myApp, но я думаю, что она намного яснее в первом, чем в последнем.

Просто чтобы быть ясно, в обоих случаях мы бы обратиться к общественности переменную myApp.publicValue и вызвать функцию общественного пользования myApp.publicFunction(), так и вне анонимной функции мы не смогли бы ссылаться privateValue или privateFunction.

Answer 2

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

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

var myApp = (function() { 
    var privateValue = 'abc'; // Don't forget "var" here. 

    function privateFunction() { 
     return privateValue; 
    } 

    return { 
     publicValue: 'xyz', 

     publicFunction: function() { 
      return privateFunction(); 
     } 
    } 
})(); 

Обратите внимание, как анонимная функция возвращает объект, содержащий общие переменные и функцию. Если вы не ставите «var» перед «privateValue», то вы не определяете локальную переменную; (., Который на самом деле является свойством «окна» объекта) Вместо этого, вы ссылаетесь глобальную переменную

Если вы используете JQuery, я рекомендую следующее:

(function(window, $, undefined) { 

    var myApp = (function() { 
     var privateValue = 'abc'; // Don't forget "var" here. 

     function privateFunction() { 
      return privateValue; 
     } 

     return { 
      publicValue: 'xyz', 

      publicFunction: function() { 
       return privateFunction(); 
      } 
     } 
    })(); 

    // Put myApp in the global scope. 
    window.myApp = myApp; 

})(window, jQuery); 

Таким образом, вы в безопасности вместо jQuery(). Вы также можете относиться к undefined как к константе. Вы также можете более легко справиться с ситуацией, когда кто-то переопределил оконный объект.