前端模板引擎

前言

学习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