資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何強制客戶端重新整理 JavaScript 檔案？
本教程將教我們如何強制客戶端重新整理 JavaScript 檔案。
現在，問題是，為什麼我們需要強制客戶端重新整理 JavaScript 檔案？讓我們透過示例問題來理解它。假設我們已經部署了應用程式，並且許多使用者正在使用我們的應用程式。現在，為了提高應用程式的效能和使用者介面，我們將持續改進我們的應用程式，並在每個階段升級其版本。顯然，升級應用程式版本後，我們也會將其推送到生產環境。但是有時，在使用者螢幕上，客戶端 JavaScript 或 CSS 沒有升級，即使我們將新程式碼推送到生產環境，它仍然顯示舊版本的應用程式。
你能想到為什麼會出現這個問題嗎？ 好吧，繼續閱讀以瞭解答案。當用戶第一次在瀏覽器中開啟我們的應用程式時，瀏覽器會將該網頁的快取儲存在本地儲存中。因此，當用戶下次從同一瀏覽器訪問該網頁時，由於儲存的快取，載入時間不會太長。因此，在我們的案例中，儲存的快取造成了問題。我們將應用程式的程式碼升級到了生產環境，但瀏覽器從本地儲存（或快取）中獲取 CSS 和 JavaScript 檔案。瀏覽器不是從伺服器重新載入新檔案，而是從快取載入並向用戶顯示舊版本的應用程式。
我們已經在下面解釋了一些解決方案，以便在升級應用程式後從伺服器重新載入 JavaScript 檔案。
強制重新整理瀏覽器
最簡單的解決方案是強制重新整理瀏覽器。使用者可以在開啟應用程式視窗後按ctrl + F5或ctrl + shift + R強制重新整理瀏覽器。在 Mac 上，使用者可以按cmd + R。它將再次從伺服器重新載入所有檔案，如果您已更新 JavaScript 檔案，它將用升級後的檔案替換客戶端瀏覽器本地快取中的檔案。
強制重新整理瀏覽器的另一種方法是按住 ctrl 鍵並單擊瀏覽器左上角的重新載入按鈕。Mac 使用者必須按住cmd鍵並單擊重新載入按鈕。
太好了！此解決方案有效，因為執行強制重新整理會從伺服器重新載入所有檔案。但是，每次升級應用程式時都告訴應用程式使用者強制重新整理瀏覽器是否合適？這不是一個好習慣。因此，我們在下面提出了另一個更好的解決方案。
更改指令碼標籤中的檔案路徑
在這種方法中，我們將更改 JavaScript 指令碼標籤中的源 URL，以欺騙瀏覽器並再次從伺服器重新載入所有已更改的檔案。我們只需在檔案的源 URL 後新增一些查詢引數。
使用者可以按照以下語法編輯源標籤中的源 URL。
語法
舊的指令碼標籤
<script type = "text/javascript" src = "script.js" > </script>
新的指令碼標籤
<script type = "text/javascript" src = "script.js?$version" > </script>
引數
version − 使用者可以新增任何字串作為版本來跟蹤新版本。最常見的方法是新增任何版本，但使用者也可以新增日期和時間以使其唯一。
示例
下面的示例演示瞭如何在每次應用程式版本升級時動態新增日期和時間。
<script type="text/javascript"> //get the date and time var currentDate = (new Date()).getTime(); //create new script element var newScriptElement = document.createElement("script"); newScriptElement.type = "text/javascript"; // add current date to URL as a query parameter newScriptElement.src = "script.js?" + currentDate; // append new script element to body. document.body.appendChild(newScriptElement); </script>
使用者可以看到，我們在上面的示例中將日期和時間附加到指令碼檔案源 URL。當瀏覽器嘗試使用更新的 URL 查詢指令碼檔案時，它將無法從本地快取中獲取它。之後，瀏覽器必須需要從伺服器重新載入它。
此外，使用者可以透過編輯 .htaccess 檔案來實現此目的：
RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} \.(bmp|png|gif|css|js)$ [NC] RewriteCond %{QUERY_STRING} !^(.+?&v50|)v=50[^&]*(?:&(.*)|)$ [NC] RewriteRule ^ %{REQUEST_URI}?v=50 [R=301,L]
透過這種方式，我們可以使瀏覽器在我們將應用程式更新推送到生產環境時自動重新載入 JavaScript 檔案。
告訴使用者強制重新整理並清除快取以檢視客戶端應用程式的新版本不是一個好習慣。因此，開發人員可以使用第二種方法，只需向檔案路徑新增查詢引數即可使其自動重新載入所有更新的檔案。
瀏覽量：11K+
