原生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 ...
最新文章
- java paint方法哪个周期调用_关于一段java程序的小问题,paint函数是什么时候执行的,没有调用啊...
- Hexo博客新福利:HexoEditor编辑器最新使用方法
- 连接MYSQL的时候报错(找不到请求的.net framework data provider。可能没有安装
- hdf5与hdfs的区别
- 第34讲:更好用的自动化工具 airtest 的使用
- scala与java混合编译出现的问题
- LwIP编译方法以及选项说明
- Android Binder 系统学习笔记(一)Binder系统的基本使用方法
- Python min 函数 - Python零基础入门教程
- 手把手教学系列——疯狂Spring Cloud教学视频
- java map的应用_JAVA map的简单应用
- 谷歌:中国版搜索引擎之心不死!
- highcharts 大数据 String+,StringBuilder,String.format运行效率比较
- 大学二年级-- “赖”在实验室的发明达人
- 可视化远程管理系统保障工地施工安全解决方案
- 中西医结合儿科疾病 100249
- 判断三点方向(顺时针或逆时针)
- 结构化设计(实验二)
- CSS写一个实心小圆点的样式
- iOS 手势的用法
热门文章
- 不经一番寒彻骨,怎得梅花扑鼻香,墙都不扶就服你
- 外观模式 Facade
- 【CSS】CSS实现三角形(一)
- android wms 窗口,Android6.0 WMS(十一) WMS窗口动画生成及播放
- Google产品经理面试题:村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情......
- 如何用awk打印除第一列之外的所有列
- python图片转黑白_python实现彩照转黑白以及图片转素描画
- GIS毕业生经典笔试、面试题汇总(待续)
- 二维码生成与解析代码实现
- 2xx、200、201、202、203、204、205、206 状态码详解