如何创建和实现自定义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

1. 可以使用对象文字，但是您可以使用其他模式（模块，显示模块，构造函数等）定义库。

我建议使用这些链接来了解原语，范围，闭包，对象文字等。

http://bonsaiden.github.io/JavaScript-Garden/

http://jsbooks.revolunet.com/

2. 要在index.html中调用该方法，您需要添加一个标签。

   <script> Utilities.show("Hello"); </script>

但是不推荐这种方法。 代替它，您可以创建一个新的JS文件来运行您的库代码。

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

在main.js中

Utilities.show("Hello");

希望能帮助到你。

Answer 2

是的，包括声明了全局变量的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对象/函数冲突。

Answer 3

鉴于您在自己的问题内给出了要实现的目标的零上下文，因此，对原始问题的最佳答案是it depends 。

如果您只需要一堆文件并且已经完成（例如您的示例中的Utilities.js等），那么您就可以确定前进的方向。

但是，当然，您总会想要扩展前端，因此您应该遵循某种架构模式。 因此，如果您要构建客户端（浏览器端）应用程序，那么您应该真正使用模块模式来实现您的库，并从一个好的项目示例/支架开始您的项目。

另一方面，如果要在服务器上呈现html（例如，您正在使用PHP呈现将发送到浏览器的最终html文件），而您只需要浏览器中的一些精简功能，那么开始的方式可以小心一点就可以了。 此外，尽管我强烈建议您应该使用命名空间来明确关注点，但是您仍然可以在此处实现模块模式。

Answer 4

在基于浏览器的javascript中，您还不能仅从其他文件中调用函数。 在Es6中，有很多方法。 但尚未。 这意味着仅仅因为您有一些变量或函数等，您就无法在另一个文件中自动引用它。

除非将两个文件都加载到一个html中并按顺序加载。

另外，您可以像grunt一样运行任务运行程序，并在每次构建时“合并”它们。

Javascript没有特殊的库概念，在es6中有点不同，一切都是对象。

您正在做的只是创建一个对象。 是的，它将起作用。