js对象自动属性绑定html模版插件

对于一些不是用React, Vue框架的前后端不分离的老网站，通过ajax请求数据后输出html页面比较繁琐，一般使用拼接html的方式。于是写了一个插件减少拼接html的工作量。

Object.prototype.bindList = function (tpl, options) {
  var html = "";
  if (options && options.container && options.container.el) {
    html += `<${options.container.el}`;
    if (options.container.attrs) {
      var keys = Object.keys(options.container.attrs);
      if (keys && keys.length > 0) {
        for (var i = 0; i < keys.length; i++) {
          var key = keys[i];
          var value = options.container.attrs[key];
          html += ` ${key}="${value}"`;
        }
      }
    }
    html += ">";
  }
  if (this && this.length > 0) {
    for (var i = 0; i < this.length; i++) {
      var item = list[i];
      html += item.bindItem(tpl);
    }
  }
  if (options && options.container && options.container.el) {
    html += `</${options.container.el}>`;
  }
  return html;
};
Object.prototype.bindItem = function (tpl) {
  if (tpl) {
    var keys = Object.keys(this);
    if (keys && keys.length > 0) {
      for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        var value = this[key];
        tpl = tpl.replaceAll(`{${key}}`, value);
      }
    }
  }
  return tpl;
};

当api返回一个对象数组时，直接通过调用list.bindList()方法生成html。

假设我们请求api拿到一个文章列表，我们先定义文章列表项的模版template。

// mock一个api返回的list对象
var list = [
  { id: 1, title: "文章标题1" },
  { id: 1, title: "文章标题2" },
];
// 定义绑定数据的html模版
var tpl = `
<li>
  <a href="/articles/{id}">{title}</a>
</li>
`;

然后调用扩展方法bindList()

var html = list.bindList(tpl);

生成的html结果：

<li>
   <a href="/articles/1">文章标题1</a>
</li>

<li>
   <a href="/articles/1">文章标题2</a>
</li>

我们也可以为list设置一个父元素容器

var html = list.bindList(tpl , new{
  container:{
    el:"ul",
    attrs:{
       id:"articleList",
       class:"article-list"
    }
  }
});

生成的Html结果：

<ul id="articleList" class="article-list">
  <li>
     <a href="/articles/1">文章标题1</a>
  </li>
      
  <li>
     <a href="/articles/1">文章标题2</a>
  </li>
</ul>

这样Html模版和数据对象不再使用加号拼接，看起来比较清晰了，只要关注模版就行了。