【JavaScript】兼容IE6的JS模板化

最新推荐文章于 2022-11-09 14:52:39 发布

yongh701

最新推荐文章于 2022-11-09 14:52:39 发布

阅读量2.6k

点赞数

分类专栏： JavaScript 文章标签： javascript ie 6 ajax 前端模板化

本文链接：https://blog.csdn.net/yongh701/article/details/78354326

版权

JavaScript 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

所谓的JS模板化并不是什么遥远的东西，在Ajax运用越来越多的今天，这基本都快成为了一种基本诉求了。这东西离前端工程师们并不遥远，举个例子。

如下的一个简单不能再简单的效果，这个a=2，其中这个2的数据来自于Ajax返回。至于不知道什么是Ajax的同学，可以参考《【Servlet】Servlet3.0与纯javascript通过Ajax交互》（点击打开链接）。

你打算怎么写代码？

相信很多人脑子中浮现的是类似这样的一串HTML：

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp"></div>
	</body>
	<script>
		var a=2;//假设这里a是ajax返回的数据，无法直接摆上上面的html代码段
		var html="<h1>a="+a+"</h1>";
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

行吧，反正我精通《【JavaScript】网页节点的增删改查》（点击打开链接）就能开始给人写前端了，在JS中的到数据，不就再获取要在HTML中添加的节点，然后组织一段HTML再摆上去不就得了吗？

这样做确实一点问题都没有，也是Ajax数据在前端网页中最简单的数据形式之一，但是，你想想，这里仅仅是拼接一个简单的<h1></h1>都写得如此艰难。在日常的实践中，Ajax返回来的数据和样式绝对和这个例子不是一样量级的。因此，前端涉及Ajax的代码，常常就会演变成这样情况：

而可怕的是，这段东西，常常会被IDE认为是Javascript代码，你让一些连自己开一个新的HTML都写不好的前端MM怎么维护？

别说只会写前端的程序萌妹子，我相信连始作俑者过一段时间之后都未必知道自己当时到底做了什么，脑袋是不是给蠢驴踢了。

于是乎，JS模板化的诉求就应运而生了。

当时JS模板化的最著名貌似是artTemplate，但这家伙貌似不兼容IE6，应该说是IE8以下都不能兼容，貌似是因为他通篇用的是HTML5的代码，什么的console.log()函数，这东西没有HTML5效果的浏览器基本不认。

所以我选用了template.js使JS模板化。这东西亲测能兼容IE6+。

一、template.js的配置安装

不要听到配置安装就自然而言地想到如同操作系统安装一样复杂。其实我们只需要到Github，网址：https://github.com/yanhaijing/template.js，下一个压缩包。

然后解压之后取走里面的template.js到你的网站目录之下，则配置完成。

二、JS模板化

接下来凭借着这个JS，则可以开始JS模板化。让你凌乱的前端代码，尤其那些大部分依靠Ajax传递数据生成的前端代码，整洁起来。最重要的是，让该在HTML的部分回到HTML。至少让IDE可以识别，极大地提高你的维护效率。与所有编程一样，就是三种结构顺序、条件、循环，说白点，就是一行一行读下来的代码和if、for。

1、顺序结构

拿回上面的错误示范来说明。

通过template.js你可以写成这样：

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp"><!--一般要渲染的部分给个id-->
			<script id="tpl" type="text/html"><!--指明需要被template.js渲染的部分-->
				<h1>a=<%:=a%></h1>
			</script>
		</div>
	</body>
	<script src="template.js"></script><!--引入的template.js，这里的引入必须在body节点之下，否则可能无法对上面的模板渲染-->
	<script>
		var a=2;//假设这里a是ajax返回的数据，无法直接摆上上面的html代码段
		var html = template(document.getElementById('tpl').innerHTML, {
			a:a
		});//左边的a是指上面html的<%:=a%>右边的a是指javascript也就是上面那行的var a=2;
		document.getElementById('wp').innerHTML = html;//渲染上面的wp节点
	</script>	
</html>

这样写作的好处是，以后你要维护css样式，这里是<h1>节点，你该成<h2><b>节点什么的，非常直观具体，不用在下面的script代码段找死人。

