AJAX裏使用模板引擎

時間 2020-08-09

標籤 ajax 使用模板引擎欄目 Ajax 简体版

原文原文鏈接

1、概述：

處理響應數據渲染能夠使用模板引擎（實際上就是一個API，目的是更容易的將數據渲染到HTML中）
目前市面上有許多模板引擎，能夠參考
推薦使用artTemplate，它採用做用域預聲明的技術來優化模板渲染速度，同時支持 NodeJS 和瀏覽器。

2、模板引擎步驟：

①選擇一個模板引擎，下載模板引擎文件html

②引入到頁面中git

③準備一個模板github

④準備一個數據web

⑤經過模板引擎的js提供的一個函數將模板和數據整合獲得渲染結果HTML瀏覽器

⑥將渲染結果的HTML設置到默認元素的innerHTML中函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p"></p>
    <script src="lib/template-web.js"></script>
    <script type="text/template" id="tpl">
        我叫 {{name}}
        我來自 {{provices}}
        個人愛好是 {{each hobbies}} {{$value}} {{/each}} 
    </script>
    <script>
        var data={
            name:'eric',
            provices:'江西',
            hobbies:['代碼','運動','電腦遊戲']
        }
        var ret=template('tpl',data);
        var p=document.getElementById('p');
        p.innerHTML=ret;
    </script>
</body>
</html>