本文共 2854 字，大约阅读时间需要 9 分钟。

简单模板模式是一种通过格式化字符串拼接来生成视图的技术，旨在减少视图层面上的节点操作，从而解决数据与结构的强耦合性问题。与模板方法模式相比，它更注重技术实现的简洁性和灵活性。

节点操作

在传统的节点操作中，生成列表往往涉及繁琐的DOM操作。例如：

const list = [  { name: 'Google', url: 'https://www.google.com' },  { name: 'Baidu', url: 'https://www.baidu.com' },  { name: 'Bing', url: 'https://cn.bing.com' }];const root = document.getElementById('root');const ul = document.createElement('ul');list.forEach((item) => {  const li = document.createElement('li');  const a = document.createElement('a');  a.href = item.url;  a.target = '_blank';  a.innerText = item.name;  li.appendChild(a);  ul.appendChild(li);});root.appendChild(ul);

这种方法虽然功能上可行，但当数据规模扩大时，代码的可读性和维护性会显著下降。

基于字符串拼接的实现

为了减少节点操作的复杂性，开发者常常采用字符串拼接的方式。例如：

const template = `
   
    ${list.map((item) => `  
    
    ${item.name}  
`).join('')}
   
`;root.innerHTML = template;

这种方法虽然简化了操作，但由于字符串与数据的强耦合，一旦数据或结构发生变化，整个视图就需要重新生成，导致维护成本上升。

模板渲染

为了进一步提升代码的可读性，开发者引入了模板渲染的概念。通过将数据格式化到模板字符串中，实现视图的渲染。例如：

const formatString = (str, data) => {  return str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key]);};const template = ['
   
    '];list.forEach((item) => {  template.push(    `
    
${name}
`      .replace('{{url}}', item.url)      .replace('{{name}}', item.name)  );});template.push('
   
');root.innerHTML = template.join('');

这种方法通过动态替换模板字符串，显著提升了代码的可读性和维护性。

模板引擎的简单实现

为了更灵活地处理模板语法，开发者常常使用模板引擎。例如，可以通过以下方法实现简单的模板语法：

function render(element, data) {  const originString = element.innerHTML;  let html = originString    .replace(/"/g, '\\\"')    .replace(/\s+/g, ' ')    .replace(/\{\{(.+?)\}\}/g, (match, key) => data[key]);  html = `var targetHTML = "${html}";return targetHTML;`;  const parsedHTML = new Function(...Object.keys(data))(...Object.values(data));  element.innerHTML = parsedHTML;}

通过这种方式，开发者可以在模板字符串中嵌入多种数据字段，并在需要时动态替换内容。

AST解析

为了进一步优化模板渲染过程，开发者可以采用AST（抽象语法树）解析的方式。例如：

function parseAST(root) {  const node = {    parent: null,    type: 'tag',    tagName: root.localName,    children: [],    attr: {}  };  Array.from(root.attributes).forEach(item => {    node.attr[item.name] = item.value;  });  Array.from(root.childNodes).forEach(child => {    const childNode = parseAST(child);    childNode.parent = node;    node.children.push(childNode);  });  return node;}function generateHTMLTemplate(AST) {  let template = '';  function traverse(node) {    if (node.type === 'tag') {      template += `<${node.tagName}>`;      traverse(node.children[0]);      traverse(node.children[1] || node.children[2] || node.children[3]);      template += `
   `;    } else {      template += node.content;    }  }  traverse(AST);  return template;}const root = document.getElementById('root');const ast = parseAST(root);const template = generateHTMLTemplate(ast);render(root, template, data);

这种方式通过解析模板字符串为AST，进一步提升了渲染效率，特别是在数据频繁变动的情况下。

每日一题

GitHub - WindrunnerMax/EveryDay

参考