javascript最佳實踐 - 管理腳本/代碼重用

從閱讀很多文章，如How do I include a JavaScript file in another JavaScript file? - 顯然不可能包括一個腳本到另一個。javascript最佳實踐 - 管理腳本/代碼重用

因此，這裏是我的問題 - 我很擔心JS膨脹。或者有太多未使用的代碼加載頁面而不使用/需要它。但是，偶爾，我需要在多個頁面上使用相同的功能，但不是所有的頁面。

如果我們在做一個在線應用爲對象的邏輯部分，如「客戶」或「項目」 - 我們可能有一堆代碼，具體到每一個「對象」的。作爲一個例子，我可以有一個'profile'代碼組，允許我管理我的配置文件，它可能有多個使用Ajax的div彈出窗口，爲了舉例，讓我們說我已經得到了控制我的「送貨地址」一對夫婦的功能，它們控制div，彈出，他們處理Ajax特定於該信息。 - 可以說我有4個功能用於這個目的。但是，這僅僅是一個更大的「profile.js」文件處理所有我的「個人資料」污物的一部分......

現在我已經得到了應用程序的另一部分 - 比如一個購物車 - 在哪裏需要允許用戶訪問「送貨地址」的div-pop-up和所有的Ajax功能。

我想我會從profile.js只是那些功能重複使用 - 因爲這似乎是「壞」，用來做同樣的事「重新寫」代碼 - 因爲那時我有長期的代碼維護問題 - 如果我做了改變 - 我必須記得我使用該代碼的任何地方。

所以如果我只是推測'最佳實踐' - 考慮到這些技術的工作方式的侷限性 - 我不能'套用'並重新使用js，就像我做的服務器端包含OR CSS。

我的代碼將不得不被分成單獨的文件，以及（理論上）許多較小的.js文件將被用於

所以我<head>看起來像這樣

<head> 
<script src='smallfile_1.js'...> 
<script src='smallfile_2.js'...> 
... 
<script src='smallfile_10.js'...> 
<head>

和「 IF「我需要在另一個頁面的部分

<head> 
<script src='that_other_object_/smallfile_3.js'...> 
</head>

...不重複的TTP調用這些較小的文件成爲開銷？在交通流量大的應用中 - 似乎網絡和服務器的開銷可能開始成爲問題，或者只是在鼴鼠山上爬山？

確實爲10 5K檔100K的請求，真的等於 - 1個50K文件100K請求？

現在，我寫出來 - 想想看 - 頁面中的所有圖像向服務器單獨調用過 - 所以也許我做的一個問題出來的東西是不是一個問題。

我可以得到一些其他人正在做的關於跨模塊的JS代碼重用的反饋 - 而不是在模塊間共享「巨大」的文件。

來源

2011-02-12 jpmyob

7個問題，導致合併15個答案，你不能看到你的方式接受一個單一的？ – nmichaels 2011-02-12 07:26:40

答案很簡單 - 您創建一個庫或包含所有實用函數的框架，然後在所有頁面上加載該庫。由於瀏覽器緩存，客戶端必須檢索該文件的唯一時間是初始加載，所以即使文件相當大，客戶端也只需加載一次。

這意味着某些站點（如Stack Overflow）僅使用一個主JavaScript文件，該文件包含網站上所有頁面運行所需的大部分代碼。儘管每個頁面只需要少數幾個功能，但瀏覽器緩存意味着這種方法會更有效率。

的另一種方法，以防止這種情況的發生是創建一個小型的服務器端文件，將動態結合多個JavaScript在服務器上，併爲他們提供服務時，爲他們的客戶端請求，例如：

<script src="/resource/js?load=file1,file2,file3" type="text/javascript></script>

但是，不建議使用此方法，因爲它會破壞瀏覽器緩存。因此，最佳做法是通常爲以維護一個大的主JavaScript文件，其中包含站點運行所需的所有代碼，該代碼將在初始頁面加載時緩存。

來源

2011-02-12 07:31:50

thx ...有沒有辦法'測試'看看緩存是否真的在發生？通過某種方式從請求中「查看」kb或傳入文件... ?? – jpmyob 2011-02-13 02:30:44

javascript最佳實踐 - 管理腳本/代碼重用

回答

相關問題