維護正確的CSS \ Javascript和使用模板引擎 - 一個矛盾？

模板引擎（Velocity，FreeMaker等）可讓您將HTML分成可重複使用的塊。例如。你有一個<div>顯示出現在你網站上很多地方的廣告 - 你可以編寫一個包含<div>及其內容的文件一次（使用Velocity：一個'myAd.vm'文件），然後將其加載到任何需要的頁面（使用速度：適用#parse('myAd.vm')維護正確的CSS Javascript和使用模板引擎 - 一個矛盾？

我喜歡將這些.vm文件當作函數，它們會被「調用」（解析）並吐出文本內容，它們可以有「參數」 - 在Velocity中，您可以只用#set($myParam = 'foo')在解析'myAd.vm'文件之前，並在該文件中使用該變量。

我的問題是：如何在自己的文件中定義CSS和Javascript的正確方法適用於？

'myAd.vm'需要CSS樣式，您可以在該文件中使用<style>標籤定義該CSS - 這將導致在其<body>中帶有樣式標籤的HTML文檔 - 不在<head>中，當然不會在一個單獨的文件中。

或者，您可以在單獨的'myAd.css'文件中定義'myAd.vm'需要的CSS，並要求解析'myAd.vm'的任何HTML文檔的頭標記中都有一個<LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css">。這是一個問題，因爲它使事情變得更加複雜和繁瑣，並且 - 您可能希望根據條件實際解析'myAd.vm'文件（例如，在Velocity中，您可能有#if(someCondition) #parse('myAd.vm') #end） - 這意味着您不需要事實上事先知道頭標籤是否應鏈接到該外部CSS文件。

有什麼想法？謝謝。

來源

2011-12-01 bloodcell

模板引擎增加了相當多的服務器開銷，並經常禁用或限制瀏覽器的緩存系統。您需要考慮清潔代碼是否值得性能權衡。對於我工作的項目，我們選擇使用HTML的模板，但不適用於CSS和JavaScript，因爲它們非常簡單。我們將CSS和JavaScript分成單獨的文件來創建一些結構。您應該使用Safari/Chrome的網絡檢查員來檢查您的性能（請注意延遲部分）。我們使用HTML模板來確定要在 –

中包含哪些CSS/JavaScript文件，因此如果您有一個包含在頁面中的HTML模板，則頁面頭部會有一行加載模板的CSS \ JS，加載實際模板的頁面正文中的另一行？ – bloodcell

我們有一系列用於渲染頁面內容的模板，我們首先進行渲染。處理這些內容時，它們會附加到頁面所需的css/javascript文件數組。然後，一旦他們被處理，我們將其嵌入到一個「主」模板中，其中包括''標籤，站點導航和頁腳。主模板生成內容需要的任何css/script標籤。 –

是香港專業教育學院使用的大部分框架爲你做出某種函數調用那種行爲作爲一個包括了CSS或js文件的能力，這些都是然後在頭部到外部文件輸出。在許多casses中，我實際上通過一個縮小器來運行所有這些，所以最終只有一個css和一個js文件。

通過這種方式，您可以從視圖偏分內添加到資產堆棧，並將東西直接放在頭部。

來源

2011-12-01 00:48:35 prodigitalson

我不知道我關注你，你在視圖partial（=模板）中定義CSS，然後使它出現在文檔頭部？ – bloodcell

是的，所以在一個視圖中，你可能會看到類似於'include_stylesheet（'partial-name.css'）'，然後將其添加到在head標籤中獲取輸出的堆棧。 – prodigitalson

Apache Wicket（基於組件的框架）允許您通過繼承系統將它稱爲「標題貢獻」（現在Wicket 1.5中的「renderHead」方法）添加爲其頁面組成的一部分。這意味着，雖然頁面只定義了總HTML的一大塊被渲染，它仍然可以添加一些東西到整個文檔的<頭>，因此包括<爲您的JavaScript和CSS文件的鏈接>標籤在正確的地方。

對於非基於組件的框架，作爲其「自然模板」功能的結果，Thymeleaf模板引擎（可以與Spring MVC一起使用）允許您通過包含來自其他頁面的片段無論是在<頭>和<身體>，這在一定程度上解決了您的問題），而不是「繼承爲本」的方針自然喜歡的sitemesh或瓷磚組成框架。

問候，丹尼爾。

來源

2011-12-01 17:54:35

維護正確的CSS \ Javascript和使用模板引擎 - 一個矛盾？

回答

相關問題