AjaxDouban的jquery使用技术-伊夫ntMonitor(转)

Douban的jquery使用技术

Douban 是2.0 社区内部相比较成功的一个成品, 里面ajax技术也做得正确,
把它的源码拿来研讨了眨眼间间, 它在页面上应用了jquery, 
我相比欣赏它的一体式的事件处理机制,不用写过多的风浪绑定代码,只必要经过一定的命名规则就可以自行给页面元素加上一些效益,
它上边大概拥有的效劳都经过那么些已毕,
合作jquery强大的拔取器,代码看起来相比短小清晰. 
上面大家就来探视它的有的中坚部分. 我利用的是jquery
1.2.3,压缩之后29kb大小,
速度感觉上比原先有相比大的改革.废话不多说了,直接看看代码吧.
其它推荐一下blueprint 那几个css框架,还挺好用的.

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

前台要用就比较不难了,  只须求如此写:

Ajax 135<div id=”test2″ class=”mod”>
Ajax 136                <h3>
Ajax 137                    那里可以放标题
Ajax 138                </h3>
Ajax 139                <div class=”j modb a_forder” id=”modb-1002″>
Ajax 140                    那里是有些重中之重的始末
Ajax 141                    <dl>
Ajax 142                        <dt>Hello world</dt>
Ajax 143                        <dd>
Ajax 144                            hahaha</dd>
Ajax 145                    </dl>
Ajax 146                    那几个试验在沙加的神舟本上做到
Ajax 147                </div>
Ajax 148                <div class=”edit”>
Ajax 149                    <a id=”f-1002″ class=”forder” href=”javascript:void(0);”>[收起]</a> <a id=”unf-1002″
Ajax 150                        class=”unforder” href=”javascript:void(0);”>[展开]</a>
Ajax 151                </div>
Ajax 152            </div>

体制就概括了, 大家可以团结写, 最后发七个职能图:
Ajax 153
收起时的规范

Ajax 154

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

相关文章