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 文档就绪函数中？

- Hans

Answer 1

将它放在内部，这样就不会污染全局命名空间。由于JavaScript的作用域链，这也确保了更快的函数名称解析。

如果它是可重用组件，将其放在外部，这样你就可以轻松地将它移动到一个单独的文件中并从不同的上下文调用。

既然您已经使用了JQuery，值得一提的是，在您的情况下，您可能希望将hexvalidate定义为JQuery插件放在外面，然后在内部调用它。

- viam0Zah

Answer 2

我认为你在第一位使用任何“只是函数”是不应该的。在OOP JavaScript中，“函数”通常属于四种不同类型之一：

• 构造函数或匿名的“init”闭包 - 用于构造对象。唯一允许全局的函数类型
• 方法 - 是某个对象的一部分的函数
• 实用函数 - 构造函数/方法的内部函数，在外部不可见
• 常量 - 作为参数传递的函数式常量

例如：

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

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

              }
        }
  )()

在你的例子中，“hexvalidate”显然是Validator对象的一部分，而Validator对象可以成为jQuery插件：

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

- user187291

Answer 3

在文档准备好的函数中放置这些功能的一个优点是它们不会污染您的全局命名空间...缺点是如果您需要在页面的其他地方使用它们，它们将不可用。

- Ty W

Answer 4

如果你的所有函数都只在jQuery(function () { })块内调用，请将它们放在里面。否则，你会不必要地污染全局命名空间，这可能会导致未来发生冲突。

只有被其他作用域中的代码使用的函数才可以在全局范围内声明。

- deceze

Answer 5

如果您正在创建一个需要在$(document).ready()函数的范围之外调用的函数，请将其放在$(document).ready()函数之外。否则，将其保持内部。

- Justin Niessner