前端虛擬DOM模板引擎：Vdt.js

jopen 10年前發布 | 30K 次閱讀 Vdt.js 前端技術

vdt.js 是一個在瀏覽器中使用的前端模板引擎，基于virtual-dom庫開發，采用虛擬dom的思想實現模板的渲染與更新。

相對于傳統前端模板引擎而言，優勢在于：模板更新便捷而高效。因為利用virtual dom技術，vdt模板渲染的結果并非傳統的html字符串，而是dom，所以更新操作不會導致整個模板重繪。

目前該工具已在金山云項目中大量應用

更多信息，請參考：http://javey.github.io/vdt.html，期待大家關于文檔和代碼的pull request。

示例： 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello Vdt</title>
    <script type="text/javasciprt" src="dist/vdt.js"></script>
</head>
<body>
    <div id="example_container"></div>
    <script type="text/vdt" id="example_template">
        <div>
            <p>Hello {name}</p>
            <p>Now: {time}</p>
        </div>
    </script>
    <script type="text/javascript">
        var template = document.getElementById("example_template").innerHTML,
            vdt = Vdt(template),
            dom = vdt.render({name: "Vdt", time: new Date().toLocaleTimeString()});
        document.getElementById("example_container").appendChild(dom);
        setInterval(function() {
            vdt.data.time = new Date().toLocaleTimeString();
            vdt.update();
        }, 1000);
    </script>
</body>
</html>

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！