添加模板引擎实现的 demo

YHRkki · Jan 25, 2018 · 8d81ae0 · 8d81ae0
1 parent fc5c42c
commit 8d81ae0
Show file tree

Hide file tree

Showing 10 changed files with 421 additions and 48 deletions.
diff --git a/demos/template/template4.1/index.html b/demos/template/template4.1/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>template</title>
+</head>
+
+<body>
+	<div id="container"></div>
+    <script type="text/html" id="user_tmpl">
+        <%for ( var i = 0; i < users.length; i++ ) { %>
+            <li>
+                <a href="<%=users[i].url%>">
+                    <%=users[i].name%>
+                </a>
+            </li>
+            <% } %>
+    </script>
+    <script src="template.js"></script>
+</body>
+
+</html>
diff --git a/demos/template/template4.1/template.js b/demos/template/template4.1/template.js
@@ -0,0 +1,49 @@
+/**
+ * 这是文章中的原版实现，文章中对代码进行了简化
+ */
+(function() {
+    var cache = {};
+
+    this.tmpl = function tmpl(str, data) {
+        // Figure out if we're getting a template, or if we need to
+        // load the template - and be sure to cache the result.
+        var fn = !/\W/.test(str) ?
+            cache[str] = cache[str] ||
+            tmpl(document.getElementById(str).innerHTML) :
+
+            // Generate a reusable function that will serve as a template
+            // generator (and which will be cached).
+            new Function("obj",
+                "var p=[],print=function(){p.push.apply(p,arguments);};" +
+
+                // Introduce the data as local variables using with(){}
+                "with(obj){p.push('" +
+
+                // Convert the template into pure JavaScript
+                str
+                .replace(/[\r\t\n]/g, " ")
+                .split("<%").join("\t")
+                .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+                .replace(/\t=(.*?)%>/g, "',$1,'")
+                .split("\t").join("');")
+                .split("%>").join("p.push('")
+                .split("\r").join("\\'") +
+                "');}return p.join('');");
+
+        // Provide some basic currying to the user
+        return data ? fn(data) : fn;
+    };
+})();
+
+var results = document.getElementById("container");
+
+var data2 = {
+    users: [
+        { "name": "Byron", "url": "http://localhost" },
+        { "name": "Casper", "url": "http://localhost" },
+        { "name": "Frank", "url": "http://localhost" }
+    ]
+}
+
+var compiled = tmpl("user_tmpl", data2);
+results.innerHTML = compiled;
diff --git a/demos/template/template5/index.html b/demos/template/template5/index.html
@@ -8,13 +8,9 @@
 <body>
 	<div id="container"></div>
     <script type="text/html" id="user_tmpl">
-        <%for ( var i = 0; i < users.length; i++ ) { %>
-            <li>
-                <a href="<%=users[i].url%>">
-                    <%=users[i].name%>
-                </a>
-            </li>
-            <% } %>
+        <% for ( var i = 0; i < users.length; i++ ) { %>
+            <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
+        <% } %>
     </script>
     <script src="template.js"></script>
 </body>

diff --git a/demos/template/template5/template.js b/demos/template/template5/template.js
@@ -1,53 +1,62 @@
-(function(){
-  var cache = {};
-
-  this.tmpl = function tmpl(str, data){
-    // Figure out if we're getting a template, or if we need to
-    // load the template - and be sure to cache the result.
-    var fn = !/\W/.test(str) ?
-      cache[str] = cache[str] ||
-        tmpl(document.getElementById(str).innerHTML) :
-
-      // Generate a reusable function that will serve as a template
-      // generator (and which will be cached).
-      new Function("obj",
-        "var p=[],print=function(){p.push.apply(p,arguments);};" +
-
-        // Introduce the data as local variables using with(){}
-        "with(obj){p.push('" +
-
-        // Convert the template into pure JavaScript
-        str
-          .replace(/[\r\t\n]/g, " ")
-          .split("<%").join("\t")
-          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
-          .replace(/\t=(.*?)%>/g, "',$1,'")
-          .split("\t").join("');")
-          .split("%>").join("p.push('")
-          .split("\r").join("\\'")
-      + "');}return p.join('');");
-
-    // Provide some basic currying to the user
-    return data ? fn( data ) : fn;
-  };
-})();
+/**
+ * 模板引擎第五版
+ */
 
+var settings = {
+    // 求值
+    evaluate: /<%([\s\S]+?)%>/g,
+    // 插入
+    interpolate: /<%=([\s\S]+?)%>/g,
+};
 
+var escapes = {
+    "'": "'",
+    '\\': '\\',
+    '\r': 'r',
+    '\n': 'n',
+    '\u2028': 'u2028',
+    '\u2029': 'u2029'
+};
+
+var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
+
+
+var template = function(text) {
+
+    var source = "var __p='';\n";
+    source = source + "with(obj){\n"
+    source = source + "__p+='";
+
+    var main = text
+    .replace(escapeRegExp, function(match) {
+        return '\\' + escapes[match];
+    })
+    .replace(settings.interpolate, function(match, interpolate){
+        return "'+\n" + interpolate + "+\n'"
+    })
+    .replace(settings.evaluate, function(match, evaluate){
+        return "';\n " + evaluate + "\n__p+='"
+    })
+
+    source = source + main + "';\n }; \n return __p;";
+
+    console.log(source)
+
+    var render = new Function('obj',  source);
+
+    return render;
+};
 
 var results = document.getElementById("container");
 
