模板户:专注于dede模板,织梦源码,织梦模板,网站模板,dedecms模板,网站源码,dedecms教程以及各类手机网站模板和企业网站模板分享.

织梦模板

VIP

CMS教程

站长学院

随机织梦教程

最新织梦教程

织梦模板随机Tags

关键词排名 原创 用户体验 玩具外贸网站源码 关键词优化 搜索引擎 汽车配件织梦模板 网站title 太阳能光伏网站源码 网站 财务会计网站源码 餐饮管理织梦模板 餐饮加盟网站源码 关键词 汽车润滑油网站源码 蜘蛛 优化 织梦伪静态 高亮 个人网站

实现简单的html模板引擎

www.mobanhu.com / 2018-09-25 08:35:49
林毅 三奇嘉会

说道模板,我们先要知道模板是如何工作的。

一般情况下模板会被编译为目标语言,这个被成为编译阶段。被编译为目标语言后,通过目标语言来执行并拿到输出的结果,这个阶段被成为执行阶段。

以javascript为例,我们通过 代码片段一 来看看javascript如何拼接html:

  var html = [];
html.push(<div>);
for(...) {
   html.push(<span></span>);
}
html.push(</div>);

然后通过 代码片段二 看看一段模板:

  <div>
   <js: for(...) { :js>
       <span></span>
   <js: } :js>
</div>

仔细对比这两段代码就会发现,代码片段二里除了<js: :js>里面的代码,在代码片段一都会被html.push();包裹。其实就是把<js: 替换为);:js>替换为html.push(

那么替换后的代码应该是这样子的:

  <div>
   ); for(...) { html.push(
       <span></span>
   ); } html.push(
</div>


 恩,这样似乎看不出什么来。我们来把它重新排版:

  <div>);
for(...) {
   html.push(<span></span>);
}
html.push(</div>

然后代码片段一做对比,是不是很眼熟。是的,它只比代码片段一少了头尾。

代码片段我们已经编译成功了,但是如何运行它呢?这里我们会用到Function。完整的实现如下(微信的代码排版我尽力了。。。):


const tpl = function(tpl, data) {

    let newTpl = tpl.replace(/<js:(.*?):js>/, );$1html.push();

    let code = `var html=[]; html.push(${newTpl}); return html.join("")`;

    code = code.replace(/html.push(""); /g, "");

    return new Function("data", code);

};


    本文由AB模板网:织梦模板整理发布, 转载请说明出处:https://www.mobanhu.com
    随机站长资讯
    高级精美的家私企业网站源码 家私家纺类网
    农业绿色生态水果企业dede源码
    驾校类企业网站源码 驾校网站模板
    绿色LED灯管类织梦源码 照明企业网站模板
    蓝色通用织梦博客模板 资讯文章类网站源码
    红色大气装饰公司织梦源码 建筑装修装潢企
    网站建设企业模板 互联网网络营销类网站源
    html5响应式手机自适应网站模板(兼容手机
    黑色HTML5工作室网络公司网站整站模板(适
    简洁大气网站建设网络设计类企业织梦模板
    html5+css3高端网站建设工作室源码 酷炫的h
    红灰色大气网络工作室织梦模板
    织梦dedecms幻灯片模糊解决办法
    织梦dedecms巧用标签实现图片自动Alt功能,
    织梦dedecms文章列表循环标签增加notypeid
    织梦dedecms专题模板应用分析及使用案例
    dedecms织梦让二级栏目标题去除“/”斜杠和
    最新站长资讯
    高级精美的家私企业网站源码 家私家纺类网
    农业绿色生态水果企业dede源码
    驾校类企业网站源码 驾校网站模板
    绿色LED灯管类织梦源码 照明企业网站模板
    蓝色通用织梦博客模板 资讯文章类网站源码
    红色大气装饰公司织梦源码 建筑装修装潢企
    网站建设企业模板 互联网网络营销类网站源
    html5响应式手机自适应网站模板(兼容手机
    黑色HTML5工作室网络公司网站整站模板(适
    简洁大气网站建设网络设计类企业织梦模板
    html5+css3高端网站建设工作室源码 酷炫的h
    红灰色大气网络工作室织梦模板
    织梦dedecms幻灯片模糊解决办法
    织梦dedecms巧用标签实现图片自动Alt功能,
    织梦dedecms文章列表循环标签增加notypeid
    织梦dedecms专题模板应用分析及使用案例
    dedecms织梦让二级栏目标题去除“/”斜杠和
    关于出现“对不起,您安装的不是正版应用..
    Discuz(Can not write to cache files)有关
    Discuz通过修改文章标题更好的实现SEO的方
    DiscuzX中存在不合法的文件被上传的修复方
    关于Discuz x3.1页面空白解决方法
    首页 免费源码 VIP专区 会员中心
    收缩