【 tulaoshi.com - Web开发 】
Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery, 我比较喜欢它的一体式的事件处理机制,不用写很多的事件绑定代码,只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器,代码看起来比较简洁清晰. 下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3,压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了,直接看看代码吧. 另外推荐一下blueprint 这个css框架,还挺好用的.
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//定义命名空间
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
var Bowtech=new Object();
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//注册全局的事件监视器.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
Bowtech.EventMonitor = function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
this.listeners = new Object();
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//广播事件
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
Bowtech.EventMonitor.prototype.broadcast=function(widgetObj, msg, data)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var lst = this.listeners[msg];
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if(lst != null)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
for(var o in lst)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
lst[o](widgetObj, data);
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//绑定所有的事件.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
Bowtech.EventMonitor.prototype.subscribe=function(msg, callback)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var lst = this.listeners[msg];
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if (lst)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
lst.push(callback);
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
} else
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
this.listeners[msg] = [callback];
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//取消事件绑定.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
Bowtech.EventMonitor.prototype.unsubscribe=function(msg, callback)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var lst = this.listener[msg];
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if (lst != null)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
lst = lst.filter(function(ele, index, arr)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{return ele!=callback;});
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
// Page scope event-monitor obj.
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
var event_monitor = new Bowtech.EventMonitor();
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//对于所有 class="j a_xxx yyy" id="xxx-123"的元素执行事件绑定, xxx-123部分用来获取元素的ID,比如一个帖子的ID,
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
// a_xxx 后面的部
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//分用来标识应用如 vote / review / blog 等.
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//绑定的事件就是 : Bowtech.init_vote / Bowtech.init_blog 等.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
function load_event_monitor(root)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var re = /a_(w+)/; //正则表达式获取ID.
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
var fns =
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{};
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
$(".j", root).each(function(i)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var m = re.exec(this.className);
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if (m)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var f = fns[m[1]];
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if (!f)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{ //如果事件处理函数不存在则创建函数对象.
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
f = eval("Bowtech.init_"+m[1]);
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
fns[m[1]] = f;//调用绑定函数.
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
f && f(this);
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
});
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//在文档加载完毕后将执行的方法(参见jquery文档)
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定.
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//需要手动调用 load_event_monitor(element); 方法.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
$(function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
load_event_monitor(document);
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
});
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//注意这里的o对象是一个html 元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
//把它转化为jquery对象.
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
Bowtech.init_forder = function(o)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var eid = $(o).attr("id").split("-")[1];
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var fo = $("#f-"+eid);
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var unfo = $("#unf-"+eid);
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
fo.click(function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
$(o).hide();
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
unfo.show();
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
fo.hide();
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
});
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
unfo.click(function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
$(o).show();
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
fo.show();
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
unfo.hide();
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
});
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245O41b0-22111.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245OL0Z-3GD.jpg)
jQuery.fn.extend(
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
set_caret: function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
if(!$.browser.msie) return;
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
var initSetCaret = function()
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{this.caretPos = document.selection.createRange().duplicate()};
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
},
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
insert_caret:function(textFeildValue)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var textObj = this[0];
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
if(document.all && textObj.createTextRange && textObj.caretPos)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var caretPos=textObj.caretPos;
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue;
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
} else if(textObj.setSelectionRange)
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var rangeStart=textObj.selectionStart;
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var rangeEnd=textObj.selectionEnd;
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var tempStr1=textObj.value.substring(0,rangeStart);
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var tempStr2=textObj.value.substring(rangeEnd);
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
textObj.value=tempStr1+textFeildValue+tempStr2;
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
textObj.focus();
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
var len=textFeildValue.length;
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
textObj.setSelectionRange(rangeStart+len,rangeStart+len);
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
textObj.blur();
![](http://img.warting.com/allimg/2013/c1124/13U2245Pc250-J406.jpg)
![](http://img.warting.com/allimg/2013/c1124/13U2245Q3IF-XU0.jpg)
} else
![](http://img.warting.com/allimg/2013/c1124/13U2245P063P-4O25.jpg)
{
![](http://img.warting.com/allimg/2013/c1124/13U2245P3LZ-59143.jpg)
textObj.value+=textFeildValue;
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245QCO0-9ED.jpg)
}
![](http://img.warting.com/allimg/2013/c1124/13U2245PE010-62322.jpg)
})
前台要用就比较简单了, 只需要这样写:
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
div id="test2" class="mod"
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
h3
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
这里可以放标题
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
/h3
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
div class="j modb a_forder" id="modb-1002"
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
这里是一些主要的内容
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
dl
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
dtHello world/dt
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
dd
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
hahaha/dd
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
/dl
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
这个实验在沙加的神舟本上完成
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
/div
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
div class="edit"
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
a id="f-1002" class="forder" href="javascript:void(0);"[收起]/a a id="unf-1002"
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
class="unforder" href="javascript:void(0);"[展开]/a
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
/div
![](http://img.warting.com/allimg/2013/c1124/13U2245N96230-132W.jpg)
/div
样式就省略了, 大家可以自己写, 最后发两个效果图:
![](http://img.warting.com/allimg/2013/c1124/13U2245R0P60-102041.jpg)
收起时的样子
![](http://img.warting.com/allimg/2013/c1124/13U2245R5Y0-113261.jpg)
开发环境: 沙加的神舟本, VS2008, Framework 2.0