利用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;
    }


}

View Code

 

 

 

 

 

 編譯後的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;
    }());

View Code

 

 

 

 

 

 

由於是基於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