javascript - 如何创建和实现自定义 JavaScript 库

Question

我是 javaScript 的新手，不确定如何创建新的 js 库并在另一个 js 文件中引用它。

如果我有一个独立文件 Utilities.js

var Utilities= 
{
   show: function(input)
   {
      alert(input);
   }
};

我是否遗漏了关于如何独立定义库的内容？

我的第二个问题是如何使用后续的js文件。到目前为止我所做的是:

<script type="text/javascript" src="resources/Utilities.js"></script>

在我的 index.html 中。这足以将其引用为:

Utilities.show("Hello");

在任何其他 java 脚本文件中？

我以这种方式测试它并得到错误“未定义实用程序”

注意:这只是一个示例，并非我的全部和实际目的。

Answer 1

是的，包含声明了全局变量的 Javascript 文件足以以这种方式调用您的方法 Utilities.show("Hello");从另一个 Javascript 文件加载之后 Utilities.js或在 <script></script> 内您的 html 部分。

但实际上您可以稍微改进一下，遵循模块模式并仅将您真正需要的函数公开到全局范围(您可能会编写一些库的用户不应直接调用的函数，这允许您以干净的方式做到这一点):

var Utilities=Utilities||(function () {

   //Accessible only here
   var privateArray=[];

   //Cannot be called from outside this function
   var privateFunction=function(){
   }

   //Return only what must be publicly accessible, in this
   //case only the show() method
   return {
      show: function(input){
         privateFunction();
         alert(input);
      }
   }
})();

那个(function () { /* Code */})(); , 为您的代码定义一个新的范围也将避免与其他全局 javascript 对象/函数的名称冲突。