js 模板引擎 - 超級強大


本來沒想寫這篇文章,但是網上誤導大眾的文章太多了,所以今天就抽出半小時時間談一下我對前端模板引擎的感受吧。

前端模板引擎相信大家都再熟悉不過了,市面上非常多的號稱最好、最快、最牛逼的,隨便就能找到一大把,但是真的深層次的對比才能發現其中的優劣,經過這段時間對各個模板引擎的使用分析,最終選定一款,也是目前我見過的最為強大的模板引擎:nodetpl

官網地址:http://www.nodetpl.com/cn/

這篇博客是本人的使用心得,不同意見的可以留言一起討論。

nodetpl 相比其它幾款模板,有非常獨特的地方:

1. 完美支持模板級樣式,有效解決樣式沖突問題,別的模板幾乎都沒做到

考察了市面上多款模板引擎,包括國外用的比較多的模板引擎,幾乎都無法完美地支持模板級CSS和JS,這給平時開發帶來許多不便。

模板應當是一個獨立的模塊,不管應用到任何一個頁面,他都不應當由外部定義樣式或者綁定事件,nodetpl 這一點做的比較好,下面是一個簡單的例子:

模板代碼:

<style>
h1 {
  color: #f00;
}
</style>
<div id="$ROOT">
  <h1>Hello <?=@name?></h1>
</div>

調用:

nodetpl.render(html, {
  name: 'zhangsan'
}, function(d) {
  console.log(d);
});

最終編譯后的結果是這樣的:

<style>#nodetpl_g_002501583635846283 h1 {  color: #f00;}</style>
<div id="nodetpl_g_002501583635846283">
  <h1>Hello zhangsan</h1>
</div>

非常神奇,nodetpl 自動解析成一個 ID 為 nodetpl_g_002501583635846283 的DOM,樣式能夠完美地運行在當前模板中,而且不會影響到外部頁面!

2. 支持模板級js,同樣,別的模板也不具備這功能

同樣,書寫模板的 js 代碼也和上面 CSS 一樣做了強大的隔離:

模板代碼:

<style>
...
</style>
<div id="$ROOT">
  <h1>Hello <?=@name?></h1>
</div>
<script>
ROOT.style.border = '1px solid #00f';
</script>

在 js 里面直接操作 “ROOT” 就可以了。

可以認為一個模板就是一個完完全全獨立的盒子,該盒子可以運行在任何頁面中,而不會對任何環境引發沖突。

用過其他的模板,平時使用不感覺有問題,但是時間久了,就會引發這樣那樣的問題,原因就是模板沒有很好地做好樣式和JS的隔離,比如:調用了 a 模板,然后又調用了 b 模板,由於 a 模板 和 b 模板里面都定義了一個同名的 css,最終造成兩個模板的樣式亂掉,js也同樣存在沖突的問題,這個問題將會非常被動。

3. 支持 AMD / CMD,甚至 ES6

由於公司涉及到前端項目、后端項目(node.js),同時由於歷史原因,前端代碼有用 seajs 的,有的是頁面直接調用的,發現 nodetpl 能夠兼容各種開發模式:

頁面直接引用、seajs引用、node.js 服務端引用,perfect!

目前 ES6 公司還沒用到,不過看似蠻吊的。

4. 支持所有js語法,上手容易,是團隊開發不錯的選型

當初公司選型的時候,對比過幾款,不過最終因為學習成本較高而放棄,畢竟是團隊開發,讓一個團隊的同事學習一門新的語法,執行起來還是不容易的。

nodetpl 做的不錯,支持所有原生js語法,比如:

<?
  var a=1;
  if(a === 1) {
?>
    <h1>Hello, <?=a?></h1>
<?} else {?>
    <h1>Welcome</h1>
<?}?>
<ul>
<?for(var i=0; i<@users.length; i++) {?>
<li><?=@users[i]?></li>
<?}?>
</ul>

<??> 里面是純 js,所有人都會寫。

5. 支持復雜的多模板

若一個模板邏輯比較復雜,還可以將模板分割成多個小模板,通過下面的方式:

<template name="main">
  // template code 1
</template>
<template name="othertemplate">
  // template code 2
</template>

模板之間項目調用直接通過 include('othertemplate') 就包過來了,很方便。

6. 強大的技術支持(作者特勤快,當天反饋問題幾乎當天就能發布新版)

遇到過一次,公司項目需要實現 amd 和 get 共用,nodetpl 當時未能支持,通過QQ與作者協商,作者說評估一下合理性,然后當晚就給回復,說更新一下新版本吧,你的需求已經支持到了。

7. 性能超級牛叉

別信網上別的一些模板吹噓的什么性能對比結果什么的,有的直接做個緩存然后拿來跟別的不緩存的比,當然牛逼了,通過分析 nodetpl 的原理發現,nodetpl 幾乎不占性能!

官網也給了說明,在有的模式下,直接都不需要引用 nodetpl 類庫,就直接能跑起來!

8. 支持幾乎所有瀏覽器,包括變態的IE6,還支持運行在 node 服務端

目前我司node項目已經在用,框架是express.js,模板引擎是nodetpl

上面只是我幾個月來的感受,還有好多實用功能,就不寫了,感興趣的看官網上的文檔吧。

好多年沒寫博客了,今天一口氣寫這么多,今天算是力推這款模板吧,不知nodetpl的作者看到會不會請我喝茶,哈哈。。。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM