js模版引擎。

最新推荐文章于 2024-03-09 15:40:02 发布

起个名字真难啊啊啊啊啊

最新推荐文章于 2024-03-09 15:40:02 发布

阅读量621

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/li277680701/article/details/38663151

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前段时间公司一个同事刚刚做开发的一个博士各种前端问题。

可能还是新入门的小白的思维没有被框住吧，想法挺多的。

上次和他聊天他就提出一个：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="渲染模版" οnclick="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 : "";
			});
		}

		var $ = function(id){
			return document.getElementById(id);
		}
		function render(){
			var html = $('test').innerHTML.template({user:{'name':'张三','age':15}});
			$('output').innerHTML = html;
		}

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="渲染模版" οnclick="render()">
	 <div id="output">
	 </div>

效果和上面是一样的