如何在 js 文件中使用另一个 js 文件中的函数

How to use functions from another js file in a js file?

本文关键字：文件 js 另一个 函数      更新时间：2023-09-26

我正在编写一个加载两个js文件的HTML页面。这两个js文件都使用函数a（），所以我想如果我能创建第三个js文件并将相同的函数a（）扔到该文件中，浏览器可能会加载得更快，因为它不必加载相同的函数两次。那么有人可以告诉我我是否走在正确的轨道上，以及如何从不同的js文件加载函数吗？

谢谢！

长答案 - 您的所有代码共享相同的全局范围。

因此，如果您在文件的顶级范围内定义函数a - 则无需将a包含在每个函数中。当然，也有例外。

相反 - 仅在需要时才包含它实际上对您有益，在通常情况下 - 因为每个组合文件都会更小，因此需要更短的下载时间，从而使您的网站"更快"。

您可能会从以下阅读中受益：

范围：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions_and_function_scope

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

相关模块模式：

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

AMD 规范的常见实现：

http://addyosmani.com/writing-modular-js/

http://requirejs.org/docs/whyamd.html

所以有人可以告诉我我是否走在正确的轨道上

你可能是。如果函数绝对巨大，它可能会提高性能（就不必下载函数两次而言;对执行时间的影响可以忽略不计），但有更好的理由将其拆分到一个单独的文件中：

  • 如果需要更改，只需更改一次。
  • 浏览器可以单独缓存它。

至于在浏览器JavaScript中加载它，只需为其添加另一个<script>元素：

<script src="a.js"></script> <!-- Contains a() -->
<script src="b.js"></script> <!-- Uses a() -->
<script src="c.js"></script> <!-- Also uses a() -->

要完成您要查找的内容，请将函数 a（） 移动到其自己的文件 （3） 中，并将其从文件 1 和 2 中删除。 然后，在 HTML 中引用 javascript 文件时，请先包含第 3 个文件。

需要注意的是，您要确保函数 a（） 完全相同。

为了获得最佳性能，您希望将所有JS合并到一个文件中，然后进行缩小。一个好的起点是使用 Chrome 的页面速度（F12>页面速度标签）

相关文章：