顾名思义,就是用反引号编写一个模板字符串,

用echo将模板转为javascrip表达式字符串,

用正则将基础字符串转为想要字符串

将代码封装在函数中返回;

注:

用到es6属性${}

var template=`

<ul>

<%for(var i=0;i<data.supplies.length;i++){%>

<li><%=data.supplies[i]%> </li>

<%}%>

</ul>`;

function compile(template){

var  reg1=/<%=(.+?)%>/g;

var reg2=/<%([\s\S]+?)%>/g;

template=template

.replace(reg1,'`);\n echo($1); \n echo(`')

.replace(reg2,'`);\n  $1 \n echo(`');

template='echo(`'+template+'`)';

var script=`

(function parse(data){

var outpput='';

function echo(html){

output+=html

}

${template}

return output;

)}`

return script

}

var parse=eval(compile(template));

div.innerHTML=parse({supplies:['1',,'2','3']});

ES6 模板编译的更多相关文章

  1. es6实现简单模板编译

    现在有各种框架,其中一个主要模块就是关于template.最火的vue.react等框架,在这一块上也是是下足了功夫.我也想写一个自己的模板编译工具,所以就做了个简单的实现,主要是使用es6的反引号编 ...

  2. C++ Primer 学习笔记_79_模板与泛型编程 --模板编译模型

    模板与泛型编程 --模板编译模型 引言: 当编译器看到模板定义的时候,它不马上产生代码.仅仅有在用到模板时,假设调用了函数模板或定义了模板的对象的时候,编译器才产生特定类型的模板实例. 一般而言,当调 ...

  3. ES6模板字面量

    前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...

  4. es6 模板字变量和字符串占位符

    开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...

  5. vue模板编译

    Vue 的模板编译是在 $mount 的过程中进行的,在 $mount 的时候执行了 compile 方法来将 template 里的内容转换成真正的 HTML 代码. complie 最终生成 re ...

  6. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  7. smarty 模板编译和变量调节器 模板引入

    <?php require './smarty/Smarty.class.php'; $sm = new Smarty; //$sm->force_compile = true; $sm- ...

  8. es6 - 模板

    'use strict'; // es5 let name = 'mrs'; let qb = 20; function logs() { return 'goods!'; } let html = ...

  9. Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...

随机推荐

  1. 【微信小程序】开发实战 之 「配置项」与「逻辑层」

    微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...

  2. Ryuji doesn't want to study (树状数组)

    [传送门]:https://nanti.jisuanke.com/t/31460 [题意]给定一个数组a[N],有两种操作, 操作1,给定 l , r,  查询a[l]×L+a[l+1]×(L−1)+ ...

  3. Spring 详解(一)------- AOP前序

    目录 1. AOP 简介 2. 示例需求 3. 解决方法一:使用静态代理 4. 解决方法二:使用动态代理 1. AOP 简介 ​ AOP(Aspect Oriented Programming),通常 ...

  4. js时间戳和时间格式之间的转换

    //时间戳转换成日期时间2014-8-8 下午11:40:20 function formatDate(ns){ return new Date(parseInt(ns) * 1000).toLoca ...

  5. 通过BSSID和无线流量传输后门Payload

    本文将探讨无线接入点(AP)和BSSID(MAC地址AP).我们不借助文件系统加密和文件系统中(仅内存中)的硬编码Payload即可获得后门Payload,通过该方法可绕过所有的杀软,可以不使用Pay ...

  6. 【转】利用shell命令操作Memcached

    原文: 张宴的博客 —— http://zyan.cc/post/384/ -------------------------------------------------------------- ...

  7. BMP文件的读取与显示

    有三个函数能够完毕这一功能 1.BitBlt    BitBlt 用于从原设备中复制位图到目标设备 void CMFCApplication1View::OnDraw(CDC* pDC) { CMFC ...

  8. linux的主分区与逻辑分区的关系

     主分区和扩展分区的差别在于主分区位于硬盘的最開始.MBR 扇区的位置.这个位置的数据在计算机启动时.会自己主动被 BIOS 读取而且运行,也就是说这个位置的分区表会自己主动被 BIOS 读取到内 ...

  9. java utf8字符 导出csv 文件的乱码问题。

    在输出的格式为UTF-8的格式,但是打开CSV文件一直为乱码,后来参考了这里的代码,搞定了乱码问题,原文请参考:http://hbase.iteye.com/blog/1172200 private ...

  10. 怎样查询锁表的SQL

    通过以下的语句查询出锁表的SQL: select l.session_id sid, s.serial#,        l.locked_mode,        l.oracle_username ...