添加動態生成的內聯JavaScript的替代方案

在HTML中生成內聯JavaScript一直讓我覺得很骯髒，並且在使用YUI之後，我感覺最好是利用HTML元素作爲替代方案。使用隱藏的<ul>來存儲要由靜態JavaScript使用的鍵和值，這隻會在發現<而不是使用內嵌JavaScript時才起作用？添加動態生成的內聯JavaScript的替代方案

那裏有哪些常見做法，哪些做法對避免內嵌JavaScript最有好處？

來源

2009-08-18 camomileCase

不知道我明白這個問題。爲什麼要將密鑰和值存儲在UL中？爲什麼不在腳本文件中的JavaScript數據結構中？ – 2009-08-18 18:44:17

假設數據是動態的，如傳送帶的圖像或cms中的頁面。 – camomileCase 2009-08-18 19:17:33

我正在做的事情之一是儘可能輸出（來自PHP）一些JSON裏面的一些SCRIPT標籤，稍後我的JS代碼會使用它。類似這樣的：

<script type="text/javascript"> 

var db_data = <?php echo json_encode($db_data); ?>; 

process_db_data_from_js(db_data); 

</script>

我相信Flickr正在使用類似的東西來提供他們的搜索。

來源

2009-08-18 18:48:56

這是一個有趣的方法。 – camomileCase 2009-08-18 22:30:33

我不確定我是否理解這個問題。你是否試圖從服務器端添加動態JavaScript數組並將其注入頁面？

如果是這樣，使用某些Ajax並返回一些JSON會不會更容易？

來源

2009-08-18 18:44:22 helloandre

這當然是一個可行的解決方案。我沒有一個具體的問題需要解決，我只是有興趣聽到一些新的想法。我想這個策略的缺點是額外的要求。 – camomileCase 2009-08-18 22:28:33

另一種可能性是動態生成.js文件，就像動態生成.html（或其他文件）一樣。

來源

2009-08-18 18:46:22 Domenic

然後，這些.js文件不能從CDN提供或利用緩存，從而破壞將它們移動到單獨文件的目的。 – 2009-08-18 18:48:12

好吧，它仍然比使用內聯腳本塊污染你的HTML更清潔（正如接受的答案所暗示的那樣）。 – Domenic 2010-10-01 17:09:36

根據動態生成的JavaScript的性質，它可能不需要放在內聯中。您可以簡單地創建一個PHP文件，它將採用一些參數並生成JavaScript代碼，然後使用頭中的腳本標記（如<script src="foo.js.php?a=b&c=d&x=y&foo=bar">）調用帶有所需參數的PHP文件。這就是我處理動態JavaScript生成需求的方式。

來源

2009-08-18 18:47:19

我認爲將JavaScript插入文檔是非常合理的，特別是當您填充隨頁面動態變化的數據時。我認爲將這些數據存儲在HTML標記中而不是放入內聯腳本沒有任何優勢。

您應該做的是通過分解可移動到單獨的JavaScript文件的代碼來最小化所需的內聯腳本的數量。

來源

2009-08-18 18:47:20

如果您需要從服務器端應用程序獲取一些數據到您的JavaScript中，我發現最好使用Ajax。

當然，你可以把它放到HTML元素中，但這是非常困難的，並且會導致HTML中的錯誤語義。此外，使用lynx的人會將其視爲網頁的一部分。

你也可以動態地生成JavaScript本身，但是這樣會留下一大堆你必須防禦的問題，甚至可能導致JavaScript注入。

來源

2009-08-18 18:51:43 Apreche

雖然在某些情況下，這是很好的（例如，像在原始帖子中的CMS中的頁面），但在許多情況下它是過度殺傷的，例如，讓JS知道當前的用戶名是什麼。我猜想「動態服務器端數據」Ajax是有道理的，但對於「只有服務器端知道的數據」，我寧願將它寫入JavaScript。 – Domenic 2010-10-01 17:12:36

您可以添加屬性到您的元素，然後有非靜態或靜態JS尋找他們。

<div id="..." extraAttribute="whatever"> 
</div>

使用JQuery，很容易找到。

var extraDivs = $('div[extraAttribute]');

（我強烈推薦這種編碼的JQuery。）

來源

2009-08-18 18:52:33

如果你用'data-'開始你的屬性，它就是有效的HTML5！我們一直使用這種方式進行本地化，例如'

'。 – Domenic 2010-10-01 17:08:50

添加動態生成的內聯JavaScript的替代方案

回答

相關問題