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

IT技术 javascript jquery function scope
2021-03-08 11:24:17

到目前为止,我只是将我所有的 jQuery 优点放在$(document).ready()函数中,包括在某些用户交互中使用的简单函数。

但是不需要加载 DOM 文档或只在之后调用的函数也可以放在 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个回答

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

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

由于您已经使用了 JQuery,值得一提的是,在您的情况下,您可能希望在外部定义hexvalidateJQuery 插件 ,然后在内部调用它

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

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

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

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

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

否则将其保留在内部。