# 简单模板模式

简单模板模式(Simple template):通过格式化字符串拼凑出视图,避免创建时视图时会有大量的节点操作。优化内存开销。

const A = A || {};
A.root = document.getElementById("container");

A.strategy = {
  listPart: function(){},
  codePart: function(){}
  // ...
}

# 模板渲染方法

// data         {demo: "this is a demo"}
// template     <a>{#demo#}</a>
// render ==>   <a>this is a demo</a>
A.formateString = function(str, data){
  return str.replace(/\{#(\w+)#\}/g, (match, key)=>{
      return typeof data[key] == undefined ? "" : data[key];
  })
}
A.strategy.listPart = function (data) {
  const listData = data.data.list
  const s = document.createElement("div");
  const ul = ""
  const template = `
  <h2>{#h2#}</h2>
  <p>{#p#}</p>
  <ul>{#ul#}<ul>
  ` ;
  const liTemplate = `
  <li>
    <strong>{#strong#}</strong>
    <span>{#span#}</span>
  </li>
  `;
  listData.forEach(item => {
    if (item) {
      // 构造内层
      ul += A.formateString(liTemplate, item)
    }
  })
  data.data.ul = ul
  // 构造外层
  s.innerHTML = A.formateString(template, data.data)
  A.root.appendChild(s);
}

# 模板生成器

对于特殊的模板,我们传入特殊的标识从模板生成器里读取,以后再需要模板时,就不用再花时间设计模板了。

A.view = function (name) {
  const v = {
    code: `<pre><code>{#code#}</code></pre>`,
    img: `<img src="{#src#}" alt="{#alt#}" title="{#title#}" />`,
    part: `<div id="{#id#}" class="{#class#}">{#part#}</div>`,
    theme: `
    <div>
      <h1>{#title#}</h1>
      <p>{#content#}</p>
    </div>
    `
  }
  if (Object.prototype.toString.call(name) == "[object Array]") {
    let template = "";
    let len = name.length;
    for (let i = 0; i < len; i++) {
      template += arguments.callee(name[i]);
    }
    return template;
  } else {
    return v[name] ? v[name] : `<${name}>{#${name}#}</${name}>`
  }
}
A.strategy.listPart = function (data) {
  const listData = data.data.list
  const s = document.createElement("div");
  const template = A.view(["h2", "p", "ul"]);
  // 嵌套
  const liTemplate = A.formateString(A.view("li"), {
    li: A.view(["strong", "span"])
  })
  listData.forEach(item => {
    if (item) {
      // 构造内层
      ul += A.formateString(liTemplate, item)
    }
  })
  data.data.ul = ul
  // 构造外层
  s.innerHTML = A.formateString(template, data.data)
  A.root.appendChild(s);
  // ...
}