本來沒想寫這篇文章，但是網上誤導大眾的文章太多了，所以今天就抽出半小時時間談一下我對前端模板引擎的感受吧。 前端模板引擎相信大家都再熟悉不過了，市面上非常多的號稱最好、最快、最牛逼的，隨便就能找到一大把，但是真的深層次的對比才能發現其中的優劣，經過這段時間對各個模板引擎的使用分析，最終選定一款，也是 ...
本來沒想寫這篇文章，但是網上誤導大眾的文章太多了，所以今天就抽出半小時時間談一下我對前端模板引擎的感受吧。
前端模板引擎相信大家都再熟悉不過了，市面上非常多的號稱最好、最快、最牛逼的，隨便就能找到一大把，但是真的深層次的對比才能發現其中的優劣，經過這段時間對各個模板引擎的使用分析，最終選定一款，也是目前我見過的最為強大的模板引擎：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的作者看到會不會請我喝茶，哈哈。。。
