原生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 ...

原生JS实现简易模板

原生JS实现简易模版

原生JS实现简易模板相关推荐

最新文章

热门文章