ES6 模板编译
顾名思义,就是用反引号编写一个模板字符串,
用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 模板编译的更多相关文章
- es6实现简单模板编译
现在有各种框架,其中一个主要模块就是关于template.最火的vue.react等框架,在这一块上也是是下足了功夫.我也想写一个自己的模板编译工具,所以就做了个简单的实现,主要是使用es6的反引号编 ...
- C++ Primer 学习笔记_79_模板与泛型编程 --模板编译模型
模板与泛型编程 --模板编译模型 引言: 当编译器看到模板定义的时候,它不马上产生代码.仅仅有在用到模板时,假设调用了函数模板或定义了模板的对象的时候,编译器才产生特定类型的模板实例. 一般而言,当调 ...
- ES6模板字面量
前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...
- es6 模板字变量和字符串占位符
开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...
- vue模板编译
Vue 的模板编译是在 $mount 的过程中进行的,在 $mount 的时候执行了 compile 方法来将 template 里的内容转换成真正的 HTML 代码. complie 最终生成 re ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- smarty 模板编译和变量调节器 模板引入
<?php require './smarty/Smarty.class.php'; $sm = new Smarty; //$sm->force_compile = true; $sm- ...
- es6 - 模板
'use strict'; // es5 let name = 'mrs'; let qb = 20; function logs() { return 'goods!'; } let html = ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
随机推荐
- ubuntu下安装jdk、tomcat、mysql
1.JDK安装 方法1: 将JDK安装包解压缩之后,编辑~/.bashrc文件,在该文件里面加入下面的配置,然后通过source ~/.bashrc.JDK即安装成功. export JAVA_HOM ...
- Heavy Transportation(最短路)
poj 1797 ——Heavy Transportation 思路: 这道题我们可以采用类似于求最短路径的方法,用一种新的“松弛操作”去取代原本的方法. 我们可以记录d[u]为运送货物到点j时最大可 ...
- java中的数据转换与前置,后置加加
public class Demo{ public static void main(String [] args){ int num=2; System.out.println(num++);//后 ...
- Android-一张图理解MVP的用法
M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里
- C语言枚举类型(Enum)
在实际编程中,有些数据的取值往往是有限的,只能是非常少量的整数,并且最好为每个值都取一个名字,以方便在后续代码中使用,比如一个星期只有七天,一年只有十二个月,一个班每周有六门课程等. 以每周七天为例, ...
- vim编码方式配置的学习和思考
哎呀呀,今天9月30号,立即就要十一长假了,心里还有点小小浮躁.工作已经基本做完,想成为技术大牛怎么能够如此浮躁.为了应付浮躁的心灵,决定写一篇小博,平静一把. 今天一个配置文件须要有中文,而且同事是 ...
- iphone 消息推送 实现
IPhone 消息推送实现 参考 资料 http://blog.csdn.net/victormokai/article/details/39501277 对生成pem 的补充 拿到mac 上生成导出 ...
- Android studio 升级,不用下载完整版,完美更新到2.0
Android studio 2.0 公布已有一旦时间,据说,速度大大提高了.但是一直没有尝试更新,看到大家相继更新,所以迫不及待就准备更新,但是.更新之路确实异常坎坷.询问度娘,千奇百怪的问题接憧而 ...
- SAP 锁对象 基本概念与基本操作 SE11
一.SAP为什么要设置锁: 1,保持数据的一致性 假设几个用户要訪问相同的资源,须要找到一种同步訪问的方法去保持数据的一致性.比方说,在航班预订系统中,须要检查还有没有空座位,当检 ...
- MVC Page分页控件
MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...