前端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>
这种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),而生成这个函数的速度,都是线性扫描,不见得能快到哪里去,所以不用担心这个。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。