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 ...
随机推荐
- 程序防止SqlServer使用SqlServer Profiler跟踪
思路: 1.使用默认函数(fn_trace_getinfo)查询跟踪列表: 2.调用系统存储过程(sp_trace_setstatus)修改跟踪状态. 相关Sql : declare @default ...
- DispatcherServlet url-pattern中 /、/*、*.do中的区别与作用
DispatcherServlet url-pattern中 /./*.*.do中的区别与作用 "/'表示匹配所有请求(其中包含除.jsp和.jspx外的所有后缀). 如果不配置静态资源,它 ...
- Atcoder Grand Contest 023
A 略 B 略 C(计数) 题意: 有n个白球排成一行,故有n-1个空隙,我可以给一个空隙对应的两个白球都涂黑.n-1个空隙的一个排列就对应着一个涂黑顺序,定义这个涂黑顺序的价值是“将所有n个球都涂黑 ...
- 转:c++ 11 新特性
声 明:本文源自 Danny Kalev 在 2011 年 6 月 21 日发表的<The Biggest Changes in C++11(and Why You Should Care)&g ...
- [Servlet&JSP] 标准标签
在JSP的规范中提供了一些标准标签(Standard Tag),全部的容器都支持这些标签,它能够协助编写JSP时降低Scriptlet的使用. 全部的标准标签都使用jsp:作为前置.这些标准标签是在J ...
- iPhone 适配之路
(1)1x时代 2007年,初代iPhone公布,屏幕的宽高是320*480像素.这个分辨率一直到iPhone3GS也保持不变. 那时编写iOS的App应用程序.仅仅支持绝对定位. 比方一个butto ...
- JAVA程序设计(12.3)---- 监听器0基础应用:五子棋
1.制作五子棋游戏软件 由于老师已经基本做完了.重做的时候快了非常多--可是还是感觉思维非常混乱-- 哪边先哪边后,哪个方法在哪边好之类的问题 太纠结了-- 先是窗体 内部类:鼠标适配器 窗体的构造 ...
- Hadoop+HBase+ZooKeeper分布式集群环境搭建
一.环境说明 集群环境至少需要3个节点(也就是3台服务器设备):1个Master,2个Slave,节点之间局域网连接,可以相互ping通,下面举例说明,配置节点IP分配如下: Hostname IP ...
- app具体介绍界面-01
在我们的上一篇博客中,我们介绍了首页中的app列表界面怎样完毕.这个ListView以及其Adapter会在我们后面的界面中重用,所以这个是比較重要的,在这一篇博客中,我们先完毕app具体介绍界面的一 ...
- html中跳转方法(含设定时间)
脚本方式 如: <script language="JavaScript" type="text/JavaScript"> <!-- wind ...