Template.js 前端模板输出引擎

[hexson]

前端模板输出引擎，不依赖第三方库，大小仅2.42KB，支持 if else each。点击下载(v1.0.0)

栗子

<!-- 引入js文件 -->
<script src="template.min.js"></script>

<!-- html模板 -->
<script id="tpl" type="text/template">
  <h3>Hello, {{ name }}!</h3>
  <p>hobby: {{other.hobby}}</p>
  {{if location == 'hangzhou'}}
    <p>You are in hangzhou.</p>
  {{else}}
    <p>You are not in hangzhou.</p>
  {{/else}}
  <p>Your friends:</p>
  <ul>
    {{each friends as val i}}
      <li>{{val}}</li>
    {{/each}}
  </ul>
</script>

var data = {
  name: "Hexson",
  location: "hangzhou",
  friends: [
    "Tom",
    "David",
    "Mark",
    "Richard",
    "Zack"
  ],
  other: {
    hobby: "music read coding..."
  }
};

/* output html */
document.write(template('tpl', data));

补充

/*
 * 支持连续判断:
 * {{if true}}
 * ...
 * {{else if false}}
 * ...
 * {{else}}
 * ...
 * {{/else}}
 * 
 */

API

template: String id, {Object data}

id即为模板的id，该方法会在内部自动获取模板内容；data为渲染模板时的数据，其类型为object，数据内部可以是任何类型。调用： template(id, data)

template.render: String tpl, {Object data}

该方法不同于上一个方法，内部不会自动获取模板内容，而是需要将模板字符串直接传入，其他一样。调用： template.render(tpl, data)

template.trim: String str

该方法会将传入参数的头尾空格去掉，如果是特殊类型，如 null 等会直接返回本身。调用： template.trim(str)

template.jsonStringify: Any value

该方法会将传入的参数进行 json 序列化的操作。调用： template.jsonStringify(value)

template.tplSetting: Options value

template.tplSetting.openIdentify: 引擎解析语法开始标识，默认 {{

template.tplSetting.closeIdentify: 引擎解析语法结束标识，默认 }}

还有很多想法有待去实现，我会尽量抽时间去补充，先把第一个版本放出来。若您有问题，请发邮件给我，谢谢