![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js模板引擎从无到有
mengtoumingren
这个作者很懒,什么都没留下…
展开
-
js模板引擎渐进--前言
前些日子加班的厉害,为了不让加班的这段时间那么乏味,决定给自己加点油烟,便想到了去学习react,看了网上官网的基本教程,然后便想要改进自己的小小项目,使用react来写前端。按照官网的教程来操作,基本的正常用法很快就能上手了。期间,偶然在“极客时间”(非广告)看了一两个对react介绍的视频(其实视频是一套完整的教程,但是自己没有买,就随便看了前面两三个讲这个react的历...原创 2018-12-20 22:51:03 · 228 阅读 · 0 评论 -
js模板引擎渐进--代码改进封装(9)
到目前为止,一个 简单的模板引擎 差不多成型了,但目前还有几个较大的问题:1.代码复用。代码中有些地方还可以再精简一些2.多个 左花括号 { 和 多个 右花括号 } 的情况处理首先,对于第一个问题,我们可以翻开上一篇的代码,我们来改进一下:a.有两个地方对 bracecount 取余然后处理 { 或者 } ,两个地方除了处理的后面一个 记录新的 brace ...原创 2019-01-02 18:08:52 · 168 阅读 · 0 评论 -
js模板引擎渐进--处理需要输出 { 或者 } 的情况(8)
到目前为止,我们前面写的 template 函数已经可以在大多数场景使用了。然而,有一种情况,我们也可能会常用----输出 {}。而从之前的代码我们知道,我们正是通过 {} 来区分 代码字符串和html内容字符串的, {} 的内容还可以根据一定的规则解析出 each/if/else 等指令,那假如,我们想要输出的 html 包含 {} 呢??这是一个棘手的问题,但,棘手归棘...原创 2019-01-02 16:15:38 · 216 阅读 · 2 评论 -
js模板引擎渐进--if/else(7)
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可。模板代码: {if data.value==1} <h3>11111111111</h3> {else-if data.value==2} ...原创 2019-01-02 14:32:50 · 1094 阅读 · 0 评论 -
js模板引擎渐进--改进字符串拼接方式(4)
在前面两张我们已经实现了模板 js 代码和 普通html字符串的拼接,没错就是 通过 + 号来进行拼接,这个少的话还没什么,要是多的话,这个有一定的性能问题,同时,这样拼接处理起来也复杂。看前面几篇很容易发现,我们本身最外层的 resultcode 就是以数组不断的push数据进来,然后最后通过 join来拼接的。 function Template2code(templat...原创 2018-12-24 21:38:47 · 336 阅读 · 0 评论 -
js模板引擎渐进--each改进(6)
上一篇,我们实现了简单的 each 渲染处理,以最简单的方式,但是在实际的使用中,我们的需求远远没有那么简单。这里我们对实际需求做出对应的调整,这是一个渐进的过程,经过一次次改进才能达到最终效果。1.解决多层嵌套问题:要解决多层嵌套问题,主要考虑 :a.遍历主体。 即我要遍历的数组是什么呢?在前一篇,我们直接写死 “data”,默认 data 就是数组,但是当要进行多层次嵌套...原创 2018-12-28 23:21:17 · 597 阅读 · 0 评论 -
js模板引擎渐进--区别js代码和html字符串2(3)
在前一篇我们已经成功的实现了最简单的function字符串的组合,这一篇我们在此基础上改进区分js代码和 非代码字符串的机制。在第一篇时,我们通过对 {} 进行简单的替换就实现了代码跟字符串的拼接,但是在后面的需求中,那样是远远不够的,比如我想得到 {} 内部的内容,然后对其中的内容进行进一步的解析。 模板代码:<h3>{data.value}</h3>...原创 2018-12-23 13:42:49 · 188 阅读 · 0 评论 -
js模板引擎渐进--生成最简单的function(2)
上一节我们已经实现了最简单的 模板转 js 转换代码,那么这一节将在上一节的基础上包装成一个function,然后将这个function就可以在需要的时候调用即可进行数据的渲染。在此之前,再次提一下 eval这个全局函数,eval这个函数能将 js 字符串转成 js代码并执行它。但实际上我们并不一定要立即执行,为了能让 function字符串 转成代码又还不需要直接执行,这里需要多了...原创 2018-12-22 21:37:15 · 219 阅读 · 0 评论 -
js模板引擎渐进--each/for(5)
之所以使用模板引擎主要是为了避免麻烦的字符串拼接,同时,还用在重复的列表处理中。笔者自己开始就是因为要处理列表数据才接触的js模板引擎。而处理列表数据,自然是少不了 for 循环,而for循环对应的处理指令在很多模板中,都以 each 来标识。这里我们也用each.通过前面几篇我们已经知道如何在模板中区分 代码内容和字符串内容,那在这里,我们只需要对 代码内容做进一步解析即可。前面我...原创 2018-12-27 23:23:20 · 859 阅读 · 0 评论 -
js模板引擎渐进--区别js代码和html字符串(1)
无规矩不成方圆,模板的解析也是如此,该怎么解析,这个规则还是由我们自己来决定的。通常(至少自己用过的)以 花括号 {} 作为区分代码区域和HTML字符串,代码部分将基本原样保留或者进一步加工,而html字符串将直接原样拼接。那么如何对一段字符串进行解析?笔者这里通过遍历一个个字符(其它模板引擎看见好多都是正则来处理的,奈何笔者正则转不过弯),通过对每一个字符进行判断处理。对于...原创 2018-12-20 23:33:06 · 293 阅读 · 0 评论 -
js模板引擎渐进--后记
至此,算是完成了一个系列了。本来是想写的更详细的,但是太详细每次说的东西就少的可怜。在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 each 和 处理 {} 输出这块,但是真正在写的时候,如果将每一个过程都写出来,怕是读者看着也会有些无聊,所以尽量缩减了。代码写道这里当然不能说完美了,毕竟很多是在理想的情况下进行的,还有...原创 2019-01-02 18:28:51 · 145 阅读 · 0 评论