前端模板引擎

前言

學習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