中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第3章(估计要写9章)

本文链接：https://blog.csdn.net/zhgangxuan/article/details/50636985

接第2章 http://blog.csdn.net/zhgangxuan/article/details/50621124

第3章下载地址 https://github.com/zhgangxuan/GXTemplate/blob/master/_oldfiles/version1/template03.html
源代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>return element</title>

	<script src="data.js"></script>
	<style>
		.templatedevelopmodetextnode {
			color: firebrick;
			text-decoration: underline;
		}
	</style>
</head>

<body>

	<h1>{#myitem.name}</h1>
	<p>
		Address: {#myitem.address} 
		-
		Zip: {#myitem.zipcode}
		-
		Phone: {#myitem.phone}
	</p>
	<p>
		Link : {#CreateLink(myitem)}
	</p>
</body>


<script>

	function CreateLink(item) {
		var a = document.createElement("a");
		a.href = "?phone=" + item.phone;
		a.target = "_blank";
		a.innerText = item.name + " - (" + item.phone + ")";
		a.style.cssText = "display:inline-block;padding:5px 24px;";
		a.onclick = function () {
			alert('Address is ' + item.address);
			return false;
		}
		a.onmouseover = function () {
			a.style.backgroundColor = 'yellow';
		}
		a.onmouseout = function () {
			a.style.backgroundColor = '';
		}
		return a;
	}

	var re_template_textbinding = /{#([^}]+)}/g;

	function ProcessEval($__exp__) {
		return eval($__exp__);
	}

	function IsHtmlElement(item) {
		if (window.HTMLElement)
			return item instanceof HTMLElement;
		return typeof (item) == "object" && !(item instanceof Object) && item.nodeType == 1; //IE7
	}

	function ProcessTextNode(node, str) {
		var arr;
		var pos = 0;
		str.replace(re_template_textbinding, function (exp, g1, index, full) {
			if (!arr) arr = [];
			if (pos < index)
				arr.push(str.substring(pos, index));
			pos = index + exp.length;

			var item = ProcessEval(g1);

			if (item == null)
				return;

			if (IsHtmlElement(item)) {
				arr.push(item);
				return;
			}

			var span = document.createElement("span");
			span.className = "templatedevelopmodetextnode";
			span.title = exp;
			span.innerText = item;
			arr.push(span);
		});
		if (!arr)
			return;

		if (pos < str.length)
			arr.push(str.substring(pos));

		var p = node.parentNode;
		for (var i = 0; i < arr.length; i++) {
			var childnode = arr[i];
			if (typeof (childnode) == "string") {
				childnode = document.createTextNode(childnode);
			}
			p.insertBefore(childnode, node);
		}
		p.removeChild(node);
	}

	function TemplateExecute(node) {

		if (node.nodeType == 3) {
			var str = node.nodeValue;
			if (str.indexOf('{#') != -1)
				ProcessTextNode(node, str);
			return;
		}

		if (node.nodeType != 1)
			return;
		switch (node.nodeName) {
			case "SCRIPT":
			case "STYLE":
				return;
		}

		var cns = node.childNodes;
		for (var ni = cns.length; ni > 0; ni--)
			TemplateExecute(cns.item(cns.length - ni));

	}


	TemplateExecute(document.body);


</script>


</html>

目标:

允许在文本绑定语法里, 直接插入自定义的Element. (当替换字符串不够用时)

实现过程:

基于第2章把字符串作为span插入到当前位置的方式, 要插入自定义Element, 只需判断ProcessEval的返回值是否为Element即可.

	function IsHtmlElement(item) {
		if (window.HTMLElement)
			return item instanceof HTMLElement;
		return typeof (item) == "object" && !(item instanceof Object) && item.nodeType == 1; //IE7
	}

如果是Element, 那么就不用转换成span了:

			if (IsHtmlElement(item)) {
				arr.push(item);
				return;
			}

然后在例子里, 就可以这样使用了, 的确够简单, 但是很实用:

	<p>
		Link : {#CreateLink(myitem)}
	</p>

CreateLink函数也是例子的一部分:

	function CreateLink(item) {
		var a = document.createElement("a");
		a.href = "?phone=" + item.phone;
		a.target = "_blank";
		a.innerText = item.name + " - (" + item.phone + ")";
		a.style.cssText = "display:inline-block;padding:5px 24px;";
		a.onclick = function () {
			alert('Address is ' + item.address);
			return false;
		}
		a.onmouseover = function () {
			a.style.backgroundColor = 'yellow';
		}
		a.onmouseout = function () {
			a.style.backgroundColor = '';
		}
		return a;
	}

实际上整个GXTemplate的v1.0版都已经上传到github的了. 接下来我们的业余时间主要是写写例子, 写写教程.

对于不懂得使用github的朋友, 可以直接下载源代码 https://github.com/zhgangxuan/GXTemplate/archive/master.zip