也可以将下面script的部分直接扔的一个js文件下面，真正实现html与javascript分离，而不是杂糅。

如果说css是让用户觉得你写网页好看，那么这个JS模板化是让我们程序猿自己写的网页好看。

2、条件结构

上面是template.js最简单的应用，那么如果我们需要判断下输出那种样式呢？此时，你就需要用IF了。

也很简单，大家直接看下面的HTML代码就懂了。弄懂上面的原理，也就大同小异了。

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp">
			<script id="tpl" type="text/html">
			<%if (a>0) {%>
				<h1>a是正数！</h1>
			<%}%>
			</script>
		</div>
	</body>
	<script src="template.js"></script>
	<script>
		var html = template(document.getElementById('tpl').innerHTML, {
			a:2
		});
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

运行结果如下所示：

看到这里或许有人会异想天开，有if能不能有else呢？抱歉，这template.js没有这样的功能。比如如下代码是错误的！

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp">
			<script id="tpl" type="text/html">
			<%if (a>0) {%>
				<h1>a是正数！</h1>
			<%}%>
			<%else {%>
				<h1>a不是正数！</h1>
			<%}%>			
			</script>
		</div>
	</body>
	<script src="template.js"></script>
	<script>
		var a=-2;
		var html = template(document.getElementById('tpl').innerHTML, {
			a:a
		});
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

运行结果是这样的：

这个template.js不提供if~else结构，只提供if很正常，如果你需要对Ajax数据进行判断，请你放在javascript部分，具体如下，这也符合html部分只放样式展示代码，不放数据运算代码的思想是一致的。

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp">
			<script id="tpl" type="text/html">
				<h1><%=str%></h1>
			</script>
		</div>
	</body>
	<script src="template.js"></script>
	<script>
		var a=-2;
		if(a>0){
			var str="a是正数！";
		}
		else{
			var str="a不是正数！"
		}
		var html = template(document.getElementById('tpl').innerHTML, {
			str:str
		});
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

运行结果如下：

3、循环结构

for结构在平常的网页编程也很常见的，因为Ajax返回来的东西，很多情况下绝对不是上面两种情况这么简单，而是一个数组。

那么对于一个数组，在template.js自然有相应的处理方式，先来看一个基本的javascript基本数组数字1~5，具体HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp">
			<script id="tpl" type="text/html">
				<%for(var i = 0; i < list.length; i++) {%>
					<li><%=list[i]%></li>
				<%}%>
			</script>
		</div>
	</body>
	<script src="template.js"></script>
	<script>
		var list=[1,2,3,4,5];
		var html = template(document.getElementById('tpl').innerHTML, {
			list:list
		});
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

运行结果如下：

而对于一个典型的Ajax返回数组，你可以这样写：

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<div id="wp">
			<script id="tpl" type="text/html">
				<%for(var i = 0; i < list.length; i++) {%>
					<li>name=<%=list[i].name%>,num=<%=list[i].num%></li>
				<%}%>
			</script>
		</div>
	</body>
	<script src="template.js"></script>
	<script>
		var list=[{name: "a",num:1},{name: "b",num:2},{name: "c",num:3}];//典型的ajax格式
		var html = template(document.getElementById('tpl').innerHTML, {
			list:list
		});
		document.getElementById('wp').innerHTML = html;
	</script>	
</html>

运行结果如下：

大家可以看到，经历过这样的JS模板化之后，以后你维护样式，比如这里，你觉得我这个<li>节点实在太丑，你就直接可以在HTML部分，改成<li class="xx">，无须在javascript找来找去。再也不会出现，这样的一坨啥了！-_-！

yongh701

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】兼容IE6的JS模板化

所谓的JS模板化并不是什么遥远的东西，在Ajax运用越来越多的今天，这基本都快成为了一种基本诉求了。这东西离前端工程师们并不遥远，举个例子。如下的一个简单不能再简单的效果，这个a=2，其中这个2的数据来自于Ajax返回。至于不知道什么是Ajax的同学，可以参考《【Servlet】Servlet3.0与纯javascript通过Ajax交互》（点击打开链接）。你打算怎么写代码？相
复制链接

扫一扫