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)函数

//把它转化为jquery对象.

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;

}

})

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

<h3>

这里可以放标题

</h3>

这里是一些主要的内容

<dl>

<dt>Hello world</dt>

<dd>

hahaha</dd>

</dl>

这个实验在沙加的神舟本上完成

</div>

<a id="f-1002" class="forder" href="javascript:void(0);">[收起]</a> <a id="unf-1002"

class="unforder" href="javascript:void(0);">[展开]</a>

</div>

样式就省略了, 大家可以自己写, 最后发两个效果图:

收起时的样子

开发环境: 沙加的神舟本, VS2008, Framework 2.0 (责任编辑：admin)

搜索

热门标签:

Douban的jquery使用分析