闲话js前端框架（5）——再看自己一年前设计的微型渲染引擎

闲话js前端框架

前端人员=美工+设计+代码+测试
——题记

专题文章：

一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化？有没有后端的事？
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器，构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振

本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 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
欢迎前来fork和提意见，拿来改着玩神马的都可以。
~~(>_<)~~ ，发布已经一年了，一个看的也没有，忽然发现没写Readme！
只能怪我那时太年轻