jQuery文档内部或外部的功能准备就绪

Posted 2023-02-19

【中文标题】jQuery文档内部或外部的功能准备就绪

【英文标题】：functions inside or outside jquery document ready

【发布时间】：2011-02-08 09:01:02

【问题描述】：

到目前为止，我只是将我所有的 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() 函数中调用。

什么是最佳实践（语法、速度）；将这样的函数放在 inside 还是 outside jquery 文档准备函数？

【参考方案1】：

把它放在里面，这样它就不会污染全局命名空间。由于 javascript 的作用域链，它还确保更快地解析函数名称。

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

由于您已经使用 JQuery，因此值得一提的是，在您的情况下，您可能希望将 hexvalidate 定义为 JQuery plugin outside，然后在 inside 中调用它.

【参考方案2】：

我认为您首先不应该使用任何“公正的功能”。在 OOP 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)

【参考方案3】：

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

否则将其保留在内部。

【参考方案4】：

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

仅在全局范围内声明也被其他范围内的代码使用的函数。

【参考方案5】：

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