如何使用js文件中另一個js文件的功能？

Question

我正在寫一個加載兩個js文件的HTML頁面。這兩個js文件都使用函數a（），所以我猜如果我可以創建第三個js文件並將相同的函數a（）引入該文件，瀏覽器可能會加載得更快，因爲它不需要加載相同的函數兩次。那麼，有人可以告訴我，如果我在正確的軌道上，以及如何從不同的js文件加載功能？

謝謝！

Answer 1

長答案 - 您的所有代碼共享相同的全局範圍。

所以，如果你在一個文件的頂級範圍定義一個函數a - 不需要在每個文件中包含a。當然有例外。

相反 - 包括它只有一次和只需要時實際上有利於你，在常見的情況 - 因爲每個consequitive的文件會更小，因此需要更短的時間來下載，從而使您的網站「更快」。

有一些閱讀你可能會從中受益：

範圍：

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

Answer 2

來完成你在找什麼，移動功能（）到它自己的文件（3）和刪除它來自文件1 & 2.然後，當您的HTML內引用您的JavaScript文件時，請首先包含此第三個文件。

一個警告是，你想確保函數a（）是完全相同的。

爲了獲得最佳性能，您希望將所有JS合併到一個文件中，然後進行縮小。一個良好的開始是使用Chrome的網頁速度（F12> Page Speed的標籤）

Answer 3

所以有人可以告訴我，如果我在正確的軌道上這個

你可能會。如果功能是絕對巨大的，它可能會提高性能（無需兩次下載該功能;對執行時間的影響可以忽略不計），但有更好的理由將其分成單獨的文件：

• 如果需要更改，只需更改一次即可。
• 瀏覽器可以單獨緩存它。

至於加載它在瀏覽器的JavaScript，只需添加另一個<script>元素是：

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