登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

为着理想勇敢前进

 
 
 

日志

 
 

每一天都在创新——皮肤的创新  

2005-12-07 22:07:14|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
从网页开放到现在已经29天了,当初承诺的每周更新四次根本做不到,这并不是因为我没有新的想法了,而是因为这段时间我已经深陷于具体编码中,甚少考虑一个论坛整体的构想设计什么了。
在这些编码中,我每天都非常兴奋,时时刻刻都会涌现出新的想法。这里我把我前几天所干的令人鼓舞的事情说出来让大家分享。
首先我最自豪的是客户端的换肤。为什么换肤这么重要呢,一个程序,从换肤是否强大易用就可以看出他的构架的好坏。只有一个程序逻辑和界面的分离做得很好,换肤才可能强大易用,这有两个方面,一方面是换肤的强大、自由度高,就意味着程序逻辑中很少涉及具体界面,这样才可能有更高的自由度留给皮肤去干。另一方面,如果换肤的接口简洁易用,隐藏了具体实现,这就意味着程序逻辑、界面控制和具体皮肤,这三者之间逻辑清晰,实现得优雅。
事实上,在我正在做的论坛程序中,程序逻辑、界面控制和具体皮肤这三部分,分别对应MVC的Model,Controller,View ,程序逻辑这部分完全不涉及任何具体的界面显示,只是简单的调用函数,告诉界面控制的这部分代码,我要显示什么内容,要获取什么输入,然后界面控制这部分再根据具体的皮肤的配置,把界面画出来。
例如,有一个修改用户资料的对话框,程序逻辑的核心处理所做的事情,就是从服务器端获取用户的信息,比如昵称、签名、头像,然后告诉界面控制“给我画一个修改用户资料的对话框,其中昵称为‘Atry’,签名是‘这个人很懒,什么都没有留下’,头像Url是‘face/0.gif’,另外这个对话框要接受的输入信息是新的昵称、签名和头像,以及两个动作‘修改按钮’‘关闭按钮’”,这些信息,在我的程序内部是使用JavaScript的Hash表来表示的,但是这当然也可以很方便的转换成XML,事实上,我也确实做了把这个 界面表示 读取和保存成XML的。界面表示转换成XML类似这样:
<i name="InfoDialog"> <i name="Nickname" value="Atry" /> <i name="Face" value="face\0.GIF" /> <i name="Sign" value="这个人很懒,什么都没有留下" /> <i name="Modify" value="function (name,sign,face){DoSomething(name,sign,face)}" /> <i name="Close" value="function(){eInfoDialog.RemoveNode()}" /> </i>
然后界面控制再依据皮肤里面的规则把这个东西转换成具体的HTML界面,所以这个皮肤的定义,可以看成是一种类似XSLT的东西。类似这样:
<element name="InfoDialog"> <data url="skins/default/html/InfoDialog.htm" /> <element name="Nickname" mapping_mode="value" /> <element name="Face" mapping_mode="src" /> <element name="Face" dhtml_id="FaceUrl" mapping_mode="value" /> <element name="Sign" mapping_mode="innerText" /> <element name="Modify" mapping_mode="action" /> <element name="Close" mapping_mode="onclick" /> </element>
 
虽然语法和XSLT差得远了,但原理是差不多的。这跟XSLT的主要区别,并不是语法,而是XSLT是一次性的转换成要输出的文本,而我的皮肤所做的,则是随着界面变化,同步更新具体的HTML界面。比如你看到<element name="Face" mapping_mode="src" />这一句,他的意思就是当界面表示中的Face节点变化的时候同步更新HTML元素Face的src属性。
  评论这张
 
阅读(137)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018