Douban的jquery使用技巧-EventMonitor(转)

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;
        }
    }
})

前台要用便比较简单了,  只需要这么描绘:

<div id=”test2″ class=”mod”>
                <h3>
                    这里可以加大标题
                </h3>
                <div class=”j modb a_forder” id=”modb-1002″>
                    这里是局部着重的内容
                    <dl>
                        <dt>Hello world</dt>
                        <dd>
                            hahaha</dd>
                    </dl>
                    这个实验在沙加的神舟本上落成
                </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);”>[展开]</a>
                </div>
            </div>

体制就简单了, 大家好团结写, 最后发少单效益图:

利落于时的法

转自http://www.cnblogs.com/darkangle/archive/2008/03/31/1131265.html

相关文章