分享一種前端模板化的思路
本文是針對后臺同學(xué)自己寫網(wǎng)頁的一種思路分享。
傳統(tǒng)網(wǎng)頁編寫是服務(wù)端渲染,pythton的jinjia2;c#的asp;java的jsp等,這種方式依賴各自的服務(wù)端模板引擎,且沒有前后分離,性能、seo有一定的瓶頸。
前后分離的寫法下,前端產(chǎn)生了自己的模板引擎handlebarsjs ,vue、react都有自身的模板。這樣,需要基本掌握nodejs的package.json,還有模板引擎本身的語法。
下面介紹一下本文的方法,簡單來說就是什么都不用,直接擼html就ok了。
如果頁面小于10個(gè),遇到需要模板的地方使用復(fù)制的方法即可,這樣就做到了無依賴。
頁面較多的話,自己用xml解析寫個(gè)小工具即可,這樣可以不依賴nodejs、選擇一個(gè)css框架(如bootstrap)配合jq的ajax就行了,也不用傳統(tǒng)的服務(wù)端模板。
這樣有個(gè)注意事項(xiàng)是需要自己按嚴(yán)格xml格式寫html,一般問題不大。
下面是demo
public partial class Form1 : Form { public Form1() { InitializeComponent(); } string xmlPath = System.Windows.Forms.Application.StartupPath + "\\html\\home.html"; private void buttonBuild_Click(object sender, EventArgs e) { string navStr = "<ul class=\"navbar-nav ms-auto \"><li class=\"nav-item \"><a class=\"nav-link \" href=\"#\" style=\"min-width: 60px\">主頁</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\" style=\"min-width: 60px\">下載</a></li></ul>"; XmlDocument navDoc = new XmlDocument(); navDoc.LoadXml(navStr); XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); XmlNode divNode = xmlDoc.SelectSingleNode("html/body/nav/div/div"); XmlElement divElement = (XmlElement)divNode; XmlNode navNode= xmlDoc.ImportNode(navDoc.DocumentElement, true); divElement.AppendChild(navNode); xmlDoc.Save(xmlPath); } private void buttonActive_Click(object sender, EventArgs e) { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); XmlNode homeNode = xmlDoc.SelectSingleNode("html/body/nav/div/div/ul/li/a"); System.Diagnostics.Trace.WriteLine(homeNode.Name); XmlElement homeElement = (XmlElement)homeNode; string classStr = homeElement.GetAttribute("class"); string activeStr = "active"; int activeIndex = classStr.IndexOf(activeStr); if (activeIndex < 0) { classStr += " " + activeStr; homeElement.SetAttribute("class", classStr); } xmlDoc.Save(xmlPath); } }
demo代碼,c#寫的。
浙公網(wǎng)安備 33010602011771號