Douban是2.0 社區(qū)里面比較成功的一個(gè)產(chǎn)品, 里面ajax技術(shù)也做得不錯(cuò), 把它的源碼拿來(lái)研究了一下, 它在頁(yè)面上使用了jquery, 我比較喜歡它的一體式的事件處理機(jī)制，不用寫很多的事件綁定代碼，只需要通過(guò)一定的命名規(guī)則就可以自動(dòng)給頁(yè)面元素加上一些功能, 它上面幾乎所有的功能都通過(guò)這個(gè)實(shí)現(xiàn), 配合jquery強(qiáng)大的選擇器，代碼看起來(lái)比較簡(jiǎn)潔清晰. 下面我們就來(lái)看看它的一些核心部分. 我使用的是jquery 1.2.3，壓縮之后29kb大小, 速度感覺(jué)上比以前有比較大的改善.廢話不多說(shuō)了，直接看看代碼吧. 另外推薦一下blueprint 這個(gè)css框架，還挺好用的.
//定義命名空間
var Bowtech=new Object();
//注冊(cè)全局的事件監(jiān)視器.
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();
//對(duì)于所有 class="j a_xxx yyy" id="xxx-123"的元素執(zhí)行事件綁定, xxx-123部分用來(lái)獲取元素的ID，比如一個(gè)帖子的ID,
// a_xxx 后面的部
//分用來(lái)標(biāo)識(shí)應(yīng)用如 vote / review / blog 等.
//綁定的事件就是 : Bowtech.init_vote / Bowtech.init_blog 等.
function load_event_monitor(root) {
var re = /a_(\w+)/; //正則表達(dá)式獲取ID.
var fns = {};
$(".j", root).each(function(i) {
var m = re.exec(this.className);
if (m) {
var f = fns[m[1]];
if (!f) { //如果事件處理函數(shù)不存在則創(chuàng)建函數(shù)對(duì)象.
f = eval("Bowtech.init_"+m[1]);
fns[m[1]] = f;//調(diào)用綁定函數(shù).
}
f && f(this);
}
});
}
//在文檔加載完畢后將執(zhí)行的方法(參見(jiàn)jquery文檔)
//一般來(lái)說(shuō)文檔加載的時(shí)候應(yīng)該綁定所有的事件, 但是有一種情況例外.
//比如 通過(guò)Ajax方法取回來(lái)的內(nèi)容里面還含有動(dòng)作按鈕的，這時(shí)需要針對(duì)這部分功能執(zhí)行綁定.
//需要手動(dòng)調(diào)用 load_event_monitor(element); 方法.
$(function() {
load_event_monitor(document);
});
//注意這里的o對(duì)象是一個(gè)html 元素而非是一個(gè)jquery對(duì)象，所以在調(diào)用它的方法時(shí)應(yīng)該使用$(o)函數(shù)
//把它轉(zhuǎn)化為jquery對(duì)象.
Bowtech.init_forder = function(o) {
var eid = $(o).attr("id").split("-")[1];
var fo = $("#f-"+eid);
var unfo = $("#unf-"+eid);
fo.click(function() {
$(o).hide();
unfo.show();
fo.hide();
});
unfo.click(function() {
$(o).show();
fo.show();
unfo.hide();
});
}
jQuery.fn.extend({
set_caret: function(){
if(!$.browser.msie) return;
var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()};
this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
},
insert_caret:function(textFeildValue){
var textObj = this[0];
if(document.all && textObj.createTextRange && textObj.caretPos){
var caretPos=textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue;
} else if(textObj.setSelectionRange){
var rangeStart=textObj.selectionStart;
var rangeEnd=textObj.selectionEnd;
var tempStr1=textObj.value.substring(0,rangeStart);
var tempStr2=textObj.value.substring(rangeEnd);
textObj.value=tempStr1+textFeildValue+tempStr2;
textObj.focus();
var len=textFeildValue.length;
textObj.setSelectionRange(rangeStart+len,rangeStart+len);
textObj.blur();
} else {
textObj.value+=textFeildValue;
}
}
})
前臺(tái)要用就比較簡(jiǎn)單了, 只需要這樣寫:
<div id="test2" class="mod">
<h3>
這里可以放標(biāo)題
h3>
<div class="j modb a_forder" id="modb-1002">
這里是一些主要的內(nèi)容
<dl>
<dt>Hello worlddt>
<dd>
hahahadd>
dl>
這個(gè)實(shí)驗(yàn)在沙加的神舟本上完成
div>
<div class="edit">
<a id="f-1002" class="forder" href="javascript:void(0);">[收起]a> <a id="unf-1002"
class="unforder" href="javascript:void(0);">[展開(kāi)]a>
div>
div>
樣式就省略了, 大家可以自己寫, 最后發(fā)兩個(gè)效果圖:
收起時(shí)的樣子
