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

后沛若 · 4 天前

本文是针对后台同学自己写网页的一种思路分享。

传统网页编写是服务端渲染，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

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 ">主页</li><li class="nav-item">下载</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#写的。
https://files.cnblogs.com/files/qingse/HtmlBuildTool.zip?t=1755839073&download=true

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

账号		自动登录	找回密码
密码			立即注册

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

浏览过的版块

签约作者