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

我认为你不应该首先使用任何"正常功能".在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)

Answer 3

将这些函数放在文档就绪函数中的一个优点是它们不会污染您的全局命名空间......但缺点是如果您需要它们在页面上的其他位置它们将无法使用.