функции внутри или снаружи документа jquery готовы

Question

До сих пор я просто вкладывал все свои достоинства jQuery в функцию $(document).ready(), включая простые функции, используемые в определенных взаимодействиях с пользователем.

Но функции, которые не требуют загрузки документа DOM или которые в любом случае вызываются только потом, также могут быть размещены за пределами $(document).ready(). Рассмотрим, например, очень простую функцию проверки, такую ​​как:

function hexvalidate(color) {
// Validates 3-digit or 6-digit hex color codes 
 var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
 return reg.test(color);
}

Функция вызывается только из функции $(document).ready().

Что такое лучшая практика (синтаксис, скорость); поместить такую ​​функцию внутри или снаружи функция готовности документа jquery?

Answer 1

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

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

Поскольку вы уже используете JQuery, стоит упомянуть, что в вашем случае вы можете определить hexvalidate как плагин JQuery вне и затем вызвать его внутри .

Answer 2

Я не думаю, что вы должны использовать какие-то «просто функции». В ООП javascript «функция» обычно принадлежит к одному из четырех различных типов:

• Конструктор или анонимное закрытие 'init' - используется для конструирования объектов. Единственный тип функции, который может быть глобальным
• Метод - функция, являющаяся частью какого-либо объекта
• Утилита - внутренняя функция конструктора / метода, невидимая извне
• Константа - функциональная константа, передаваемая в качестве параметра

, например

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

              foobar: function() { <- method 
                  xyz.replace(/.../, function() { <- constant })

              }
        }
  )()

В вашем примере 'hexvalidate', очевидно, является частью объекта Validator, который, в свою очередь, можно сделать плагином jQuery:

   (function($) {
        $.validate = {
            hexColor: function(color) { ... your code }
            more validators...
        }
     )(jQuery)

Answer 3

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

Answer 4

Если вы создаете функцию, которую нужно вызывать вне области действия функции $ (document) .ready (), оставьте ее вне функции $ (document) .ready ().

В противном случае оставьте его внутренним.

Answer 5

Если все ваши функции вызываются только из блока jQuery(function () { }), поместите их в него. В противном случае вы излишне загрязняете глобальное пространство имен, что может привести к конфликтам в будущем.

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