jquery文件内部或外部的函数准备就绪

时间:2010-04-15 12:52:12

标签: javascript jquery function scope

到目前为止,我只是将所有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 个答案:

答案 0 :(得分:72)

放在中,这样就不会污染全局命名空间。由于JavaScript的范围链,它还确保更快地解析函数名称。

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

由于您已经使用过JQuery,值得一提的是,在您的情况下,您可能希望将hexvalidate定义为JQuery plugin 外部,然后在其中调用

答案 1 :(得分:10)

我认为你不应该首先使用任何'正常功能'。在OOP javascript中,“函数”通常属于四种不同类型之一:

  • 构造函数或匿名'init'闭包 - 用于构造对象。唯一允许全局的函数类型
  • 方法 - 作为某个对象的一部分的函数
  • 实用程序 - 构造函数/方法的内部函数,从外部看不见
  • 常量 - 作为参数传递的函数常量

e.g。

 (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)

答案 2 :(得分:8)

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

答案 3 :(得分:4)

如果只在jQuery(function () { })块内调用所有函数,请将它们放入其中。否则,您将不必要地污染全局命名空间,这可能会导致冲突。

仅声明全局函数,这些函数也被其他作用域中的代码使用。

答案 4 :(得分:4)

如果您正在创建一个需要在$(document).ready()函数范围之外调用的函数,请将其保留在$(document).ready()函数之外。

否则将其保持在内部。