前言

学习 Vue 的原理时，我对 vue 解析模板的过程十分好奇。我发现这是一个前端模板引擎方面的知识，出于学习目的，就造了一个简单的前端模板引擎。我把它发到了 npm 上，以下是它的 README。

Fontend-tpl

这是一个简单的前端模板引擎

语言

English || 中文

用法

浏览器

<script src="dist/tpl.js"></script>
<!--
    如果是生产环境，你可能需要换成以下文件：<script src="dist/tpl.bundle.js"></script>
-->
<script>
    var tpl = new Tpl()
    var data = {
        divClass: 'div',
        out: 'outer'
    }
    var htmlString = ' \
        <div class="{{divClass}}"> \
            <p>{{"inner"}}</p> \
        </div> \
        <p>{{out + "p"}}</p> \
    '
    var dom = tpl.parse(htmlString).render({data: data}).getDom()
    /**
     * dom is:
     * [
     *  <div class="div">
     *      <p>inner</p>
     *  </div>,
     *  <p>outerp</p>
     * ]
    */
</script>

CommonJS

var Tpl = require('frontend-tpl')
var tpl = new Tpl()
// 用法和上面一致

注意：
如果你希望代码运行在 Node 环境，你需要提供一个 DOM 环境。比如，你可以引入 jsdom 模块。

Tests

你可以下载该仓库，并运行 npm test 来查看单元测试结果。

Docs

如果你希望获取更多信息，请看 API Document