функции внутри или снаружи готового документа 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 готовая функция?
5 ответов
Поместите его внутри , чтобы он не загрязнял глобальное пространство имен. Это также обеспечивает более быстрое разрешение имени функции из-за цепочек областей видимости JavaScript.
Поместите его за пределы , если это повторно используемый компонент, чтобы его можно было легко переместить в отдельный файл и вызывать из разных контекстов.
Поскольку вы уже используете JQuery, стоит упомянуть, что в вашем случае вы можете определить hexvalidate как плагин JQuery вне , а затем вызвать его внутри .
Одно из преимуществ помещения этих функций в функцию готовности документа состоит в том, что они не загрязняют ваше глобальное пространство имен ... с обратной стороной, если они вам понадобятся где-то еще на странице они не будут доступны.
Я не думаю, что вам следует использовать любой 'просто функции 'в первую очередь. В ООП 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)
Если вы создаете функцию, которую нужно вызывать вне области действия функции $ (document) .ready (), оставьте ее вне функции $ (document) .ready ().
В противном случае оставьте это внутренним.
Если все ваши функции вызываются только из jQuery (function () {}) , поместите их внутрь. В противном случае вы излишне загрязняете глобальное пространство имен, что может привести к конфликтам в будущем.
Глобально объявляйте только функции, которые также используются кодом в других областях.