JQuery 命名空间的最佳实践 + 通用实用程序函数

Posted 2023-02-23

【中文标题】JQuery 命名空间的最佳实践 + 通用实用程序函数

【英文标题】：Best practices for JQuery namespaces + general purpose utility functions

【发布时间】：2011-05-31 09:46:47

【问题描述】：

目前有哪些“经验法则”，用于实施 JQuery 命名空间 以托管通用实用程序功能？

我有许多分散在不同文件中的 javascript 实用程序方法，我想将它们整合到一个（或多个）命名空间中。最好的方法是什么？

我目前正在研究两种不同的语法，按优先顺序列出：

  //******************************
  // JQuery Namespace syntax #1
  //******************************
  if (typeof(MyNamespace) === "undefined")
  
     MyNamespace = ;
  

  MyNamespace.SayHello = function ()
  
     alert("Hello from MyNamespace!");
  

  MyNamespace.AddEmUp = function (a, b)
  
     return a + b;
  

  //******************************
  // JQuery Namespace syntax #2
  //******************************
  if (typeof (MyNamespace2) === "undefined")
  
     MyNamespace2 =
     
        SayHello: function ()
        
           alert("Hello from MyNamespace2!");
        ,

        AddEmUp: function (a, b)
        
           return a + b;
        
     ;
  

语法 #1 更冗长，但似乎以后更容易维护。我不需要在方法之间添加逗号，我可以左对齐我的所有函数。

还有其他更好的方法可以做到这一点吗？

【问题讨论】：

我认为语法 #1 更好，因为它允许您在多个文件中使用命名空间。我在我的项目中使用这种方法。

我还应该扩展这个问题以包括包含枚举的命名空间。对于枚举，我仍然更喜欢语法 #1。

注意：将开放的花括号放在自己的行上会招致灾难。开放卷发应始终与其“所有者”放在同一行，即 if()、= 等。

我不同意应该根据所谓的“Indian Hill”符号来使用开放花括号，因为它们出现在行尾。这纯粹是一种风格上的事情，并没有即将发生的灾难。使用一个不错的 IDE，您可以在较暗的背景颜色（我使用浅红色）上显示匹配的大括号，并且让它们沿着页面的左侧排列对我有很大帮助，尤其是对于深度嵌套的代码。

因为JS分号自动插入的技术问题。请参阅encosia.com/… - 如果在某个情况下很重要，最好谨慎行事，然后面对难以调试的错误。

【参考方案1】：

对于 jQuery 插件等模式，如果您希望它在元素上可用，则使用 $.fn.myPlugin，如果您只想使用命名空间，则使用 $.whatever。推荐阅读官方Plugins Authoring document和thesearticles。

但除了 jQuery，为你的 utils 命名空间的最简单方法是：

var utils = window.utils || ;
utils.method = function();

JS 中命名空间的基础知识最近并没有真正改变 - 您应该查看 snook's article、DED's elegant approach 和 this SO question。

使用自调用函数来声明命名空间的主要优点是您可以在返回对象之前私下执行内容。此外，该对象将准备好由您的控制台自动完成，您将在 $ 命名空间上错过它，因为 jQuery 返回的是函数而不是对象。

【讨论】：

最好是var utils = window.utils ||

jQuery 可能在这里用作 Javascript 的同义词 :) 无论如何，jQuery 插件语法并不真正支持命名空间（除了 trigger/bind 中的 'event.namespace'）； - 相当可怕的 - 标准解决方案似乎对几乎所有事情都使用单个函数。

【参考方案2】：

为了记录，我最终使用了第一种语法：

$(function ()

   //********************************
   // PREDIKT NAMESPACE
   //********************************

   if (typeof (Predikt) === "undefined")
   
      Predikt = ;
   

   //********************************
   // PREDIKT.TIMER NAMESPACE
   //********************************

   if (typeof (Predikt.Timer) === "undefined")
   
      Predikt.Timer = ;
   

   Predikt.Timer.StartTimer = function ()
   
      return new Date().getTime();
   ;

   Predikt.Timer.EndTimer = function ()
   
      return new Date().getTime();
   ;

);

【讨论】：

这是您的电话，但Predikt = window.Predikt || 效果很好，而且更短。只要您将新对象作为属性引用（例如 window.Predict 而不仅仅是 Predikt），您就不会得到 ReferenceError 而只是一个新的空对象。无论如何，您不需要对象名称周围的括号。