javascript - 组织我的 JavaScript 函数库

Question

随着时间的推移，我创建了一堆不同的 JavaScript 函数。它们中的大多数是静态函数，并执行诸如修改日期的外观、从数组创建选择菜单 HTML 等操作。

我目前将它们全部放在一个名为“general.js”的文件中，该文件又由我的 HTML 页面直接调用，它们中的每一个看起来都像:

function modifyDate(data){....}
function makeArray(arr){....}

然后我将它们用作:

alert(modifyDate("12/14/2013"));

我认为这是个坏主意，因为它可能会与其他库发生冲突。相反，我正在考虑以下内容:

myLibrary={};
myLibrary.modifyDate= function(data){....}
myLibrary.makeArray= function(arr){....}

他们将它们用作:

alert(myLibrary.modifyDate("12/14/2013"));

请注意，这是我边做边编的。请提供建议，我应该如何最好地组织我的 JavaScript 库。谢谢

Answer 1

您所描述的称为命名空间，通常被认为是个好主意。

更多关于命名空间的讨论可以在这个问题中找到:Why do they use namespaces in javascript?

一般来说，命名空间的好处是:

1. 限制全局范围的污染并防止命名冲突
2. 为您的函数名称提供上下文(例如，我们希望 WindowUtils.getHeight 和 MenuUtils.getHeight 的结果不同)。

因此，您的示例将提供第一个好处，但如果这只是一组抓包功能，则不一定是第二个好处。这是否是一件好事完全取决于您的个人项目和您想要做的事情。

请注意，如果您要使用命名空间，您可能需要研究模块模式，这是一种保护命名空间范围以允许私有(private)变量/ protected 状态的方法。 this answer to a similar question 中有一个很好的例子或者你可以看看这个 canonical blog post on the module pattern

在你的例子中，模块模式看起来像这样:

var myLibrary=(function(){
  var privateVariable; //accessible by your functions but not in the global context    
  return {
    modifyDate: function(data){....},
    myLibrarymakeArray: function(arr){....}
  };
}())