[英]What is the best way to pass server side variables to JavaScript on the client side?
我們的應用程序使用了很多配置選項。 這些選項需要以用戶首選項、站點范圍首選項等的形式反映在客戶端。
目前，我們以 JSON 的形式將服務器端設置傳遞給客戶端，該 JSON 存儲在特定元素的標記中的自定義屬性中（不，我們的應用程序目前不擔心 W3C 驗證）。 然后，我們從自定義屬性中檢索數據，並使用 jQuery 將其解析為 JSON 對象以在腳本中使用。
這樣做的一個缺點是從事件處理程序中引用元素上的屬性。 我知道這是不受歡迎的，因為它會創建循環引用，並隨后導致內存泄漏。 我更喜歡使用 jQuery 的 data 函數，但是您不能在頁面呈現時從服務器端調用它。
在這種情況下，其他人會怎么做？
以 JSON 格式返回服務器數據。 您可以通過 AJAX 返回 JSON 標頭或簡單的頁面輸出和JSON.parse() 。
您可以將 JSON 數據直接分配給元素的數據。
$('#elementid').data('serverdata', data);
在更好地了解您的情況后，我建議您出於三個原因使用data-屬性。
.data函數。customAtt="value"更改為data-customAtt="value"以下是有關數據屬性的更多信息。
您可以在頁面中呈現一個內聯腳本，該腳本定義了一個具有所有首選項的 JS 對象。 這樣，您的腳本就可以在瀏覽器完成頁面加載時訪問數據。 缺點：
或者，您可以在頁面中呈現一個指向聲明首選項的外部腳本的鏈接。 這樣，首選項不會阻止頁面渲染，並且可以由瀏覽器單獨緩存。 缺點：
或者您可以使用 HTML5 數據屬性直接將數據添加到元素（因此符合 HTML5 和 jQuery.Data 兼容，因為它也使用這些屬性）。 缺點：
在我的項目中，我通常將這些數據作為全局 JavaScript 變量呈現在母版頁的頂部：
<script language="javascript">
var g_someOption=<%= Options.SomeOption.SerializeToJsonLiteral() %>;
var g_someOtherOption=<%= Options.SomeOtherOption.SerializeToJsonLiteral() %>;
// or
var g_globalOptions = {
thirdOption:<%= Options.ThirdOption.SerializeToJsonLiteral() %>,
foursOption:<%= Options.FourthOption.SerializeToJsonLiteral() %>
};
// or even via special helper that renders object above
<%= Html.RenderGlobalScriptVars() %>
</script>
如果項目中充滿了 AJAX 並且用戶可以長時間停留在某個頁面上，則可以使用 AJAX 向服務器請求定期刷新設置。
PS 我使用過 aspx 語法，但我相信即使您使用其他語言，您也會有一個想法。
只是為了添加另一個選項，您可以隨時執行
<script type="text/javascript" src="settings.php"></script>
從 PHP 輸出東西。 例如，您可以使用它來調用必要的數據調用。 只需發送正確的標題。
我通常使用 MVC，所以我習慣於在頁面加載時進行 AJAX 調用以獲取我可能需要的對象。 我不確定您使用的是什么技術，但是設置一個返回此 JSON 並在 DOM 准備就緒時調用它的端點應該不會太難。 然后你可以將它存儲為一個 JavaScript 變量，而不必擔心將它填充到某些元素的屬性中。
一個很好的折衷方案是呈現一個配置對象，該對象由您用於節點的 id（或任何其他可以讓您的處理程序找到數據的方案）鍵控。 不要使用內聯處理程序，而是在頁面加載后設置處理程序。 然后應該很容易引用您的服務器端創建的 json。
此示例使用半全局變量
<script>
$(function() {
// The following line would be generated in php using something like:
// var cfg = <?= json_encode($cfg) ?>;
var cfg = {
orders: [{total: 25, itemCount: 10}],
waiting: [{total: 20, reason: "Out of strock"}]
};
$('orders').click(function(){
alert('You have a total of ' + cfg.orders[0].itemCount + 'orders');
});
})
</script>
<body>
<div id='orders'> Here are your orders</div>
</body>
或者，如果您真的想限定變量的范圍，您可以執行以下操作：
<script>
$(function() {
$('orders').click(function(){
var orders = <?= json_encode($orders) ?>;
alert('You have a total of ' + orders[0].itemCount + 'orders');
});
})
</script>
<body>
<div id='orders'> Here are your orders</div>
</body>
上面的示例不太靈活，因為如果需要，您無法重用來自其他處理程序的 orders 變量。
將客戶端 javascript 時鍾與服務器日期同步的最佳方式
[英]The best way to synchronize client-side javascript clock with server date
將許多服務器端信息傳遞給JavaScript的最佳實踐是什么？
[英]What is the best practice to pass many server side information to JavaScript?
處理存儲為javascript變量的服務器端數據的最佳方法是什么
[英]What is the best way to deal with server side data saved as a javascript variable
Asp.net。 服務器端驗證和客戶端驗證很好地協同工作的最佳方式是什么
[英]Asp.net. what’s the best way that server side validation and client side validation work together nicely
使用nodejs + express處理服務器端和客戶端錯誤的最佳方法是什么
[英]What's the best way to deal with an error in the server side and in the client side using nodejs + express
什么是客戶端javascript，什么是服務器javascript？
[英]What is client side javascript and what is server side javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.