### 閑話js前端框架
前端人員=美工+設計+代碼+測試
——題記
**專題文章：**
一、從avalonjs的模板說起
二、龐大的angularjs
三、再也不想碰DOM
四、組件化？有沒有后端的事？
五、再看自己一年前設計的微型渲染引擎
六、在瀏覽器標準上做文章
七、拋開瀏覽器，構建應用容器
八、為何Flash、銀光和Java都在網頁端一蹶不振
本文屬 西風逍遙游 原創, 轉載請注明出處: 西風世界 [http://blog.csdn.net/xfxyy_sxfancy](http://blog.csdn.net/xfxyy_sxfancy)
### 五、再看自己一年前設計的微型渲染引擎
在做了一年網站期間，我主要是以一個后端的身份在工作，有時是php，有時JavaEE，還有python，最常見的工作就是，寫一個接口，將接口獲得的數據判斷一下異常，然后修改格式存入數據庫中。
而我做前端的工作，屈指可數，就偶爾用下avalon，有時用下angularjs，其他的幾乎沒動過。但我在初學前端的時候，卻做過一個現在我看來都是天方夜譚的設計，我制作了一個小型渲染引擎，我給他起名ntml(即將崩壞的html)。
### 需要引入jQuery的引擎
說這貨是個引擎我也是無奈了。
首先，只有一個js類，手動導出符號，還沒寫閉包。使用前還需要提前引入jQuery。。。
我真想說這貨是一個jQuery插件 - -！但他連插件都不算！
引入jQuery的原因其實很簡單，從當時直到現在，我都不會封裝跨平臺的ajax函數！還有xml解析函數！
### 引擎的功能呢？
說起來挺好玩，一共200多行js代碼，又引入了別人的一個庫，實現了這個功能，將這樣的代碼：
~~~
<?xml version="1.0" encoding="utf-8" ?>
<ntml>
<nt-container nt-var=''>
<nt-layout-8-4>
<a-left>
<nt-article>
<a-title>關于nt語法的一些介紹</a-title>
<a-content>
下面我們來簡要介紹一下ntml這種標記式語言。
</a-content>
</nt-article>
</a-left>
<a-right>
<nt-loginform>
<params action='#' method='get' />
</nt-loginform>
</a-right>
</nt-layout-8-4>
</nt-container>
</ntml>
~~~
渲染成這個樣子：
有沒有覺得很有趣？
不過功能確實不多，也就僅僅是這樣一個功能，甚至連什么事件綁定啊，都沒有做。
當然，這里所展示的代碼并不完全，他的工作原理實際上是將xml中聲明的標簽，依次替換為template下預先寫好的模板。對應需要有嵌套的部分，也用屬性指定好每個對應的模板標簽就可以了。
### ntml語法規范
所有需要被ntml解析的標簽前，可以加上’nt-‘，用來被解釋器識別。’nt-‘是標準ntml組件庫的前綴，你也可以自己規定名稱前綴。
eg.
~~~
<nt-login_form class='col-xs-12 col-xs-4'>
</nt-login_form>
~~~
nt對象下面的子對象，所有加’nta-‘前綴的，認為是nt語法中的屬性
eg.
~~~
<nt-article class='col-xs-12 col-xs-8'>
<a-title>關于nt語法的一些介紹</a-title>
<a-date>2014-8-10</a-date>
<a-content>
下面我們來簡要介紹一下ntml這種標記式語言。
<nt-ad class='col-xs-12 col-xs-8'>
</nt-ad>
</a-content>
</nt-article>
~~~
nt對象中的params標簽下的屬性會被解釋為聲明，內容會被解釋為content
eg.
~~~
<nt-article class='col-xs-12 col-xs-8'>
<params title='關于nt語法的一些介紹'
date='2014-8-10' >
下面我們來簡要介紹一下ntml這種標記式語言。
<nt-ad class='col-xs-12 col-xs-8'>
</nt-ad>
</a-params>
</nt-article>
~~~
nt對象中非nta前綴的標簽也會被解釋為content
eg.
~~~
<nt-article class='col-xs-12 col-xs-8'>
<a-params title='關于nt語法的一些介紹'
date='2014-8-10' />
下面我們來簡要介紹一下ntml這種標記式語言。
<nt-ad class='col-xs-12 col-xs-8'>
</nt-ad>
</nt-article>
~~~
如果同時存在多個content位置的內容的話，會被從上到下依次添加
nt組件模板的開發
nt解析器會將最外層的標簽解釋為div，所以不必再增加嵌套div。
eg.
~~~
<? xml version="1.0" encoding="utf-8" ?>
<div style='align-center;'>
<h1>{{#title}}</h1>
<h5>{{#date}}</h5>
</div>
<p>
{{#content}}
</p>
~~~
我們使用artTemplate模板引擎，建議將模板編譯成js代碼，使用TmodJS工具。
### 遺憾
這個渲染引擎最大的問題既不是效率問題，又不是功能問題，而是模板引擎的選用上。當時并不怎么了解前端，選用了一款靜態引擎進行渲染。這就造成了一個問題，這個引擎估計比較適合用在后端。。。
也就是說，本來是想開發一個易用的前端引擎，卻不慎做成了nodejs用的后端引擎- -！
### 總結教訓
當初的設計確實是有很多問題的，但我希望這個設計能為之后的考慮做鋪路的打算。這個項目的初衷是用模塊化的xml來解決組件化難題，但卻受能力所限，寫出來的渲染器并不好用。得到兩點經驗，其一，DOM操作的封裝要優于簡單的文本格式化；其二，組件化要有js的支撐才能靈活，想要簡單通過模擬后端工作的方式，既不能改善結構，又不能讓其具有相應的靈活性。
### 什么樣的框架是理想的？
我一直覺得應該有一種方式，讓網站模塊化工作，首先，虛擬DOM是一個好想法，但我不大喜歡React的復雜，我希望還是用動態模板的哪種簡單方式操作DOM。
既然要大規模組件化，就要讓組件十分好寫，我個人反感復雜的組件編寫閱讀，希望找到一種方式能夠簡單的聲明組件，無需js，就能引入組件，我希望通過約定配置，將組件化做的更方便。
### 想看看完整的情況
Github倉庫地址： [https://github.com/sunxfancy/ntml](https://github.com/sunxfancy/ntml)
歡迎前來fork和提意見，拿來改著玩神馬的都可以。
``~~~~(>_<)~~~~ ，發布已經一年了，一個看的也沒有，忽然發現沒寫Readme！
只能怪我那時太年輕
