前端JS模版库kino.razor - 原理流程分析 - 改进版轮子RazorJs

1.前言

从后台获取数据，在前端JS里面拼接字符串，不累吗？敢不敢找一款前端使使。。。

现在这种模板库比较多了，我用过的jquery-template 、JsRender 、听说过的一堆，还有各种MVC库里面带的各种模板库，之前看到有人介绍kino.razor这个，一看源代码，就几百行，以前用过的那些template engine，好奇怎么出来的。就借这个机会研究研究，自己模仿者造一个。它源码少啊。。。

2.kino.razor模版库原理，流程分析

怎么使用http://www.cnblogs.com/Music/p/kino-razor.html这篇里有介绍 , 前台模板写成

 1 <script type="text/template">
 2     @{
 3         //code block...
 4         var data=10;
 5     }
 6 
 7     @for(var i=10;i<data;i++)
 8     {
 9         <div>@(i)</div>
10     }
11 </script>

View Code

这种js代码与html混在一起的，是怎么实现的呢。。。

首先分析这种template要认识到，有两种模式，即js code 模式，和 html代码模式。在code模式中，@{ code block}这种，就是要执行的代码，不会产生模版生成的内容，另一种就是引用变量了，在<div>@(variable)</div>这里，这个@(variable)同<div> </div>一样，会被生成到 模板引擎 生成的html中。这么说有点抽象。所以说，有三种状态1.代码块 2.普通string，最后生成到html 3.变量，需要执行并申城到html里

在拿到templateString之后，模板引擎会一个字一个字的扫描，处理，碰到@{}这样的代码块，它就需要在一个context中执行，以保存其中的变量呢，碰到普通的string，像<div>这种，直接放到结果集中，对于@(variable)需要在这个context中解释一下，这个值说不定就是前面code block中声明的，再放到结果集中。

就像这样一个 模板，可以使用kino.razor(template,model);这个model对象是传进去的，要被模板利用，就同样需要这样的context，那么谁来提供这样一个context呢？？？我是看了源码，这个模板字符串最终会被编译成一个函数，就是var func=某种方法（string template），将string变成一个function，然后这个model，传给func,即func(model)就会得到输出的html

 编译出的函数会是啥样

function func(model){
     var result=[];
    //在@{}这样的code block中全是code，直接放到 这里运行
    var data=10;

    //@for(){   }
   在for while循环里面默认是String模式，就是可以直接写<div>引用变量要写@符号
    for(var i=0;i<10;i++)
    {
        //在循环内部，String 输出内容，我们构建一个数组result 来装 要生成的内容

         //碰到<div>
         result.push("<div>");
         //碰到@(i)
         result.push(i);//变量，在当前context取值，并放到生成结果集中
         //碰到</div>，放到result
         result.push("</div>")
    }
}

这样就达到了循环的目的。可是这样的期望函数咋生成？？？JS里面有 new Function(parameter0,...parametern,最后一个参数为函数体)

我们只要能生成函数体就可以了。生成那个函数体functionContent，以字符串形式呈现，需要我们根据template string的状态,是code block，还是string，还是变量variable，往functionContent添加不同的语句，最后构成函数func，调用func（model）就返回了我们函数体中的result。在kino.razor中用SegmentHelper.parse将templateString转化为一个一个segmrnt，

这个segment就是以状态区分的内容，content 即内容，type 即类型，状态

用ContentHelper将这个segment数组，转变成functionContent，进而返回一个参数为model的func。

That‘s all。

 3.RazorJs.js

搞清楚那个库的原理，和流程，自己写一个也就不是太难，模仿照着做就行。我自己捣鼓着做了一个RazorJs，将能简化的简化，我不想要的功能就没做，例如kino.razor中@variable是可行的，即不加小括号'()'也可以，我就觉得不直观，就没有实现。在这个RazorJs中引用变量必须要用小括号括起来,如@(variable),添加了一些和jquery相关的方法,当然在没有jquery的情况下也是可以使用razor.render 和 compile方法。修改model为ViewBag。第一遍源码跟kino.razor太像，而且写完第二天，发现支持的while循环没有意义，不支持在while内部写code block例如while(i>0) i--;这个i--没地写，故重新整理思路，重新写了份，原来的更名RazorJs.0.1.js。

 

添加类似angularJS的ng-repeat的直接使用div作为模板的方法
例如直接在div中写

<div razor-template razor-for="var i = 0;i<10; i++">

     other template ....

</div>

使用$(selector).renderNode(ViewBag)来使render，并show出来，写上了razor-template在dom ready的时候会被隐藏

另外一种

<div razor-repeat="item in items" razor-template>

<div>@item.age</div>

</div>

这种跟C#里面写的foreach(var item in items)是一致的，这种div使用$(selector).renderRepeat(ViewBag)，来使模板变为字符串

 

还有更多的扩展用法可以看csdn code 地址https://code.csdn.net/magicdawn/razorjs。那些markdown正在慢慢的写。源码注释超级多，别见怪。

4.关于渲染速度...

在上面我们知道,这些其实是编译成了一个函数 , 所以在那些测试中所谓的千次万次render是没有意义的,真正的次数多的render,可以先compile出来func函数,再自己调用func(ViewBag)，而生成这个函数的速度，都是线性扫描，不见得能快到哪里去，所以不用担心这个。

转载于:https://www.cnblogs.com/magicdawn/p/js-template-razorjs.html