简易JS模板引擎
来源:互联网 发布:linux yum网络安装 编辑:程序博客网 时间:2024/06/08 13:26
这几天在做移动端专题页时,因为页面比较少就没有引入一些功能强大的JS模板引擎,自己在String上扩展了一个方法用于html模板渲染,很简单,后续再扩展。
代码:
String.prototype.render = function(arg){ var data = arg; return this.replace(/{{(.*?)}}/g, function(match, p){ return new Function('d', 'return d.'+p)(data); });}// testvar y = 'hello {{name}}, the data is {{data.name}}'.render({ name: 'huhu', data:{ name: 'jiujiu' }})// hello huhu, the data is jiujiuconsole.log(y);
在这个里面用到了 str.replace()
方法和 new Function()
:
str.replace()
是对字符串里面匹配的字符进行替换。
语法
str.replace(regexp|substr, newSubStr|function[, flags])
第一个参数:可以是字符串或正则,匹配将要替换的字符。
第二个参数:可以是字符串或一个函数。
第二个参数是字符串
在字符串里面可以插入下面的特殊变量:
第二个参数是函数
在这种情况下,当匹配执行后, 该函数就会执行。 函数的返回值作为替换字符串。 (注意: 上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是, 如果第一个参数是正则表达式, 并且其为全局匹配模式, 那么这个方法将被多次调用, 每次匹配都会被调用。
函数的参数:
注:p1, p2, …参数个数由第一个参数是正则里面括号子串数决定
例子:
function replacer(match, p1, p2, p3, offset, string) { return [p1, p2, p3].join(' - '); //abc - 12345 - #$*%}var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
Function构造器 会创建一个新的Function对象
语法
new Function ([arg1[, arg2[, …argN]],] functionBody)
前面的所有参数都是作为最后一个参数(函数体)的参数,所有的参数都是字符串形式。
注意: 使用Function构造器生成的函数,并不会在创建它们的上下文中创建闭包;它们一般在全局作用域中被创建。当运行这些函数的时候,它们只能访问自己的本地变量和全局变量,不能访问Function构造器被调用生成的上下文的作用域。
如在上面的render方法中,new Function不能访问到data这个变量,必须通过参数传递。
例子:
new Function('a', 'b', 'console.log(a, b)')('one', 'two'); // one two
- 简易JS模板引擎
- “EasyTemplate” JS模板引擎
- 浅析js模板引擎
- TrimPath - Js模板引擎
- js模板引擎介绍
- JS模板引擎
- JS模板引擎 :ArtTemplate
- js模板引擎
- Handlebars.js 模板引擎
- 模板引擎 Handlebars.js
- js模板引擎
- JS模板引擎sychelTemplate
- js模板引擎
- doT.js 模板引擎
- Js模板引擎 TrimPath
- JS模板引擎
- js模板引擎-laytpl
- 百度JS模板引擎
- 6/14每日小记 PullToRefreshLayout
- svn 命令使用
- 二叉树中和为某一值的路径26
- leetCode OJ 8. String to Integer (atoi)
- Codeforces Round #356 (Div. 2)-C. Bear and Prime 100
- 简易JS模板引擎
- 学习笔记——Retrofit2.0的简单使用
- vim E492: Not an editor command: ^M(使用VIM打开文件一直提示错误)
- SVN使用教程总结
- new内存失败后的正确处理
- Spring3 + RMI 整合
- UBUNTU 修改root密码
- 综合项目之乐学成语(显示所有动物类成语的列表)
- 计蒜之道2016 遗失的支付宝密码 解题报告