將服務器端變量傳遞給javascript的最佳實踐？

我試過兩種方式，但都工作，但都不覺得很乾淨。將服務器端變量傳遞給javascript的最佳實踐？

首先是有一個從像視圖模板接受變量一些內嵌的JavaScript：

var x = {{ myServersideVariable }};

（在我來說，我使用Jinja2的，但同樣的事情也適用於Django模板，剃刀英寸NET MVC3，PHP中的Twig或任意數量的視圖模板引擎）。

很明顯，關於這個問題的不清楚的部分是，在html頁面中存在javascript而不是在單獨的文件中。

我使用的另一個選項是有一個隱藏的字段填充服務器端，然後在Javascript端消耗。這感覺稍微更乾淨，但不完全，寫起來也有點麻煩。

有更好的解決方案還是那些幾乎是我唯一的選擇？

P.S.
我知道JSON，事實上，如果我需要傳遞除基元以外的東西，我有時必須訴諸第一種解決方案。因此，支持在頁面上不使用JavaScript的情況下支持傳遞JSON對象的解決方案的獎勵點。

來源

2011-05-08 Davy8

您是否聽說過** node.js **？我認爲這可以幫助你... – diEcho 2011-05-08 14:04:07

@diEcho：Node.js如何可能在這裏幫助？ – 2011-05-08 14:08:44

@Matt球我只聽說node.js，它是服務器端JavaScript ...這就是爲什麼我寫'我想'這個詞....請糾正我，如果我錯了......謝謝 – diEcho 2011-05-08 14:16:02

使用JSON將變量從服務器傳遞到客戶端，因爲它是非常受歡迎和支持的格式。 PHP，Python，Java和 - 最重要的是 - JavaScript處理得非常好。您不必關心字符轉義等。

// PHP Example 

$vars = array(
    'a' => 'def', 
    'c' => 'xyz', 
    'e' => array(1, 34, 766, 844) 
); 

... 

var variablesFromServer = <?php echo json_encode($vars) ?>; 
// or using Twig 
var variablesFromServer = {{ vars|json_encode }}; 

alert(variablesFromServer.e[2]); // output: 766

它在其他語言中看起來非常相似。

您始終可以使用單個入口點（variablesFromServer變量）來傳遞應從服務器傳遞給客戶端的所有信息。這會讓你的代碼乾淨而且容易維護。

最終用途 - 從客戶的角度 - 也非常簡單：我只是想的

<script src="..."></script> 
<script src="..."></script> 
<script src="..."></script> 
<script> 
    var variablesFromServer = ...; 

    MyProject.setConfiguration(variablesFromServer.config); 
    MyProject.setRuntimeVariables(variablesFromServer.runtime); 
    MyProject.run(); 
</script>

來源

2011-05-08 14:07:39 Crozin

OP不說他正在使用PHP '作爲服務器端語言 – diEcho 2011-05-08 14:16:37

這正是我說我的第一個解決方案。我想我並不完全清楚我的意思是「內嵌的JavaScript」我的意思是在與html相同的頁面上使用Javascript，而不是在單獨的文件中。它有效，但感覺不乾淨。 – Davy8 2011-05-08 14:29:20

@diEcho問題不在於它是PHP，我可以將它翻譯成任何語言，但問題是這是我在問題中已經提到的解決方案，我提到了我認爲的問題。 – Davy8 2011-05-08 14:31:11

一種解決方案是服務器生成的JavaScript文件。我喜歡從清晰的代碼和關注點的角度分離，但它可能會殺死任何類型的瀏覽器緩存，因此這取決於性能的重要性。

來源

2011-05-08 14:41:03 Davy8

不僅會停止瀏覽器緩存JS文件，您可能會發現某些瀏覽器會感到困惑，並繼續使用舊版JS文件的緩存版本，而不是獲取新生成的文件。（我曾在IE的舊版本中發生過這種情況。） – nnnnnn 2011-05-09 01:54:21

只有兩個將數據從服務器注入到javascript中的正確方法。

您要麼將數據公開爲服務。您可以擁有REST服務或任何您喜歡的服務，然後使用ajax從中提取數據。

另一個選項是將數據注入HTML。你想使用JavaScript來逐步增強你的頁面。因此，數據已經存在於HTML中，並且您的JavaScript將從HTML中提取它。

現在，如果您打算使用JavaScript不支持JavaScript的重度應用程序，那麼您希望您的數據成爲REST服務。

你不想將它注入一個序列化的隱藏字段，因爲那麼你的html標記沒有數據的語義。你不想直接將它注入到var x = ...聲明中，因爲這樣你就可以即時編譯你的JavaScript。這打破了關注的分離。

來源

2011-05-08 14:59:06 Raynos

我同意你的大部分答案，但我沒有看到「即時編譯你的JavaScript」如何打破關注點的分離？ – Davy8 2011-05-08 15:05:46

另外一個我現在使用的實際上是搞清楚AJAX調用的URL（它可以很容易地是一個post/get參數，但我使用url路徑來提供參數服務器端）。爲了舉例，我們假設這是一個國際象棋遊戲，玩家可以在單獨的選項卡中一次參與多個遊戲，每個選項卡都有自己的url。在每一頁上，我需要知道我想要製作關於AJAX請求的遊戲。我如何檢索這些信息？ – Davy8 2011-05-08 15:11:21

@ Davy8確實如此。您的JavaScript與您的服務器端代碼很難耦合。你應該避免注入數據到你的JavaScript。至於網址。將網址注入到'。該數據進入你的HTML。然後，你可以讓JavaScript獲取你的鏈接，並把它變成一個Ajax鏈接。 – Raynos 2011-05-08 15:16:08

如果您希望客戶端JavaScript訪問的數據在HTML頁面被請求/生成時已知並且在下一次請求頁面之前不會改變，那麼我不會使用AJAX，因爲顯然這會導致一個額外的請求：一個是獲取主頁面，另一個是立即加載，以便對數據進行AJAX調用。這會降低性能並且無意義地使客戶端和服務器代碼複雜化。

用數據創建一個或多個隱藏輸入並從JavaScript代碼訪問沒有任何問題。根據您想要傳遞的值，可能更容易將值直接注入到頁面上<script>部分的JS變量中，類似於您給出的示例，並且我個人發現比隱藏輸入更容易閱讀，因爲<script>部分將在頁面頂部顯示，而不是將輸入掩埋在HTML中的某個位置，這使得顯而易見的是，這些值將被客戶端的代碼使用，而不僅僅是用其他表單數據提交。但無論哪種方式都不是「不潔淨」的。

如果您需要將服務器端數據放入您的JavaScript中，作爲用戶在加載（點擊按鈕或某物）後在頁面上執行的操作的響應，或者您希望定期輪詢服務器檢查值是否已更改，然後然後您要使用AJAX。

編輯：請注意，雖然您可以動態生成服務器上的JS腳本文件，從而完全保留您的動態值完全脫離HTML頁面有時這不工作得很好，因爲某些瀏覽器可能會感到困惑並繼續使用更早JS的緩存版本。我在舊版本的IE中遇到過這種情況。

來源

2011-05-09 01:44:44 nnnnnn

將服務器端變量傳遞給javascript的最佳實踐？

回答

相關問題