悠点网(http://www.okto.cn,又进行了一次改进,页面内容变的更丰富,更有层次感了,用户体验有了不错的进步。

改版的前端工作量很大部分集中在点菜页面的功能实现。 DEMO地址:http://okto.cn/b2c.do?mod=rest&ac=order&restid=27

点菜页面实现目标:

1、整个点菜过程无刷新,提高用户体验。

2、提供菜肴列表。

3、用户点击菜肴,菜肴进入左方菜单处。可以自由增减,并实时计算菜的个数和总价。

4、支持多人点菜,并能同步菜单。

5、有聊天窗口,可以边点菜,边聊天。且聊天窗口可拖动。

6、支持小工具,例如锁定菜单,超支提醒等等。

现在实现这些功能的思路是这样的(感谢张三东童鞋:O)。

首先,抽离数据层,用来和服务器进行交互。

function DataProvider(){} ,首先给DataProvider扩充必要的本地数据,用户名,用户id,用户头像等等。

DataProvider.prototype.post=function(data,callback){}  ,扩充post方法,想服务器提交数据。

在post的基础上,扩充各种细化的数据方法,满足数据交互的需要。

然后是表现层。

表现层主要由很多的面板组成。聊天面板,点菜单面板,导航TAB面板,导入菜单列表面板,导入菜单详细面板,菜肴列表面板。

所有的面板继承自Pannel, Pannel具有以下几个属性或方法。 close(关闭),open(打开),dataprovider(数据源,指向dataProvider)

containerBox(指向面板容器的DOM对象),parentComponent ,指向父级的对象。

当面板打开时,执行初始化函数,来出初始化面板的各种参数及必要的DOM表现。

—————————————————————————————————————————————

接着昨天的说。

今天又改进了一下结构。

所有的面板都有自己的对象,对象都首先继承了基类Pannel,首先构造一个大面板,包括所有的小面板,这个大面板没有自己的表现层,而是充当所有小面板之间的调度和联系的作用。 起初只是让大面板起一个桥梁的作用。比如在菜肴面板中点击菜肴,需要菜单面板同时添加一个这个菜肴的信息。起初是这样做的,self.parentComponet.cartPannel.addFood..  ,也就是说,通过大面板找到对应的响应面板的方法。

这本来没有什么问题,但是发现在实际的程序运行中,有很多东西都是相互关联的,也就是说,某个操作,是更新两个面板,而另外一个操作,也是更新两个面板,但是产生事件的位置,却不一致。

今天就解决下这个问题,就是让外部的这个大面板,添加一些方法,来同时更新小面板。然后大面板中也集成了定时刷新服务器等服务。

今天也增加了一个数据缓存,以前判断一个菜是否已经被选用,是查找左边的菜单中是否存在包含菜ID的DOM元素存在,效率比较差,现在增加了一个数据缓存,把这些数据缓存在一个对象中,保存在dataProvider.dataCache中。

其他的操作,都比较分散,大多数就是事件处理函数的派发,和把数据格式化为HTML,都集成在各自的面板中。

总之,就是如果有协同操作的,也就是同时更新两个以上面板的操作,都由大面板的对应方法派发,单独的,都控制在对应小面板内。

感觉还有很多地方可以优化,明天继续改。

今天和三东童鞋讨论了一个问题,现在的web前端程序,与服务器后端进行交互,有这样一个老大难问题。就是,如果后端返回的数据改了,例如本来的菜ID叫foid,前端程序取值用data.foid,如果有一天,菜ID叫foodid了,前端程序就要大改,因为可能很多地方都是用foid这个键名,代价太大了。

有什么好的解决方法呢?

——————————————————————————————————————————————————-

好吧。终于结束了。

内存泄露问题还有很多,不知道什么时候能够完全解决。