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

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

我建议使用这些链接来理解基元，范围，闭包，对象文字等。

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

http://jsbooks.revolunet.com/

要在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");方式从另一个 Utilities.js或<script></script>内加载的Javascript文件中调用您的方法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); } } })(); 1}}你的HTML部分。

但是你可以实际改进它，遵循模块模式并只将你真正需要的功能暴露给全局范围（你可能会写一些你的库用户不应该直接调用的函数，这个允许你以干净的方式做到这一点）：

(function () { /* Code */})();

为您的代码定义新范围的android:layout_alignParentBottom="true"也将避免与其他全局JavaScript对象/函数的名称冲突。

Answer 3

鉴于你在问题中给出了你想要实现的目标的零背景，你原来问题的最佳答案是it depends。

如果您只需要一堆文件并且已经完成（例如在您的示例中，Utilities.js以及其他一些文件），那么您就可以按照自己的方式进行操作了。

但是，当然，你总是希望扩展你的前端，因此你应该坚持一些建筑模式。因此，如果您正在构建客户端（浏览器端）应用程序，那么您应该使用模块模式实际实现库，并从一个好的项目示例/ scaffold开始您的项目。

另一方面，如果您在服务器上呈现html（例如，您使用PHP呈现将发送到浏览器的最终html文件），您只需要一些简洁的功能。浏览器，如果你小心的话，你开始的方式可以没问题。此外，您仍然可以在此处实现模块模式，但我强烈建议您应该使用命名空间来清楚地分离关注点。

Answer 4

在基于浏览器的javascript中，您不能仅调用来自不同文件的函数。在Es6有方法。但还没有。这只是因为你有一些变量或功能等，那么你就无法在另一个文件中自动引用它。

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

或者你可以像grunt一样运行任务运行器，并在每次构建时“合并”它们。

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

您正在做的只是创建一个对象。是的，它会奏效。

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

4 个答案: