纯javascript 静态模板

纯JavaScript静态模板是指使用JavaScript语言来创建和操作网页中的静态内容模板，而不依赖于其他模板语言或框架。这种模式通常不需要服务器端的渲染，而是在客户端运行时动态生成HTML代码。

实现纯JavaScript静态模板的关键是利用JavaScript中的字符串拼接和变量替换功能来生成HTML代码。基本的做法是先创建一个包含模板内容的JavaScript字符串，然后使用变量或函数来替换其中的占位符，最后通过将字符串插入到指定的DOM元素中来在网页中展示模板。

以下是一个简单的示例代码：

// 定义模板字符串
var template = "<h1>{{title}}</h1><p>{{content}}</p>";

// 定义数据对象
var data = {
  title: "欢迎来到我的博客",
  content: "这是我的第一篇文章"
};

// 替换模板中的占位符
var html = template.replace("{{title}}", data.title)
                  .replace("{{content}}", data.content);

// 将生成的HTML代码插入到指定DOM元素中
document.getElementById("myDiv").innerHTML = html;

在上述代码中，首先定义了一个包含占位符的模板字符串，然后定义了一个数据对象，其中包含了与模板中占位符对应的值。接着使用JavaScript字符串的replace方法来替换模板中的占位符，生成最终的HTML代码。最后，通过document对象的getElementById方法找到指定的DOM元素，并将生成的HTML代码插入到其中。

纯JavaScript静态模板的优点是简单、灵活，不需要任何额外的工具或框架，只需依赖于JavaScript本身。缺点是对于复杂的模板，可能需要更多的拼接操作，不如使用专门的模板引擎方便。