Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

template.js 一款javascript模板引擎,简单,好用,支持webpack和fis

License

Notifications You must be signed in to change notification settings

suddle/template.js

Open more actions menu
 
 

Repository files navigation

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

功能概述

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

特性

  • 模版编译,渲染
  • 支持所有主流浏览器及Node(UMD)
  • JavaScript原生语法
  • 丰富的自定义配置
  • 支持数据过滤
  • 异常捕获功能
  • 伪子模版
  • 功能专一,简单好用

兼容性

  • Node 0.10+
  • Safari 6+ (Mac)
  • iOS 5+ Safari
  • Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
  • Firefox 4+ (Windows, Mac, Android, Linux)
  • Internet Explorer 6+ (Windows, Windows Phone)
  • Opera 10+ (Windows, linux, Android)

下载

第一种方法,推荐使用npm安装和更新

$ npm install template_js

第二种方法,或者你也可以在GitHub,下载源文件或压缩包

如何使用?

支持全局变量、AMD、commonjs、es6等模块系统

传统用法

<script src="template.js"></script>
<script>
    window.template()
</script>

AMD

require(['template'], function (template) {
    template()
});

commonjs

var template = require('template_js')

快速上手

编写模版

使用一个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目录。

文档

API

测试

template.js 包含完整的单元测试和性能测试。详情请见test目录。

自动化

Fis

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

webpack

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

贡献指南

如果你想为template.js贡献代码,请采用fork + pull request 方式,并在发起pr前先将master上超前的代码rebase到自己的分支上。

在目录运行如下命令,完成验证测试编译过程,确保无误:

$ npm install -g mocha@~2.3.4 # 安装mocha
$ npm install # 安装依赖
$ mocha test # 运行测试代码

发布npm

$ npm publish

报告问题

作者

yanhaijing

为什么会有这个项目

已经有了那么多现成的模板引擎,为什么我还要重新发明轮子呢。其实主要是《只有20行Javascript代码!手把手教你写一个页面模板引擎》读这篇文章的产物,并结合了BaiduTemplate和artTemplate的特色,还有我自己的一些想法。如果你像我一样好奇,那么可以尝试。

更新日志

CHANGELOG.md

计划列表

TODO.md

谁在使用

想了解都有谁在使用,点击这里

相关链接

About

template.js 一款javascript模板引擎,简单,好用,支持webpack和fis

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.7%
  • HTML 3.8%
  • CSS 0.5%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.