функции внутри или снаружи 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);
}

функция вызывается только в

5 56
javascript jquery function scope

5 ответов:

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

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

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

70

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

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

8

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

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

4

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

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

3