將客戶端JavaScript模板放在HTML或JavaScript中？

像下面列出的客戶端模板（使用下劃線的模板引擎）：將客戶端JavaScript模板放在HTML或JavaScript中？

<p class="foo"><%= bar %></p>

被放置在一個單獨的HTML文件，或者一個單獨的JavaScript文件？我知道這可以同時工作。

例如，JavaScript文件可以只包含字符串變量的列表，像這樣：

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>';

但我也看到了以下內容：

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script>

剛剛從關注角度出發的分離，模板存儲屬於哪裏？

來源

2011-09-24 Qcom

我通常會使用級聯資產管理系統和縮小JavaScript和CSS和客戶端模板文件翻譯成JS串掛在全局變量。這樣的事情取決於您的平臺，但在軌道世界裏，你想看看jammit或sprockets（也就是現在的軌道的一部分）

如果我沒有像樣的資產管理，我通常會最終使用腳本標記方法，將模板拆分爲服務器上的部分，幷包含在頁面的底部。這是一種痛苦的工作，但海事組織除了你的簡單示例字符串模板真的不應該存在內嵌在你的JavaScript文件。

來源

2011-09-24 04:54:42

很好的答案，謝謝你。 – Qcom

我非常喜歡第二個選項，有以下原因：

使用字符串意味着要處理逃逸引號等。
多行模板是Javascript中的一個痛處，因爲不能串聯多行字符串。任何長度的模板將在多行上更清晰易讀。
JS字符串中沒有語法高亮顯示。

但使用第二個選項需要以某種方式加載您的模板文件，或者將其包含在HTML中，或者在構建時將其粘貼到您的HTML中。另外由於script標籤，還有更多的數據開銷，並且您必須使用jQuery的.html()或類似的方法從DOM獲取字符串。因此，性能方面，字符串選項可能會更好 - 這就是爲什麼@馬特建議在構建時將其置入字符串的建議可能是最好的。

來源

2011-09-24 04:55:18 nrabinowitz

感謝您的優點和缺點，brah。 – Qcom

你可以使用jQuery's templating engine，並加載所有的模板在外部JS文件。

來源

2011-09-24 05:57:25

不幸的是jquery.tmpl已停產。 – Phluks

如果您正在使用logicless客戶端模板引擎像Transparency模板可以嵌入HTML主，因爲模板本身是有效的HTML。

實施例：

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div>

對於模板在窗口小部件可以使用類似的方式隱藏<div>容器做的罰款。

把HTML'ish代碼爲Javascript代碼塊和JavaScript字符串是醜陋的，應儘可能避免。這不是語法高亮，你很容易錯過錯誤。

來源

2012-05-25 17:28:03

回答

相關問題