分享一种前端模板化的思路

本文是针对后台同学自己写网页的一种思路分享。
 
传统网页编写是服务端渲染，pythton的jinjia2；c#的asp；java的jsp等，这种方式依赖各自的服务端模板引擎，且没有前后分离，性能、seo有一定的瓶颈。
前后分离的写法下，前端产生了自己的模板引擎handlebarsjs  ，vue、react都有自身的模板。这样，需要基本掌握nodejs的package.json，还有模板引擎本身的语法，并且依赖nodejs。
 
下面介绍一下本文的方法，简单来说就是什么都不用，直接撸html就ok了。
如果页面小于10个，遇到需要模板的地方使用复制的方法即可，这样就做到了无依赖。
页面较多的话，自己用xml解析写个小工具即可，这样可以不依赖nodejs、选择一个css框架（如bootstrap）配合jq的ajax就行了，也不用传统的服务端模板。
 
这样有个注意事项是需要自己按严格xml格式写html，一般问题不大。 
下面是demo

1. public partial class Form1 : Form
2.     {
3.         public Form1()
4.         {
5.             InitializeComponent();
6.         }
8.         string xmlPath = System.Windows.Forms.Application.StartupPath + "\\html\\home.html";
10.         private void buttonBuild_Click(object sender, EventArgs e)
11.         {
12.               
13.             string navStr = "<ul class="navbar-nav ms-auto  "><li class="nav-item ">主页</li><li class="nav-item">下载</li></ul>";
16.             XmlDocument navDoc = new XmlDocument();
17.             navDoc.LoadXml(navStr);
20.             
22.             XmlDocument xmlDoc = new XmlDocument();
23.             xmlDoc.Load(xmlPath);
24.             XmlNode divNode = xmlDoc.SelectSingleNode("html/body/nav/div/div");
26.            
27.             XmlElement divElement = (XmlElement)divNode;
29.             XmlNode   navNode= xmlDoc.ImportNode(navDoc.DocumentElement, true);
32.             divElement.AppendChild(navNode);
34.             xmlDoc.Save(xmlPath);
36.         }
38.         private void buttonActive_Click(object sender, EventArgs e)
39.         {
40.             
41.             XmlDocument xmlDoc = new XmlDocument();
42.             xmlDoc.Load(xmlPath);
43.             XmlNode homeNode = xmlDoc.SelectSingleNode("html/body/nav/div/div/ul/li/a");
44.             System.Diagnostics.Trace.WriteLine(homeNode.Name);
46.             XmlElement homeElement = (XmlElement)homeNode;
47.             string classStr = homeElement.GetAttribute("class");
49.             string activeStr = "active";
50.             int activeIndex = classStr.IndexOf(activeStr);
51.             if (activeIndex < 0)
52.             {
53.                 classStr += " " + activeStr;
54.                 homeElement.SetAttribute("class", classStr);
55.             }
59.             xmlDoc.Save(xmlPath);
60.         }
61.     }

复制代码

 
demo代码，c#写的。
https://files.cnblogs.com/files/qingse/HtmlBuildTool.zip?t=1755839073&download=true
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！