利用art.template模仿VUE

首先先看一下Typescript代码：

import template = require('art-template/lib/template-web');

interface TemplateBindConfig {
    el: string
    data: object
}

class TmpBind {

    el: string

    template: any

    data: object

    renderFn: any

    // 构造函数
    constructor(config:TemplateBindConfig) {
        // 绑定的容器id
        this.el = config.el;

        // 注入的数据
        this.data = config.data;

        this.renderFn = null
        var nodes=document.querySelector(config.el).children;
        var i=nodes.length;
        if(i>0){
            while(i--){
                if(nodes[i].tagName.toLowerCase()=="script" && nodes[i].getAttribute("type")=="text/html"){
                    // 模版id
                    this.template = nodes[i].innerHTML;
                    break;
                }
            }
        }

        this.render()
    }

    // 渲染模版
    render(data?): void {
        if (data) {
            this.data = data;
        }
        // 解析模版
        if(!this.renderFn){
            this.renderFn= template.compile(this.template);
        }

        const source = this.renderFn(this.data);
        // 更新容器的值
        document.querySelector(this.el).innerHTML = source;

    }

    setData(value: any): void {
        this.data=value;
        this.render();
    }

    // 重新设置模板
    setTemplate(value: any): void {
        this.template = value;
        this.renderFn= template.compile(value);
        this.render();
    }

    // 获取数据
    getData(): object {
        return this.data;
    }

}

编译后的JavaScript代码：

    var TmpBind = /** @class */ (function () {
        // 构造函数
        function TmpBind(config) {
            // 绑定的容器id
            this.el = config.el;
            // 注入的数据
            this.data = config.data;
            this.renderFn = null;
            var nodes = document.querySelector(config.el).children;
            var i = nodes.length;
            if (i > 0) {
                while (i--) {
                    if (nodes[i].tagName.toLowerCase() == "script" && nodes[i].getAttribute("type") == "text/html") {
                        // 模版id
                        this.template = nodes[i].innerHTML;
                        break;
                    }
                }
            }
            this.render();
        }
        // 渲染模版
        TmpBind.prototype.render = function (data) {
            if (data) {
                this.data = data;
            }
            // 解析模版
            if (!this.renderFn) {
                this.renderFn = template.compile(this.template);
            }
            var source = this.renderFn(this.data);
            // 更新容器的值
            document.querySelector(this.el).innerHTML = source;
        };
        TmpBind.prototype.setData = function (value) {
            this.data = value;
            this.render();
        };
        // 重新设置模板
        TmpBind.prototype.setTemplate = function (value) {
            this.template = value;
            this.renderFn = template.compile(value);
            this.render();
        };
        // 获取数据
        TmpBind.prototype.getData = function () {
            return this.data;
        };
        return TmpBind;
    }());

因为是基于art-template/lib/template-web.js 请下载并引用一下。https://github.com/aui/art-template

实用示例：

<button id="button1">设置新值</button>
<button id="button2">获取值</button>
<div id="div1">
    <script type="text/html">
        {{msg}}
        <div>
            <img src="{{url}}"/>
        </div>
        <ul>
            {{each list as item i}}
            <li>{{item}}</li>
            {{/each}}
        </ul>
    </script>
</div>

var vm = new TmpBind({
        el: "#div1",
        data: {msg: "欢迎来到模版绑定的世界", list: ['1', 2, 3, 4, 5], url: "https://www.baidu.com/img/bd_logo1.png"}
    });
    // 设置值
    document.querySelector("#button1").addEventListener("click", function (evt) {
        var data = vm.getData()
        data.msg="欢迎来到模版绑定的世界222222222";
        vm.setData(data);
    })
    // 获取值
    document.querySelector("#button2").addEventListener("click", function (evt) {
        alert(JSON.stringify(vm.getData()))
    })

实现效果如下：

如果这篇文章对您有帮助，您可以打赏我

技术交流QQ群：15129679