js模版引擎。
2014-08-18 17:17
302 查看
前段时间公司一个同事刚刚做开发的一个博士各种前端问题。
可能还是新入门的小白的思维没有被框住吧,想法挺多的。
上次和他聊天他就提出一个:js拼接字html好麻烦。
后来我仔细想了下干嘛不用html代码作为一个模版来做一个字符串编译成想要的HTML呢。
然后我就用了大概10分钟完成了下面的代码
页面效果
点击渲染模版之后
刚刚做完之后各种激动啊 然后 想要发布到git去让大家一起用的时候 整个人就斯巴达了,已经有个老外做了个差不多的东西
https://github.com/trix/nano
他的想法干嘛这么快 而且完成的比我的好多了。
再之后把他的代码偷过来自己改了下
好吧 我承认核心代码完全改成他的了,毕竟人家支持多级json的解析
当然用法和之前的完全一样
不过感觉还是我的使用方法更加的漂亮。
加上script标签的text类型作为模版 整个网站的html代码开启来就舒服多了
下面是代码
js代码
可能还是新入门的小白的思维没有被框住吧,想法挺多的。
上次和他聊天他就提出一个:js拼接字html好麻烦。
后来我仔细想了下干嘛不用html代码作为一个模版来做一个字符串编译成想要的HTML呢。
然后我就用了大概10分钟完成了下面的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="277680701@qq.com"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/javascript"> <!-- String.prototype.replaceAll = function(s1,s2) { return this.replace(new RegExp(s1,"gm"),s2); } String.prototype.template = function(params){ var html = this.replaceAll('\n',"'+\n'"); html = html.replaceAll('{{',"'+params['"); html = html.replaceAll('}}',"']+'"); return eval("'"+html+"'"); } var $ = function(id){ return document.getElementById(id); } function render(){ var html = $('test').innerHTML.template({'name':'张三','age':15}); $('output').innerHTML = html; } //--> </script> </head> <body> <script type="text" id="test"> <div style="background:red"> 姓名:{{name}} </div> <div style="background:green"> 年龄:{{age}}岁 </div> </script> <input type="button" value="渲染模版" onclick="render()"> <div id="output"> </div> </body> </html>
页面效果
点击渲染模版之后
刚刚做完之后各种激动啊 然后 想要发布到git去让大家一起用的时候 整个人就斯巴达了,已经有个老外做了个差不多的东西
https://github.com/trix/nano
他的想法干嘛这么快 而且完成的比我的好多了。
再之后把他的代码偷过来自己改了下
String.prototype.template = function(params){ return this.replace(/\{{([\w\.]*)\}}/g, function(str, key) { var keys = key.split("."), v = params[keys.shift()]; for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]]; return (typeof v !== "undefined" && v !== null) ? v : ""; }); }
好吧 我承认核心代码完全改成他的了,毕竟人家支持多级json的解析
当然用法和之前的完全一样
不过感觉还是我的使用方法更加的漂亮。
加上script标签的text类型作为模版 整个网站的html代码开启来就舒服多了
下面是代码
js代码
String.prototype.template = function(params){ return this.replace(/\{{([\w\.]*)\}}/g, function(str, key) { var keys = key.split("."), v = params[keys.shift()]; for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]]; return (typeof v !== "undefined" && v !== null) ? v : ""; }); }HTML代码
var $ = function(id){
return document.getElementById(id);
}
function render(){
var html = $('test').innerHTML.template({user:{'name':'张三','age':15}});
$('output').innerHTML = html;
}
<script type="text" id="test"> <div style="background:red"> 姓名:{{user.name}} </div> <div style="background:green"> 年龄:{{user.age}}岁 </div> </script> <input type="button" value="渲染模版" onclick="render()"> <div id="output"> </div>效果和上面是一样的
相关文章推荐
- 我的Js模版引擎(四)
- js模版引擎(基于html模版和json数据的javascript交互)(第二讲)完结篇
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- template模版引擎的使用(underscore.js)
- 我的Js模版引擎(二)
- node.js的ejs模版引擎
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——结束语
- js模版引擎handlebars.js实用教程――为什么选择Handlebars.js
- js 模版引擎jade使用语法
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- js模版引擎handlebars.js实用教程——如何引入Handlebars.js
- js模版引擎handlebars.js实用教程
- js模版引擎handlebars.js实用教程——if-判断的基本用法
- js模版引擎(基于html模版和json数据的javascript交互)(第一讲)
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
- js模版引擎handlebars.js实用教程——each嵌套
- js模版引擎handlebars.js实用教程——目录