### 闲话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！
只能怪我那时太年轻
