Optimized template rendering

JayZangwill · Apr 12, 2017 · d6f0c62 · d6f0c62
1 parent 0248cfa
commit d6f0c62
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -117,3 +117,7 @@ Fixed low browser `Promise` function
 ### 2017 4.7 v2.0.0
 
 modify lightings API, abolish some outdated configuration
+
+### 2017 4.7 v2.0.1
+
+optimized template rendering
diff --git a/dist/lightings.js b/dist/lightings.js
@@ -1,5 +1,5 @@
 /*!
- * Lightings v2.0.0
+ * Lightings v2.0.1
  * Copyright (c) 2017 Jay Zangwill
  */
 'use strict';
@@ -114,10 +114,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 							resolve(this.responseXML);
 						} else if (context.isIe9) {
 							resolve(JSON.parse(this.responseText));
-							echo.call(context, JSON.parse(this.responseText));
+							compile.call(context, JSON.parse(this.responseText));
 						} else {
 							resolve(this.response);
-							echo.call(context, this.response);
+							compile.call(context, this.response);
 						}
 						if (timer) {
 							clearTimeout(timer);
@@ -140,43 +140,50 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 	}
 
 	// 模板渲染
-	function echo(data) {
-		var _this = this;
+	function compile(data) {
+		var dom = document.querySelector(this.el),
+		    key = void 0,
+		    variable = data,
+		    result = void 0,
+		    childs = void 0,
+		    text = void 0,
+		    first = true,
+		    fragment = document.createDocumentFragment(),
+		    brace = /{{(.+?)}}/g;
 
-		if (this.el && document.querySelectorAll(this.el)[0] && this.dataType === 'json') {
-			(function () {
-				var dom = document.querySelectorAll(_this.el)[0],
-				    content = dom.innerHTML,
-				    key = void 0,
-				    variable = data,
-				    result = void 0,
-				    first = true,
-				    brace = /{{(.+?)}}/g;
-				if (typeof dom === 'undefined') {
-					throw Error('Cannot find element: ' + _this.el);
-				}
-				if (dom.nodeName.toLowerCase() === 'body' || dom.nodeName.toLowerCase() === 'html') {
-					throw Error('Do not mount Lightings to <html> or <body> - mount to normal elements instead.');
-				}
-				while (brace.exec(content)) {
+		if (this.el && dom && this.dataType === 'json') {
+			if (typeof dom === 'undefined') {
+				throw Error('Cannot find element: ' + this.el);
+			}
+			if (dom.nodeName.toLowerCase() === 'body' || dom.nodeName.toLowerCase() === 'html') {
+				throw Error('Do not mount Lightings to <html> or <body> - mount to normal elements instead.');
+			}
+			while (dom.firstChild) {
+				fragment.appendChild(dom.firstChild);
+			}
+			childs = fragment.childNodes;
+			Array.prototype.slice.call(childs).forEach(function (node) {
+				first = true;
+				result = '';
+				text = node.textContent;
+				while (brace.test(text)) {
 					variable = data;
-					key = RegExp.$1.split('.');
+					key = RegExp.$1.trim().split('.');
 					key.forEach(function (item) {
 						variable = variable[item];
 					});
 
 					// 让模板能正确解析
 					if (first) {
-						result = content.replace(/{{.+?}}/, variable);
+						result = text.replace(/{{.+?}}/, variable);
 						first = false;
 					} else {
 						result = result.replace(/{{.+?}}/, variable);
 					}
 				}
-				if (result) {
-					dom.innerHTML = result;
-				}
-			})();
+				node.textContent = result;
+			});
+			dom.appendChild(fragment);
 		}
 	}
 	window.lightings = new Lightings();

diff --git a/dist/lightings.min.js b/dist/lightings.min.js
diff --git a/doc/README-zh.md b/doc/README-zh.md
@@ -118,3 +118,7 @@ lightings.get('test.json',{
 ### 2017 4.7 v2.0.0
 
 修改lighting api，废除一些过时的配置方式
+
+### 2017 4.7 v2.0.1
+
+优化模板渲染
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightings",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A lightweight Ajax Library",
   "keywords": [
     "lightweight",

diff --git a/src/lightings.js b/src/lightings.js
@@ -1,5 +1,5 @@
 /*!
- * Lightings v2.0.0
+ * Lightings v2.0.1
  * Copyright (c) 2017 Jay Zangwill
  */
 'use strict';
@@ -112,10 +112,10 @@
 							resolve(this.responseXML);
 						} else if(context.isIe9) {
 							resolve(JSON.parse(this.responseText));
-							echo.call(context, JSON.parse(this.responseText));
+							compile.call(context, JSON.parse(this.responseText));
 						} else {
 							resolve(this.response);
-							echo.call(context, this.response);
+							compile.call(context, this.response);
 						}
 						if(timer) {
 							clearTimeout(timer)
@@ -138,39 +138,50 @@
 	}
 
 	// 模板渲染
-	function echo(data) {
-		if(this.el && document.querySelectorAll(this.el)[0] && this.dataType === 'json') {
-			let dom = document.querySelectorAll(this.el)[0],
-				content = dom.innerHTML,
-				key,
-				variable = data,
-				result,
-				first = true,
-				brace = /{{(.+?)}}/g;
+	function compile(data) {
+		let dom = document.querySelector(this.el),
+			key,
+			variable = data,
+			result,
+			childs,
+			text,
+			first = true,
+			fragment = document.createDocumentFragment(),
+			brace = /{{(.+?)}}/g;
+
+		if(this.el && dom && this.dataType === 'json') {
 			if(typeof dom === 'undefined') {
 				throw Error(`Cannot find element: ${this.el}`);
 			}
 			if(dom.nodeName.toLowerCase() === 'body' || dom.nodeName.toLowerCase() === 'html') {
 				throw Error('Do not mount Lightings to <html> or <body> - mount to normal elements instead.');
 			}
-			while(brace.exec(content)) {
-				variable = data;
-				key = RegExp.$1.split('.');
-				key.forEach((item) => {
-					variable = variable[item];
-				});
+			while(dom.firstChild) {
+				fragment.appendChild(dom.firstChild);
+			}
+			childs = fragment.childNodes;
+			Array.prototype.slice.call(childs).forEach((node) => {
+				first = true;
+				result = '';
+				text = node.textContent;
+				while(brace.test(text)) {
+					variable = data;
+					key = RegExp.$1.trim().split('.');
+					key.forEach((item) => {
+						variable = variable[item];
+					});
 
-				// 让模板能正确解析
-				if(first) {
-					result = content.replace(/{{.+?}}/, variable);
-					first = false;
-				} else {
-					result = result.replace(/{{.+?}}/, variable);
+					// 让模板能正确解析
+					if(first) {
+						result = text.replace(/{{.+?}}/, variable);
+						first = false;
+					} else {
+						result = result.replace(/{{.+?}}/, variable);
+					}
 				}
-			}
-			if(result) {
-				dom.innerHTML = result;
-			}
+				node.textContent = result;
+			});
+			dom.appendChild(fragment);
 		}
 	}
 	window.lightings = new Lightings();

diff --git a/test/a.html b/test/a.html
@@ -8,22 +8,18 @@
 
 	<body>
 		<div id="app">
+			{{author.firstName}}
 			<p>{{name}}</p>
+			{{  author.lastName }}
 		</div>
 		<script src="../dist/lightings.min.js"></script>
 		<script>
 			lightings.get('test.json',{
 				config:true,
-				el:"#app",
-				start:function(e){
-					console.log(e);
-				}
-			}).then(function(data){
+				el:"#app"
+			}).then(function(data) {
 				console.log(data);
 			})
-			lightings.jsonp('http://api.asilu.com/weather/').then(function(data){
-				console.log(data);
-			});
 		</script>
 	</body>