knockoutJS学习笔记01：从拼接字符串到编写模板引擎
开篇
关于knockout的文章，园里已经有很多大神写过了，而且都写得很好。其实knockout学习起来还是很容易的，看看官网的demo和园里的文章，练习练习就可以上手了（仅限使用，不包含研究源码）。之所以想写这个系列，主要是想记录自己的学习和应用过程，也希望能给初学者一点帮助。
既然是学习过程就一步一步来，从最开始的解决方案，到优化过程，到最后的实现方案。有了思考和对比，才会更加明白这个东西有什么好处，为什么使用它、什么情况要使用它。ok, 官网学习链接为☺：knockoutJS
准备例子
过程是这样的：前台发送ajax请求，后台返回json字符串，前台生成html，插入到dom。这个过程我们再熟悉不过了，接下来我们就用多种方式完成这个例子。
先用jquery简单写一个发送请求的方法，如下：
window.Tester = {
callback: function(fn) {
$.ajax({
url: "../Handlers/GetCourse.ashx",
success: function(data) {
data = $.parseJSON(data);
fn(data);
}
});
}
}
后台对应的实体对象，如下：
public class CourseInfo
{
public string CourseID { get; set; }
public string IconPath { get; set; }
public string CourseName { get; set; }
public string TeacherName { get; set; }
public string CreatedDate { get; set; }
public int StudyNumber { get; set; }
}
html如下：
<ul id="course">
<li>
<a href="/Default.aspx?courseID=001">
<div class="course-img">
<img src="../Image/1.jpg" />
</div>
<div class="course-info">
<div class="names">
<span>jquery源码解析</span>
<span class="fr">李老师</span>
</div>
<div class="pros">
<span>2015-08-08</span>
<span class="fr">100人学习</span>
</div>
</div>
</a>
</li>
</ul>
界面效果：
一、拼接字符串
相信很多人开始都用过拼接字符串来生成dom元素，然后越写越多，越写越乱...，写到自己都看不太懂了，最后干脆挥挥手留给别人去看。我们都不希望这样做，有代码洁癖的朋友，看到这些应该会发狂。
我们来看一下实现上面的效果，用拼接字符串是怎么样的，代码如下：
Tester.callback(function(data) {
for (var i = 0; i < data.length; i++) {
var courseImg = "<div class='course-img'><img src='" + data[i].IconPath + "' alt='" + data[i].CourseName + "'/></div>";
var names = "<div class='names'><span>" + data[i].CourseName + "</span><span class='fr'>" + data[i].TeacherName + "</span></div>";
var pros = "<div class='pros'><span>" + data[i].CreatedDate + "</span><span class='fr'>" + data[i].StudyNumber + "人学习</span></div>";
var item = "<li><a target='_blank' href='Default.aspx?courseID=" + data[i].CourseID + "'>" + courseImg + "<div class='course-info'>" + names + pros + "</div></a></li>";
$("#course").append(item);
}
});
可以很快得出下面几点：1.拼接写起来很麻烦 2.不能给人清晰的dom结构 3.到处都是字符串修改起来很麻烦。实际项目中，我们应该尽量避免这种情况。
二、clone dom
为了解决上面的缺点，我们可以把html模板先写好，并隐藏。等到需要时，再clone一份，生成html。代码如下：
<div id="tmp" class="noen">
<ul>
<li id="tmpItem">
<a>
<div class="course-img">
<img/>
</div>
<div class="course-info">
<div class="names">
<span></span>
<span class="fr"></span>
</div>
<div class="pros">
<span></span>
<span class="fr"></span>
</div>
</div>
</a>
</li>
</ul>
</div>
Tester.callback(function(data) {
for (var i = 0; i < data.length; i++) {
var item = $("#tmpItem").clone();
item.find("a").attr("href", "Default.aspx?CourseID=" + data[i].CourseID);
item.find(".course-img>img").attr({ "src": data[i].IconPath, "alt": data[i].CourseName });
item.find(".names>span:eq(0)").text(data[i].CourseName);
item.find(".names>span:eq(1)").text(data[i].TeacherName);
item.find(".pros>span:eq(0)").text(data[i].CreatedDate);
item.find(".pros>span:eq(1)").text(data[i].StudyNumber + "人学习");
$("#course").append(item);
}
});
看起来比拼接字符串好多了。这里我们提到了“模板”的概念，但它还不是真正意义上的模板，所谓模板应该是：基础内容准备好了，就差数据，只要把数据传递过来，就可以生成完整内容。可以看到，我们上面还是自己去解析数据，然后生成内容，而不是自动化的过程。如果可以这样生成html就最好了：var html = template("#tmpID",data); tmpID 表示模板的id，data 是数据，这样生成html，不用自己去for遍历。没错，这就是大多数模板引擎的实现思路。
三、模板引擎
关于js模板引擎有很多，我也会在下一篇文章单独介绍。不过在这里我不想马上就用现成的，我们自己先实现试试看！
3.1 基础版
首先我们需要找到字符串中真实数据的位置，这通常是通过“占位符”来实现的，例如：${ $}；然后再将占位符替换为真实的数据。查找占位符可以用正则表达式实现，替换占位符用字符串操作即可。
例如字符串:my name is ${name$}, i am ${year$} years old。 数据为：{name : "tom", year : 18}。我们希望生成最后的结果是: my name is tom, i am 18 years old。
先编写匹配占位符的正则表达式：/\${((?:.(?!\$}))*.)?\$}/g (说明：正则水平一般，卡了好久...，厉害的朋友在回复写出更好的！)。实现代码如下：
var reg = /\${((?:.(?!\$}))*.)?\$}/g;
var str = "my name is ${name$}, i am ${year$} years old";
var data = {
name : "tom",
year : 18
}
var match;
while (match = reg.exec(str)) {
str = str.replace(match[0], data[match[1]]);
}
console.log(str);//my name is tom, i am 18 years old
简单解释一下：核心是exec方法，它返回的是一个数组，包括匹配到字符串的值，和其位置等。match[0] 是占位符；match[1] 是占位为内的内容(如name)。这样通过一个循环，就可以将所有匹配找到。
3.2 改进版
上面例子实在太简单了，看一个稍微复杂点的结构。字符串是：my name is ${name$}, i am ${info.age$} years old。数据为：{name: "tom", info: {age:18}}。按上面的做法就不能得到正确的结果了，因为匹配后 match[1] 为 “info.age”，而 data["info.age"] 显然不能获取到18。如果可以在字符串里写js呢，例如：this.name或this.info.age，运行时this由我们传递并执行，这样问题就解决了。这里有两个问题：1. 如何在字符串里写js代码？ 2.this 如何动态决定？
要在字符串里写代码执行，Function 就可以实现。Function接收字符串类型的参数，前面的是函数的参数，最后一个是函数的执行体。例如：var fn = new Function("arg1","arg2","return arg1 + arg2;"); fn 就是一个函数，接收两个参数。可以执行得到结果：console.log(fn(1,2)); //3。那么 this 如何由我们动态决定呢？答案就是：对象冒充。js 的 call, apply 就是用来实现对象冒充的。
解决了这两个问题，实现起来就轻松多了，如下：
var code = "return 'my name is ' + this.name + ', i am ' + this.info.age + ' years old';";
var fn = new Function(code).apply(data);
console.log(fn);
这里我们创建一个函数，函数执行体就是code，this指向了data对象。注意，这里 this.name 不能加''，否则就作为普通字符串进行拼接了。字符串拼接太麻烦了，在网上看到一种很好的做法，通过数组实现，代码如下：
var code = "var result = [];"
code += "result.push('my name is ');";
code += "result.push(this.name);";
code += "result.push(' i am ');";
code += "result.push(this.info.age);";
code += "result.push(' years old');";
code += "return result.join('');";
var fn = new Function(code).apply(data);
console.log(fn());
同样，数据部分不能加''。这种方式很巧妙，fn 执行时，会从 var result = []; 开始执行，this 就是 data 对象，最后生成字符串返回。这里我们简单封装一下：
var str = "my name is ${this.name$}, i am ${this.info.age$} years old";
var data = {
name: "tom",
info: {age:18}
}
function template(html, data) {
if (!html) {
return;
}
var reg = /\${((?:.(?!\$}))*.)?\$}/g;
var cursor = 0;
var code = "var result = [];\n";
var match;
while (match = reg.exec(html)) {
code += "result.push('" + html.substring(cursor, match.index) + "');\n";
code += "result.push(" + match[1] + ");\n";
cursor = match.index + match[0].length;
}
code += "result.push('" + html.substring(cursor) + "');\n";
code += "return result.join('')";
//console.log(code);
return new Function(code.replace(/\n/g,"")).apply(data);
}
console.log(template(str, data));
3.3 最终版
许多时候后台返回的是json数组字符串，这时需用使用逻辑判断和循环来处理。这里需要一个正则：/(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g 用来匹配判断循环关键字。需要注意的是，当遇到这些关键字的时候，就不能push到数组里了，而应该是作为程序的一部分执行，例如：
var result = [];
for(var i=0;i<10;i++){
result.push(this.name);
}
...
结合上面的，封装一个最终版，如下：
function template(id, data) {
if (!id) {
throw new Error("模板id不能为空！");
}
var jTmpl = $(id);
if(jTmpl.length <= 0){
throw new Error("找不到id为："+id+"的模板");
}
var html = jTmpl.html();
if(!html){
return html;
}
html = html.replace(/\"/g,"\\\"");
var reg = /\${((?:.(?!\$}))*.)?\$}/g;
var logicReg = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
var cursor = 0;
var code = "var result = [];\n";
var match;
var key;
while (match = reg.exec(html)) {
code += "result.push('" + html.substring(cursor, match.index) + "');\n";
code += match[1].match(logicReg) ? match[1] : "result.push(" + match[1] + ");";
code += "\n";
cursor = match.index + match[0].length;
}
code += "result.push('" + html.substring(cursor) + "');\n";
code += "return result.join('')";
//console.log(code.replace(/\n/g, ""));
return new Function(code.replace(/\n/g, "")).apply(data);
}
我们试着用这个模板完成上面拼接字符串和clone dom 相同的功能。先定义模板：
<script type="text/tmpl" id="courseTmpl">
${for(var i=0,length=this.length;i<length;i++){$}
<li>
<a href="Default.aspx?courseID=${this[i].CourseID$}">
<div class="course-img">
<img src="${this[i].IconPath$}" alt="${this[i].CourseName$}"/>
</div>
<div class="course-info">
<div class="names">
<span>${this[i].TeacherName$}</span>
<span class="fr">${this[i].CourseName$}</span>
</div>
<div class="pros">
<span>${this[i].CreatedDate$}</span>
<span class="fr">${this[i].StudyNumber$}人学习</span>
</div>
</div>
</a>
</li>
${}$}
</script>
模板定义好后，执行代码就只有一行了！如下：
Tester.callback(function(data) {
$("#course").html(template("#courseTmpl",data));
});
通过使用模板引擎，我只需要定义好模板，传递数据，渲染工作就由模板引擎自动完成了。
这里还有一个小知识点，script的type属性设置为：text/tmpl，这个属性是浏览器不认识的。如果script的type是浏览器支持的（如text/javascript），就会当做脚本执行或通过src属性请求下载脚本再执行，如果是浏览器不支持的，就会忽略。所以这里可以用来存储数据，大多数模板也都是定义在这个地方。
四、总结
上面的模板引擎很简单，只有30行左右，但它其实已经可以解决一些简单的问题了。实际它还有许多问题没考虑，书写起来还是比较复杂的，也不可能针对多变的需求都适用，所以还是建议用于简单的应用或学习。很好的是，它让我们明白了整个解决思路和模板运行的过程。
实际上现成的模板引擎已经很多了，接下来一篇就将介绍其中一个。
