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

До сих пор я просто поместил всю свою функцию 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?

Ответ 1

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

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

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

Ответ 2

Я не думаю, что вы должны использовать любые "просто функции" в первую очередь. В OOP 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)

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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