Nature Preceded Machines
Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

template_js

2.2.1 • Public • Published

template

一款javascript模板引擎,简单,好用,支持webpack, rollup和fis。

功能概述

提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

💊 兼容性

单元测试保证支持如下环境:

IE CH FF SF OP IOS Android Node
6+ 29+ 55+ 9+ 50+ 9+ 4+ 0.10+

注意:编译代码依赖ES5环境,对于ie6-8需要引入es5-shim才可以兼容,可以查看demo/demo-global.html中的例子

🚀 使用者指南

通过npm下载安装代码

$ npm install --save template_js

如果你是node环境

var template = require('template_js');

如果你是webpack等环境

import template from 'template_js';

如果你是requirejs环境

requirejs(['node_modules/template_js/dist/index.aio.js'], function (template) {
    // xxx
})

如果你是浏览器环境

<script src="node_modules/template_js/dist/index.aio.js"></script>

快速上手

编写模版

使用一个type="text/html"的script标签存放模板,或者放到字符串中:

<script id="tpl" type="text/html">
<ul>
    <%for(var i = 0; i < list.length; i++) {%>
        <li><%:=list[i].name%></li>
    <%}%>
</ul>
</script> 

渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

输出结果:

<ul>
    <li>yan</li>
    <li>haijing</li>
</ul>

更多例子,请见demo目录。

自动化

Fis

template.js从0.2.0开始支持fis,详情请看这里

webpack

template.js从0.6.1开始支持webpack,详情请看这里

rollup

template.js从0.6.1开始支持rollup,详情请看这里

📑 文档

API

贡献者列表

contributors

⚙️ 更新日志

CHANGELOG.md

✈️ 计划列表

TODO.md

Install

npm i template_js

DownloadsWeekly Downloads

86

Version

2.2.1

License

MIT

Unpacked Size

38.4 kB

Total Files

9

Last publish

Collaborators

  • avatar