jQuery模板(JsRender).docVIP

下一代jQuery模板JsRender JsRedner和JsViews（JsViews是再JsRender基础上的进一步封装）被称为下一代的jQuery模板，官方地址：/BorisMoore/JsRender/BorisMoore/jsviews jQuery模板是一个javascript引擎（抄的、这个东东太高深了），他最直接的作用就是:1、代码重用，减少代码量;（貌似还更容易编写）2、抛弃繁琐的字符串拼接、提高代码可见性、简化维护。 为什么需要模板总之，我是写过无数这样蛋疼的代码： var html = ;$.each(data.persons, function (i, item) { html += trtd + item.FirstName + /tdtda href=/Person/Edit/　　　　　　　　+ item.PersonID + Edit/a | a href=/Person/Details/ 　　　　　　　　+ item.PersonID + Details/a | a href=/Person/Delete/ 　　　　　　　　+ item.PersonID + Delete/a/td/tr; });$(#XXX).append(html);　　如果觉得这样还是不明显，可以参见ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender中的第四部分，这样写很明显的坏处就是：这样的代码可见性太低，很难维护。或许你几个月之后再来看你的代码，你要花半个小时甚至更多才能得出代码的展示结构。下面来看个JsRender的例子： //Templates script type=text/x-JsRender id=personListTemplate {{for persons}} tr td{{:FirstName}}/td td a href=/Person/Edit/{{:PersonID}}Edit/a | a href=/Person/Details/{{:PersonID}}Details/a | a href=/Person/Delete/{{:PersonID}}Delete/a /td /tr {{/for}} /script //Render Data var html = $(#personListTemplate).render(data); //Insert into Container $(#XXX).append(html); ?　　代码的结构确实清晰可见了，但是代码越看越多了。首先，这是错觉,因为这里的东东都是严格换行了的。其次，这里省去了item、each等字符复杂字符，貌似更容易编写了。JsRender和jQuery Template 　　既然JsRender是下一代jQuery模板,那么谁是上一代模板呢？jQuery Template。jQuery Template的特点这里就不废话了，说说JsRedner和jQuery Template的差距： 　　1、JsRender渲染非常快，网上说的是“和最快一样快”（当然我也不知道他到底有多快）。对于简单的模板的渲染，JsRender的渲染速度比Js Template可以快20倍。 　　2、JsRender对Dom和jQuery不存在任何依赖（注:不依赖并不是说不使用...）。在jQuery Template 必须用$.template(name,XXX)标记模板，然后渲染。JsRedner不用，他甚至可以直接渲染字符串。 　　3、JsRender和jQuery Template相比，JsRender仅仅需要更少的代码，2就是一个例子。 JsRender三要素和行为 　　从上面贴的代码可以看出，JsRender需要三要素：模板（Template）、容器（Container：简单。。。）、数据（Data：数据可以使各种js对象：如数组，object等等）。主要行为为：渲染模板、将渲染结果插入容器（这个太简单了）。说下渲染模板先。。。 JsRender渲染模板 　　1、无需编译直接渲染：　 var html = $(#XXXXX).render(data); // XXX代表某个脚本标记，也就是上面的script id=XXX type=text/x-JsRender/script 　　2、渲染前编译： /*A、获取模板对象的方式编译*/ var xxxT