在这篇文章(不敢妄称教程,最多称之为学习笔记)里,我会从头开始实现客户端模板的效果。不过你不要期望能够在这里找到可以直接拿去使用直接复用灵活度很高的代码,因为我只是在叙述如何制造一样武器,叙述制造的过程,而实际的生产,请自行完成。
请注意:我的代码并不是很健壮的,我忽略了实际工作中可能碰到的很多可能性,这也不是我实际工作中真正应用的代码,我进行了很大程度的简化,排除了那些和客户端模板直接关系并不是很大的内容(但是你在自己用的时候却很可能必须加上!),目的是为了让大家把注意力集中到模板上。
我这里列几个被我排除的功能点吧:innerHTML的标签补完、数据的编码、防止数据过多造成浏览器假死……
在文章后面的评论中,很多朋友都推荐了TrimPath的JavascriptTemplate,恕我无知,这似乎是我第一次看到它,不过它的实现确实比我的文章中所及要复杂得多,它的考虑范围也比我广。对客户端模板有兴趣的同学们可以去研究一下它的源码,希望我的文章对于大家在看它源码时有一点点的作用(如果有作用我会觉得万分荣幸……)
让我们从头开始
模板这个概念我想大家都很熟悉了吧,就好像dw里的模板、php里的模板、word里的模板……这里就不多解释了。我们来说说我们用模板的目的。
一般来说,我们应用模板的原因都不外乎这两点:我不想老是做重复的劳动(如dw和word的模板),我想把表现和数据分开,因为我是程序员,我不懂界面的事或者我希望能够很方便地修改(如php的模板或jsp的taglib)。而我现在要说的,就是要做第二点:分离表现和数据,让html做它该做的事情,而其它的,交给模板来做吧。
呵呵,其实这两个理由是有相当一部分重复的,因为避免做重复的劳动,实际上就是将需要重复做的事情抽取出来做成模板,而对于网站、对于程序来说,这块重复的工作就是表现!而我一开始考虑客户端模板的原因也是因为我不想做三个页面,而这三个页面的修改频率也许会非常高
那模板应该用在哪里呢?到处都用吗?错!客户端模板的技术其实现在应该算相当成熟了,我在不少地方都看见过类似的实现,而目前最有名的就是q-zone了,你在q-zone的某处查看源代码,你会发现一大堆类似[%或<%或{%的标记,有时候会觉得自己是不是眼花,居然在客户端看见asp的代码?下面就是q-zone的典型代码:
<li><a href="javascript:checkGoCmtPriv('[%=@albumid%]','[%=@lloccode%]')" title="[%=@content%] 由 [%=@nick[('__VAR__').unHtmlReplace()]%] 于[%=@datetime%]发表 " class="mode_photo_a">[%=@content[procContent('__VAR__')]%]</a><img class="author-display" style="cursor:hand" onclick="DelRecentCmt('[%=@albumid%]', '[%=@lloccode%]', '[%=@cmt_id%]')" src="/edu/UploadFiles_edu/200704/20070425212920703.gif" alt="删除该最新评论" /></li>
我为什么反对到处使用客户端模板呢?理由有二: