前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简易前端模板引擎

简易前端模板引擎

作者头像
用户1217459
发布2018-01-31 14:47:41
1.5K0
发布2018-01-31 14:47:41
举报
文章被收录于专栏:Young Dreamer

模板解析

解决的问题:

将data和js+html片段解析成html片段,完成赋值和js逻辑,如下所示:

输入:

var data = {     name: 'hwm',     articles: [{ title: 'the first one' }, { title: 'the last one' }] }; tpl = '<p>Hi my name is <%this.name%>.</p><p>My articles are listed as followed:</p>'     + '<ul>'     + '<%for(var i = 0; i < this.articles.length; i++) {%>'     + '<li><%this.articles[i].title%></li>'     + '<%}%>'     + '</ul>';

核心思想:

(1)将js片段、赋值片段、html片段解析出来,主要依赖于正则表达式

// 匹配被标识的片段 var reg = /<%(.*?(?=%>))%>/g; // 匹配if、for等开头的逻辑代码 var logicalReg = /^(( )?(if|for|while|else|{|}|switch|case|break))(.*)?/g;

(2)解析结果均是字符串,通过new Function()的方法,可以将字符串传入函数,当做函数体然后执行

于是在字符串的逻辑就是构建一个数组,然后将html和赋值片段push到数组,将逻辑片段添加到字符串,然后通过call将data传入函数体并执行;

// 匹配被标识的片段 var reg = /<%(.*?(?=%>))%>/g; // 匹配if、for等开头的逻辑代码 var logicalReg = /^(( )?(if|for|while|else|{|}|switch|case|break))(.*)?/g; var match; var result = 'var result = [];\n'; var index = 0; // 使用exec方法,得到匹配内容和匹配结果 while (match = reg.exec(tpl)) {     addCode(tpl.slice(index, match.index));     addCode(match[1], true);     index = match.index + match[0].length; } addCode(tpl.slice(index, tpl.length)); result += 'return result.join("")'; result = result.replace(/[\t\n\r]/g, ''); return new Function(result); function addCode(code, isJs) {     // 保证赋值代码不被引号包裹,js逻辑代码直接拼在字符串中     isJs ? result += (code.match(logicalReg) ? code + '\n' : 'result.push(' + code + ');\n')         : result += 'result.push("' + code.replace(/"/g, '\\"') + '");\n'; }

(3)建立缓存,当数据变化,模板没有变化时,直接从缓存中调用即可,无需重复解析;

(function () {     var cache = {};     this.tmpl = function (id, tpl, data) {         var parser = cache[id] || function () {

                // 解析代码,同上

        }();         cache[id] = parser;         return parser.call(data);     }; })();

备注:主要参考文章链接如下

http://ejohn.org/blog/javascript-micro-templating/

http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-06-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模板解析
    • 解决的问题:
      • 核心思想:
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档