原生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实现简易模板相关推荐

  1. js html转盘点名,原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  2. 原生js制作简易DOM拾色器实例教程

    本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...

  3. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  4. 原生js写简易抽奖系统

    效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家 ...

  5. 原生js实现简易版消消乐

    效果图 整体思路 文件结构 html结构 <div id="pop_star"><div id="targetScore">目标分数:1 ...

  6. 简易灯箱画廊设计html,原生Js实现的画廊功能

    原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...

  7. 根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用

    前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...

  8. js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用

    前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...

  9. HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)

    用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...

最新文章

  1. oracle11g与weblogic兼容,WebLogic 10.3.6与JDK 1.7的兼容问题
  2. html项目_学完html+css就可以做的前端项目实战
  3. Iterator 和 ListIterator 有什么区别?
  4. 4个在2020年持续发展的数据中心冷却趋势
  5. alchemy php,Python下SQLAlchemy的简单介绍
  6. 泛化,过拟合,欠拟合素材(part1)--python机器学习基础教程
  7. 用Java编写模仿的太阳系(九星行旋转)--原创
  8. 为什么睡觉时身体突然抖一下?答案吓到我了!
  9. C语言中二维数组移动一行,二维数组对每一行进行排序。。
  10. CXF(2.7.10) - A simple JAX-WS service
  11. iOS-贝塞尔曲线之自定义饼图
  12. 20211110:DC综合的一些简单概念总结(2)
  13. 分析mysql慢查询_mysql慢查询的分析方法_MySQL
  14. YOLO系列目标检测算法-YOLOv2
  15. mysql cpu 100%_mysql占用资源CPU超过100%解决方法
  16. CF# Educational Codeforces Round 3 F. Frogs and mosquitoes
  17. 365天深度学习训练营-第P3周:天气识别
  18. DataFrame切片
  19. mysql 2203_mysql 错误2203 1061 及安装最后出现1067错误的解决办法
  20. 数据分析师需要考试或考证吗?

热门文章

  1. 【物联网服务NodeJs-5天学习】第四天存储篇④ ——基于MQTT的环境温度检测,升级存储为mysql
  2. Orangepi 5 Unixbench基准测试结果
  3. USB接口鼠标接触不良的简单处理
  4. iOS基础 获取状态栏的高度
  5. 用C语言写一个 将从终端上接收到的8个一字节数据用3des加密之后再连接上随机生成的八个一字节的数据再发送给终端...
  6. 入选数据库顶会 VLDB:如何有效降低产品级内存数据库快照尾延迟?
  7. 我让Chat GPT准备了几份SAP 顾问英文面试自我介绍的模板,大家感受一下
  8. 用Go实现UTXO,UTXO实现
  9. 实现模糊查询时对特殊字符进行处理和对查询结果进行处理
  10. udev (简体中文)