Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

模板式开发与雕版印刷

  模板式开发绝对不是什么新鲜玩意儿,我们的祖先早在唐宋时期就已经可以熟练使用印刷术了。实际上我们也一直在使用,几乎所有后端程序都是基于模板式的,只是它们嵌入的是程序而不是数据。当这个概念被用于前端时这个嵌入程序的恶习也被带了过来。
  我认为模板就应该本分地做好自己的工作,逻辑之类的东西不应该被放在模板中处理,否则和嵌入程序有什么区别?其实嵌入程序也不是什么坏事,它也有它自己的优势,它可以使模板变得更加灵活。但是事物总是存在两面性,所谓的“灵活”有时候不是我们需要的,我们需要更加简单、稳定的东西。活字印刷的发明是伟大的,但它从未取代过雕版印刷,就算是现代,雕版应刷也依然存在。太灵活的东西有时候反而会带来麻烦。
  抛开那些乱七八糟的东西,模板模式是由这三个基本概念组成的:
    模板:是一个静态结构,里面还包含了数据标记,用于嵌入数据。
    数据:是一个key-value结构,印铸时key与模板的数据标记对应。
    印铸:是一个动作,用于把数据嵌入到模板中,生成嵌入后的结果。
  有了这三个基本概念后就可以考虑在程序中实现。最简单的方法是,用一个字符串实现模板,一个JavaScript对象实现数据,一个函数实现印铸,使用时调用印铸函数,传入模板和数据作为参数。这样就可以简单地使用模板模式了。但这显然结构过于松散了,我们可以试着把模板和印铸函数印铸函数绑定起来。比如做一个构造器,用于将模板做成模板对象,在它的原型上添加印铸方法,调用时传入数据。
<script>
//模板构造器
function Template(template){
  if(typeof template=="object")template=template.innerHTML;
  this.template=template;
};
//模板构造器原型方法
Template.prototype.cast=function(data){
  if(!(data instanceof Array))data=[data]; //统一为数组
  for(var r=[],s=this.template,o,i=0;o=data[i];i++) //遍历数据
    //为模板的每个项嵌入相应数据并保存到一个数组中
    r[i]=s.replace(/\{(\w+)\}/g,function($,n){
      return o[n];
    });
  return r.join(""); //返回合并成字符串后的数组
};
onload=function(){
  //准备数据(可能是通过各种通信方式从服务器加载的)
  var data=[
    {title:"条目1",link:"#1",time:"前天"},
    {title:"条目2",link:"#2",time:"昨天"},
    {title:"条目3",link:"#3",time:"今天"}
  ];
  //准备模板对象
  var listTemplate=new Template(list.firstChild);
  //印铸数据并输出
  list.innerHTML=listTemplate.cast(data);
};
</script>
<!--带模板的UL-->
<ul id="list"><script type="text/x-template">
  <li>
    <time>{time}</time> <a href="{link}">{title}</a>
  </li>
</script></ul>

  这就是一个简易的模板类,也许有人会认为它太简单了,不如那些可以嵌入循环和判断以及各种函数的模板比较傲好用?我不否认它难用,这是一个概念的基础,那些嵌入逻辑的模板也是从这个概念开始发展出来的。虽然它们很灵活、很方便,但是已经到了瓶颈阶段。我正试着往另一个方向走,不对模板嵌入任何逻辑,我研究的方向是前后端的模板共用甚至程序共用。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^