悠点网(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这个键名，代价太大了。 有什么好的解决方法呢？ ——————————————————————————————————————————————————- 好吧。终于结束了。 内存泄露问题还有很多，不知道什么时候能够完全解决。

function DOMReady(fn){ if(document.addEventListener){ document.addEvent(“DOMContentLoaded”,fn,false); } else{ setTimeout(fn,0); } } function Each(obj,fn,args){ var isObj=false; if(typeof obj==”object” || typeof obj==”function”){ isObj=true;} if(args){ if(isObj){ for(var i in obj){ fn.apply(obj[i],args); } } else{ for(var i=0;i<obj.length;i++){ fn.apply(obj[i],args); } } } else{ if(isObj){ for(var i in obj){ fn.apply(obj[i],i,obj[i]); } } else{ for(var i=0;i<obj.length;i++){ fn.apply(obj[i],i,obj[i]); } } } }

function c(x){ alert(delete arguments[0]); alert(Array.prototype.slice.call(arguments, 0)); alert(x); } 执行c(1) 最后一行的输出结果，除了ch是undefined之外，包括safari，都是1。或许可以说，在chrome中，可以删除形参。但是又非常微妙的是，第一行结果统统为true，第二行的结果又统统为空。 相同的是，直接delete x和delete arguments.callee.arguments都不会成功。 你甚至可以delete arguments.callee。

绑定事件 function addEvent(o,l,f){ if(o.addEventListener){ o.addEventListener(“on”+l,f,false); } else{ o.attachEvent(l,function(){f.call(o,window.event);}); } } 用法： var link=document.getElementById(“a”); addEvent(link,”click”,function(e){alert(e)}); 获取指定ID的元素 function $(o){ return typeof o==”string”?document.getElementById(o):o; } 用法: var a=$(“links”); 创建DOM元素 function Element(tag,obj){ var ele=document.createElement(tag); for(var i in obj){ if(i==”listeners”){ for(var k in obj[i]){ addEvent(ele,k,obj[i][k]); } else{ ele[i]=obj[i]; } } } return ele; } 用法： var span=new Element(“span”,{“className”:”abc”,”listeners”:{“click”,function(){alert(1)}}}); 当然用不用new都一样，只是用new更有感觉不是吗？  :) 判断元素是否属于包含关系 ...Read More

flash开发中，经常会读取后台的html数据源，在很多情况下，是HTMLEditor生成的html字符串。 但是flash对html标签支持实在是太差了。。好吧，反正adobe不是搞浏览器的，它才不管洪水滔天呢。 <a>标签：支持href和target属性 <b>标签：加粗显示 <br>标签：换行 <font>标签：支持color和face属性。 <p>标签：支持align和class属性 <u>标签：加下划线 <img>标签：支持src，width，height，align，hspace，vspace，id属性 还有一个特殊的标签<textformat>：支持blockindent , indent  , leftmargin,rightmargin , tabstops属性 可以看出，flash支持的html标签及其有限，而且在图文混排上，显示的也和html不同。