(Douban的jquery使用分析.docxVIP

Douban的jquery使用分析时间：2009-05-13 相关文章： 玩透javascript弹出窗口 状态栏走马灯效果 JavaScript教程 操作cookies的js框架 纯javascript联动的例子 JavaScript的BASE64 AJAX技术基础介绍 菜鸟应用JAVASCRIPT 之 简易网页音乐播放程 结合JavaScript与ASP.NET Web窗体进行程序 菜鸟应用JAVASCRIPT 之 简易闹钟程序 [网站建设之]Douban的jquery使用分析Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery,? 我比较喜欢它的一体式的事件处理机制，不用写很多的事件绑定代码，只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器，代码看起来比较简洁清晰.? 下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3，压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了，直接看看代码吧. 另外推荐一下blueprint 这个css框架，还挺好用的.//定义命名空间var?Bowtech=new?Object();//注册全局的事件监视器.Bowtech.EventMonitor?=?function(){?this.listeners?=?new?Object();}//广播事件Bowtech.EventMonitor.prototype.broadcast=function(widgetObj,?msg,?data){?var?lst?=?this.listeners[msg];?if(lst?!=?null){?for(var?o?in?lst){?lst[o](widgetObj,?data);?}?}}//绑定所有的事件.?Bowtech.EventMonitor.prototype.subscribe=function(msg,?callback){?var?lst?=?this.listeners[msg];?if?(lst)?{?lst.push(callback);?}?else?{?this.listeners[msg]?=?[callback];?}}//取消事件绑定.Bowtech.EventMonitor.prototype.unsubscribe=function(msg,?callback){?var?lst?=?this.listener[msg];?if?(lst?!=?null){?lst?=?lst.filter(function(ele,?index,?arr){return?ele!=callback;});?}}//?Page?scope?event-monitor?obj.var?event_monitor?=?new?Bowtech.EventMonitor();//对于所有?class=j?a_xxx?yyy?id=xxx-123的元素执行事件绑定,?xxx-123部分用来获取元素的ID，比如一个帖子的ID,//?a_xxx??后面的部//分用来标识应用如?vote?/?review?/?blog?等.//绑定的事件就是?:??Bowtech.init_vote?/?Bowtech.init_blog?等.function?load_event_monitor(root)?{?var?re?=?/a_(\w+)/;?//正则表达式获取ID.?var?fns?=?{};?$(.j,?root).each(function(i)?{?var?m?=?re.exec(this.className);?if?(m)?{?var?f?=?fns[m[1]];?if?(!f)?{?//如果事件处理函数不存在则创建函数对象.?f?=?eval(Bowtech.init_+m[1]);??fns[m[1]]?=?f;//调用绑定函数.?}?f??f(this);?}?});}//在文档加载完毕后将执行的方法(参见jquery文档)//一般来说文档加载的时候应该绑定所有的事件,?但是有一种情况例外.//比如?通过Ajax方法取回来的内容里面还含有动作按钮的，这时需要针对这部分功能执行绑定.//需要手动调用?load_event_monitor(element);??方法.$(function()?{?load_event_monitor(document);});//注意这里的o对象是一个html?元素而非是一个jquery对象，所以在调用它的方法时应该使用$(o)函数//把