-var data2 = {
+var data = {
     users: [
         { "name": "Byron", "url": "http://localhost" },
         { "name": "Casper", "url": "http://localhost" },
         { "name": "Frank", "url": "http://localhost" }
     ]
 }
 
-
-// var compiled = tmpl("user_tmpl");
-// results.innerHTML = compiled(data2);
-//
-//
-var compiled = tmpl("user_tmpl", data2);
-results.innerHTML = compiled;
+var text = document.getElementById("user_tmpl").innerHTML
+var compiled = template(text);
+results.innerHTML = compiled(data);
diff --git a/demos/template/template6/index.html b/demos/template/template6/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>template</title>
+</head>
+
+<body>
+	<div id="container"></div>
+    <script type="text/html" id="user_tmpl">
+        <% for ( var i = 0; i < users.length; i++ ) { %>
+            <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
+        <% } %>
+    </script>
+    <script src="template.js"></script>
+</body>
+
+</html>
diff --git a/demos/template/template6/template.js b/demos/template/template6/template.js
@@ -0,0 +1,62 @@
+/**
+ * 模板引擎第六版
+ */
+
+var settings = {
+    // 求值
+    evaluate: /<%([\s\S]+?)%>/g,
+    // 插入
+    interpolate: /<%=([\s\S]+?)%>/g,
+};
+
+var escapes = {
+    "'": "'",
+    '\\': '\\',
+    '\r': 'r',
+    '\n': 'n',
+    '\u2028': 'u2028',
+    '\u2029': 'u2029'
+};
+
+var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
+
+
+var template = function(text) {
+
+    var source = "var __t, __p='';\n";
+    source = source + "with(obj){\n"
+    source = source + "__p+='";
+
+    var main = text
+    .replace(escapeRegExp, function(match) {
+        return '\\' + escapes[match];
+    })
+    .replace(settings.interpolate, function(match, interpolate){
+        return "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'"
+    })
+    .replace(settings.evaluate, function(match, evaluate){
+        return "';\n " + evaluate + "\n__p+='"
+    })
+
+    source = source + main + "';\n }; \n return __p;";
+
+    console.log(source)
+
+    var render = new Function('obj',  source);
+
+    return render;
+};
+
+var results = document.getElementById("container");
+
+var data = {
+    users: [
+        { "url": "http://localhost" },
+        { "name": "Casper", "url": "http://localhost" },
+        { "name": "Frank", "url": "http://localhost" }
+    ]
+}
+
+var text = document.getElementById("user_tmpl").innerHTML
+var compiled = template(text);
+results.innerHTML = compiled(data);
diff --git a/demos/template/template7/index.html b/demos/template/template7/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>template</title>
+</head>
+
+<body>
+	<div id="container"></div>
+    <script type="text/html" id="user_tmpl">
+        <% for ( var i = 0; i < users.length; i++ ) { %>
+            <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
+        <% } %>
+    </script>
+    <script src="template.js"></script>
+</body>
+
+</html>
diff --git a/demos/template/template7/template.js b/demos/template/template7/template.js
@@ -0,0 +1,77 @@
+/**
+ * 模板引擎第七版
+ */
+
+var settings = {
+    // 求值
+    evaluate: /<%([\s\S]+?)%>/g,
+    // 插入
+    interpolate: /<%=([\s\S]+?)%>/g,
+};
+
+var escapes = {
+    "'": "'",
+    '\\': '\\',
+    '\r': 'r',
+    '\n': 'n',
+    '\u2028': 'u2028',
+    '\u2029': 'u2029'
+};
+
+var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
+
+
+var template = function(text) {
+
+    var matcher = RegExp([
+        (settings.interpolate).source,
+        (settings.evaluate).source
+    ].join('|') + '|$', 'g');
+
+    var index = 0;
+    var source = "__p+='";
+
+    text.replace(matcher, function(match, interpolate, evaluate, offset) {
+
+        source += text.slice(index, offset).replace(escapeRegExp, function(match) {
+            return '\\' + escapes[match];
+        });
+
+        index = offset + match.length;
+
+        if (interpolate) {
+            source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+        } else if (evaluate) {
+            source += "';\n" + evaluate + "\n__p+='";
+        }
+
+        return match;
+    });
+
+    source += "';\n";
+
+    source = 'with(obj||{}){\n' + source + '}\n'
+
+    source = "var __t, __p='';" +
+        source + 'return __p;\n';
+
+    console.log(source)
+
+    var render = new Function('obj', source);
+
+    return render;
+};
+
+var results = document.getElementById("container");
+
+var data = {
+    users: [
+        { "url": "http://localhost" },
+        { "name": "Casper", "url": "http://localhost" },
+        { "name": "Frank", "url": "http://localhost" }
+    ]
+}
+
+var text = document.getElementById("user_tmpl").innerHTML
+var compiled = template(text);
+results.innerHTML = compiled(data);