JQuery命名空间的最佳实践+通用工具函数

Question

JQuery命名空间的最佳实践+通用工具函数

7

如何实现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更冗长，但在今后的维护中似乎更容易。我不需要在方法之间添加逗号，并且可以左对齐所有函数。

还有其他更好的方法吗？

- Armchair Bronco

1

我不同意使用所谓的“印第安山”符号表示法，即在行末出现大括号。这纯粹是一种风格上的事情，没有什么灾难会发生。有了一个体面的 IDE，你可以让匹配的括号出现在较暗的背景颜色（我用浅红色），并且让它们沿着页面的左侧对齐，这对我来说非常有帮助，特别是在深度嵌套的代码中。 - Armchair Bronco

@ArunPJohny：为什么不能结合两种方法？您可以从“核心”文件中开始使用方法2，然后在扩展文件中使用修改后的方法1版本，其中命名空间的声明更加灵活，以便您可以获取现有的命名空间并向其添加属性和方法。 - natlee75

@RobRaisch：你为什么认为这是个问题？我个人像你说的一样把左大括号放在行尾，但我和许多同事一起工作的人使用了Armchair所说的“独立一行”格式。这纯粹是一种风格——没有技术问题，但也许这就是你的意思（如果其他人触碰了你的代码，可能会更难阅读或更容易搞砸）？ - natlee75

1

由于JS分号自动插入的技术问题，请参见http://encosia.com/in-javascript-curly-brace-placement-matters-an-example/#- 如果在某个实例中很重要，最好谨慎行事，以免面临难以调试的错误。 - Rob Raisch

尽管我更喜欢C#的风格（花括号放在单独的一行和PascalCase公共名称），但最好还是遵循每种语言/技术/平台采用的标准。因此，不幸的是，当编写JavaScript代码时，这意味着需要使用所有Java开发人员喜欢的东西，而其他人讨厌 :-) 遵循这种风格的另一个原因是任何真正好的集成开发环境都会警告您是否存在风格违规，并默认自动格式化。我认为没必要在每个开发者的机器/安装上费力去调整这些有用功能的设置，以迎合大众之外的风格。也许TypeScript可以做到这一点。 - Tony Wall

显示剩余3条评论

2个回答

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

});

- Armchair Bronco

1

由你决定，但是 Predikt = window.Predikt || {} 很好用且更短。只要你将新对象作为属性引用（例如 window.Predict 而不仅仅是 Predikt），你就不会得到 ReferenceError，而是一个新的空对象。无论如何，你不需要在对象名称周围加上括号。 - Ronny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ronny · Accepted Answer

对于 jQuery 插件等，惯用方式是使用 $.fn.myPlugin 来使其在元素上可用，而使用 $.whatever 则只是为了使用命名空间。我建议阅读官方插件编写文档和这些文章。

但是除了 jQuery 之外，将您的工具分组到命名空间中的最简单方法是按照以下方式进行：

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

JS中的命名空间基础知识最近并没有太大变化 - 你应该查看Snook的文章, DED的优雅方法和这个SO问题。

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