原生JS实现简易模板
原生JS实现简易模版
String.prototype.renderTpl = function (obj) {var myself = this;var render = '';var source = this.toString();if (Object.prototype.toString.call(obj) === '[object Array]') {obj.forEach(function (item) {render += myself.renderTpl(item);});} else if (typeof obj === 'object') {for (var i in obj) {if (typeof obj[i] !== 'function') {var patt = new RegExp("{{\\s*\\$" + i + "\\s*}}", "g");source = source.replace(patt, obj[i]);}}render += source;}return render;
};// 举个栗子// 模板
var tmp = "{{ $id }}---{{ $name }}\n";// 值
var val = [{'id': 1, 'name': 'a'},{'id': 2, 'name': 'b'},{'id': 3, 'name': 'c'}
];// 渲染
console.log(tmp.renderTpl(val));// 渲染结果为
/*1---a2---b3---c
*/
原生JS实现简易模板相关推荐
- js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
- 原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 原生js写简易抽奖系统
效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家 ...
- 原生js实现简易版消消乐
效果图 整体思路 文件结构 html结构 <div id="pop_star"><div id="targetScore">目标分数:1 ...
- 简易灯箱画廊设计html,原生Js实现的画廊功能
原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...
- 根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
- js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
最新文章
- oracle11g与weblogic兼容,WebLogic 10.3.6与JDK 1.7的兼容问题
- html项目_学完html+css就可以做的前端项目实战
- Iterator 和 ListIterator 有什么区别?
- 4个在2020年持续发展的数据中心冷却趋势
- alchemy php,Python下SQLAlchemy的简单介绍
- 泛化,过拟合,欠拟合素材(part1)--python机器学习基础教程
- 用Java编写模仿的太阳系(九星行旋转)--原创
- 为什么睡觉时身体突然抖一下?答案吓到我了!
- C语言中二维数组移动一行,二维数组对每一行进行排序。。
- CXF(2.7.10) - A simple JAX-WS service
- iOS-贝塞尔曲线之自定义饼图
- 20211110:DC综合的一些简单概念总结(2)
- 分析mysql慢查询_mysql慢查询的分析方法_MySQL
- YOLO系列目标检测算法-YOLOv2
- mysql cpu 100%_mysql占用资源CPU超过100%解决方法
- CF# Educational Codeforces Round 3 F. Frogs and mosquitoes
- 365天深度学习训练营-第P3周:天气识别
- DataFrame切片
- mysql 2203_mysql 错误2203 1061 及安装最后出现1067错误的解决办法
- 数据分析师需要考试或考证吗?
热门文章
- 【物联网服务NodeJs-5天学习】第四天存储篇④ ——基于MQTT的环境温度检测,升级存储为mysql
- Orangepi 5 Unixbench基准测试结果
- USB接口鼠标接触不良的简单处理
- iOS基础 获取状态栏的高度
- 用C语言写一个 将从终端上接收到的8个一字节数据用3des加密之后再连接上随机生成的八个一字节的数据再发送给终端...
- 入选数据库顶会 VLDB:如何有效降低产品级内存数据库快照尾延迟?
- 我让Chat GPT准备了几份SAP 顾问英文面试自我介绍的模板,大家感受一下
- 用Go实现UTXO,UTXO实现
- 实现模糊查询时对特殊字符进行处理和对查询结果进行处理
- udev (简体中文)