Giter VIP home page Giter VIP logo

template.js's Introduction

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

谁在使用

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

相关链接

template.js's People

Contributors

yanhaijing avatar yujiangshui avatar walkskyer avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.