如何創建和實現自定義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中有點不同，一切都是對象。

您正在做的只是創建一個對象。 是的，它將起作用。