Douban的jquery使用技术

Douban 是2.0 社区内部比较成功的一个出品, 里面ajax技术也做得没错,
把它的源码拿来研讨了一下, 它在页面上利用了jquery, 
我比较欣赏它的一体式的事件处理机制,不用写过多的风云绑定代码,只须要经过自然的命名规则就能够自行给页面成分加上有个别功用,
它上边差不离拥有的作用都经过这么些达成,
合作jquery强大的选拔器,代码看起来比较精简清晰. 
下边大家就来探望它的片段基本部分. 笔者利用的是jquery
1.2.3,压缩之后29kb大小,
速度感觉上比原先有相比大的革新.废话不多说了,直接看看代码吧.
其余推荐一下blueprint 这几个css框架,还挺好用的.

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

前台要用就比较不难了,  只供给那样写:

jQuery 135<div id=”test2″ class=”mod”>
jQuery 136                <h3>
jQuery 137                    那里能够放标题
jQuery 138                </h3>
jQuery 139                <div class=”j modb a_forder” id=”modb-1002″>
jQuery 140                    那里是部分至关心器重要的内容
jQuery 141                    <dl>
jQuery 142                        <dt>Hello world</dt>
jQuery 143                        <dd>
jQuery 144                            hahaha</dd>
jQuery 145                    </dl>
jQuery 146                    那个实验在沙加的神舟本上形成
jQuery 147                </div>
jQuery 148                <div class=”edit”>
jQuery 149                    <a id=”f-1002″ class=”forder” href=”javascript:void(0);”>[收起]</a> <a id=”unf-1002″
jQuery 150                        class=”unforder” href=”javascript:void(0);”>[展开]</a>
jQuery 151                </div>
jQuery 152            </div>

体制就总结了, 大家能够协调写, 最终发八个效率图:
jQuery 153
收起时的规范

jQuery 154

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

相关文章

网站地图xml地图