baiduTemplate希望創(chuàng)造一個(gè)用戶覺(jué)得“簡(jiǎn)單好用”的JS模板引擎

應(yīng)用場(chǎng)景：前端使用的模板系統(tǒng) ? 或者 ?后端javascript環(huán)境發(fā)布頁(yè)面

功能概述：提供一套模板語(yǔ)法，用戶可以寫(xiě)一個(gè)模板區(qū)域，每次根據(jù)傳入的數(shù)據(jù)，生成對(duì)應(yīng)數(shù)據(jù)產(chǎn)生的HTML片段，渲染不同的效果。

特性：語(yǔ)法簡(jiǎn)單，學(xué)習(xí)成本低，開(kāi)發(fā)效率低，性價(jià)比較高（使用的是javascript原生語(yǔ)法），功能強(qiáng)大，如分隔符可以自定義多種功能。

首先肯定的要引入js代碼吧！

模板：

? ? ? <%for (var i = 0;i<list.length;i++)%>

? ? ? ? ? ? ? ? ? ? <li>用戶名：<%=list[i]%></li>

? ? ? ? ?<%}%>

</script>

把數(shù)據(jù)交給模板，生成html代碼

? ? ? ? ? ?var html = baidu.template('user-liat',data);

把生成的html代碼片段賦值到div中

? ? ? ? ? ?document.querySelector('.users').innerHTML=html;

artTemplate

性能卓越支持運(yùn)行時(shí)調(diào)試，安全，支持預(yù)編譯，可將模板轉(zhuǎn)換成為非常精簡(jiǎn)的js文件，模板語(yǔ)法簡(jiǎn)介，無(wú)需前綴引用數(shù)據(jù)，有簡(jiǎn)介版本與原生語(yǔ)法版本可選，支持所有流行的瀏覽器。

快速上手：

編寫(xiě)模板：

和baiduTemplate一樣，使用一個(gè)type="text/html"的標(biāo)簽存放模板。

<h1>{{title}}</h1>

<ul>

? ? ? ? ?{{each list as value i}}

? ? ? ? ? ? ? ? <li>索引 {{i + 1}} : {{ value }}</li>

? ? ? ? ? {{/each}}

</ul>

</script>

渲染模板

var data = {

? ? ? ? ? ? ? ? ? ? title:"標(biāo)簽"，

? ? ? ? ? ? ? ? ? ? list:['文藝'，‘博客’，‘?dāng)z影’，‘電影’，‘民謠’]

? ? ? ? ? ? ? ? ? ? }；

var html = template('text',data);

document.getElemnetById('content').innerHTML = html;