JQuery名称空间的最佳实践+通用实用程序功能

时间:2010-12-28 02:41:26

标签: jquery namespaces rules-of-thumb utility-method

用于实施 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更加冗长,但似乎更容易维持下去。我不需要在方法之间添加逗号,我可以保持对齐所有函数。

还有其他更好方法吗?

2 个答案:

答案 0 :(得分:3)

对于jQuery插件,如果您希望它在元素上可用,则使用$.fn.myPlugin;如果您只想使用命名空间,则使用$.whatever。我建议您阅读官方Plugins Authoring documentthese articles

但是除了jQuery之外,命名为utils的最简单方法是:

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

JS中命名空间的基础知识最近并未真正改变 - 您应该查看snook's articleDED's elegant approachthis SO question

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

答案 1 :(得分:1)

为了记录,我最终使用了第一种语法:

$(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();
   };

});