开篇
关于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="http://www.cnblogs.com//Default.aspx?courseID=001"> <div > <img src='/images/loading.gif' data-original="../Image/1.jpg" /> </div> <div > <div > <span>jquery源码解析</span> <span >李老师</span> </div> <div > <span>2015-08-08</span> <span >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='/images/loading.gif' data-original='" + data[i].IconPath + "' /></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" > <ul> <li id="tmpItem"> <a> <div > <img/> </div> <div > <div > <span></span> <span ></span> </div> <div > <span></span> <span ></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 > <img src='/images/loading.gif' data-original="${this[i].IconPath$}" /> </div> <div > <div > <span>${this[i].TeacherName$}</span> <span >${this[i].CourseName$}</span> </div> <div > <span>${this[i].CreatedDate$}</span> <span >${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行左右，但它其实已经可以解决一些简单的问题了。实际它还有许多问题没考虑，书写起来还是比较复杂的，也不可能针对多变的需求都适用，所以还是建议用于简单的应用或学习。很好的是，它让我们明白了整个解决思路和模板运行的过程。
实际上现成的模板引擎已经很多了，接下来一篇就将介绍其中一个。
感谢阅读。
原标题：knockoutJS学习笔记01：从拼接字符串到编写模板引擎
关键词：JS
我知道了 