Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery, 我比较喜欢它的一体式的事件处理机制，不用写很多的事件绑定代码，只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器，代码看起来比较简洁清晰. 下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3，压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了，直接看看代码吧. 另外推荐一下blueprint 这个css框架，还挺好用的.

先看看效果图：

实现JS代码：

1. //定义命名空间 
2. var Bowtech=new Object(); 
3.  
4. //注册全局的事件监视器. 
5. Bowtech.EventMonitor = function(){ 
6.     this.listeners = new Object(); 
7. } 
8. //广播事件 
9. Bowtech.EventMonitor.prototype.broadcast=function(widgetObj, msg, data){ 
10.     var lst = this.listeners[msg]; 
11.  
12.     if(lst != null){ 
13.         for(var o in lst){ 
14.             lst[o](widgetObj, data); 
15.         } 
16.     } 
17. } 
18. //绑定所有的事件.  
19. Bowtech.EventMonitor.prototype.subscribe=function(msg, callback){ 
20.     var lst = this.listeners[msg]; 
21.     if (lst) { 
22.         lst.push(callback); 
23.     } else { 
24.         this.listeners[msg] = [callback]; 
25.     } 
26. } 
27. //取消事件绑定. 
28. Bowtech.EventMonitor.prototype.unsubscribe=function(msg, callback){ 
29.     var lst = this.listener[msg]; 
30.     if (lst != null){ 
31.         lst = lst.filter(function(ele, index, arr){return ele!=callback;}); 
32.     } 
33. } 
34.  
35. // Page scope event-monitor obj. 
36. var event_monitor = new Bowtech.EventMonitor(); 
37. //对于所有 class="j a_xxx yyy" id="xxx-123"的元素执行事件绑定, xxx-123部分用来获取元素的ID，比如一个帖子的ID, 
38. // a_xxx  后面的部 
39. //分用来标识应用如 vote / review / blog 等. 
40. //绑定的事件就是 :  Bowtech.init_vote / Bowtech.init_blog 等. 
41. function load_event_monitor(root) { 
42.     var re = /a_(\w+)/; //正则表达式获取ID. 
43.     var fns = {}; 
44.     $(".j", root).each(function(i) { 
45.         var m = re.exec(this.className); 
46.         if (m) { 
47.             var f = fns[m[1]]; 
48.             if (!f) { //如果事件处理函数不存在则创建函数对象. 
49.                 f = eval("Bowtech.init_"+m[1]);  
50.                 fns[m[1]] = f;//调用绑定函数. 
51.             } 
52.             f && f(this); 
53.         } 
54.     }); 
55. } 
56. //在文档加载完毕后将执行的方法(参见jquery文档) 
57. //一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外. 
58. //比如 通过Ajax方法取回来的内容里面还含有动作按钮的，这时需要针对这部分功能执行绑定. 
59. //需要手动调用 load_event_monitor(element);  方法. 
60. $(function() { 
61.     load_event_monitor(document); 
62. }); 
63. //注意这里的o对象是一个html 元素而非是一个jquery对象，所以在调用它的方法时应该使用$(o)函数 
64. //把它转化为jquery对象. 
65. Bowtech.init_forder = function(o) { 
66.     var eid = $(o).attr("id").split("-")[1]; 
67.     var fo = $("#f-"+eid); 
68.     var unfo = $("#unf-"+eid); 
69.      
70.     fo.click(function() { 
71.        $(o).hide(); 
72.        unfo.show(); 
73.        fo.hide(); 
74.     }); 
75.     unfo.click(function() { 
76.         $(o).show(); 
77.         fo.show(); 
78.         unfo.hide(); 
79.     }); 
80. } 
81.  
82.  
83. jQuery.fn.extend({ 
84.     set_caret: function(){ 
85.         if(!$.browser.msie) return; 
86.         var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()}; 
87.         this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret); 
88.     },  
89.     insert_caret:function(textFeildValue){ 
90.         var textObj = this[0]; 
91.         if(document.all && textObj.createTextRange && textObj.caretPos){ 
92.             var caretPos=textObj.caretPos; 
93.             caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue; 
94.         } else if(textObj.setSelectionRange){ 
95.             var rangeStart=textObj.selectionStart; 
96.             var rangeEnd=textObj.selectionEnd; 
97.             var tempStr1=textObj.value.substring(0,rangeStart); 
98.             var tempStr2=textObj.value.substring(rangeEnd); 
99.             textObj.value=tempStr1+textFeildValue+tempStr2; 
100.             textObj.focus(); 
101.             var len=textFeildValue.length; 
102.             textObj.setSelectionRange(rangeStart+len,rangeStart+len); 
103.             textObj.blur(); 
104.         } else { 
105.             textObj.value+=textFeildValue; 
106.         } 
107.     } 
108. }) 

前台要用就比较简单了, 只需要这样写:

1. <div id="test2" class="mod"> 
2.                 <h3> 
3.                     这里可以放标题 
4.                 h3> 
5.                 <div class="j modb a_forder" id="modb-1002"> 
6.                     这里是一些主要的内容 
7.                     <dl> 
8.                         <dt>Hello worlddt> 
9.                         <dd> 
10.                             hahahadd> 
11.                     dl> 
12.                     这个实验在沙加的神舟本上完成 
13.                 div> 
14.                 <div class="edit"> 
15.                     <a id="f-1002" class="forder" href="javascript:void(0);">[收起]a> <a id="unf-1002" 
16.                         class="unforder" href="javascript:void(0);">[展开]a> 
17.                 div> 
18.             div>