2010-04-15 90 views
53

直到现在,我只把我所有的jQuery善良放在$(document).ready()函数中,包括在某些用户交互中使用的简单函数。jquery文档内部或外部的函数准备好

但是,不需要加载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文件就绪功能吗?

回答

69

把它放在里面所以它不会污染全局命名空间。由于JavaScript的范围链,它还确保了函数名称的更快解析。

放在以外如果它是一个可重用的组件,所以你可以很容易地将它在一个单独的文件中移动并从不同的上下文中调用。

既然你已经使用JQuery,这一点,实在值得一提的是,在你的情况,你可能需要定义hexvalidateJQuery plugin,然后调用它

+1

+1 - 漂亮的编辑。 – karim79 2010-04-15 13:11:01

7

将这些函数放入文档就绪函数的一个优点是它们不会污染您的全局名称空间......缺点是如果您需要它们在页面上的其他位置,则它们将不可用。

4

如果你所有的功能只是从jQuery(function() { })块中调用,把它们放在里面。否则,你会不必要地污染全局命名空间,这可能导致冲突。

只声明其他作用域中代码也使用的全局函数。

2

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

否则保持它内部。

10

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

  • 构造函数或匿名的“init”闭包 - 用于构造对象。函数是一些对象
  • 实用程序的一部分 - - 被允许是全球
  • 方法的功能的唯一类型的构造器/方法的内部函数,从外
  • 恒无形 - 作为传递功能恒定参数

例如

(function() { <- init closure 

     function helper1() { <- utility } 

     globalSomething = { 

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

       } 
     } 
)() 

在你的榜样, 'hexvalidate' 显然是验证对象,这反过来又可以制成一个jQuery插件的一部分:

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