闲话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能用的后端引擎- -！

想看看完整的情况

Github仓库地址： https://github.com/sunxfancy/ntml

欢迎前来fork和提意见

~~(>_<)~~ ，发布已经一年了，一个看的也没有，忽然发现没写Readme！

只能怪我那时太年轻

版权声明：本文为博主原创文章，未经博主允许不得转载。