Douban的jquery使用技巧

Douban的jquery使用技巧

Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery,  我比较喜欢它的一体式的事件处理机制,不用写很多的事件绑定代码,只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器,代码看起来比较简洁清晰.  下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3,压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了,直接看看代码吧. 另外推荐一下blueprint 这个css框架,还挺好用的.

Douban的jquery使用技巧
//
定义命名空间

Douban的jquery使用技巧

var
 Bowtech
=
new
 Object();
Douban的jquery使用技巧
Douban的jquery使用技巧

//
注册全局的事件监视器.

Douban的jquery使用技巧Douban的jquery使用技巧

Bowtech.EventMonitor 
=
 
function
()
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
this.listeners = new Object();
Douban的jquery使用技巧}


Douban的jquery使用技巧

//
广播事件

Douban的jquery使用技巧Douban的jquery使用技巧

Bowtech.EventMonitor.prototype.broadcast
=
function
(widgetObj, msg, data)
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
var lst = this.listeners[msg];
Douban的jquery使用技巧
Douban的jquery使用技巧Douban的jquery使用技巧    
if(lst != null)Douban的jquery使用技巧{

Douban的jquery使用技巧Douban的jquery使用技巧        
for(var o in lst)Douban的jquery使用技巧{

Douban的jquery使用技巧            lst[o](widgetObj, data);
Douban的jquery使用技巧        }

Douban的jquery使用技巧    }

Douban的jquery使用技巧}


Douban的jquery使用技巧

//
绑定所有的事件. 

Douban的jquery使用技巧Douban的jquery使用技巧

Bowtech.EventMonitor.prototype.subscribe
=
function
(msg, callback)
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
var lst = this.listeners[msg];
Douban的jquery使用技巧Douban的jquery使用技巧    
if (lst) Douban的jquery使用技巧{

Douban的jquery使用技巧        lst.push(callback);
Douban的jquery使用技巧Douban的jquery使用技巧    }
 else Douban的jquery使用技巧{

Douban的jquery使用技巧        
this.listeners[msg] = [callback];
Douban的jquery使用技巧    }

Douban的jquery使用技巧}


Douban的jquery使用技巧

//
取消事件绑定.

Douban的jquery使用技巧Douban的jquery使用技巧

Bowtech.EventMonitor.prototype.unsubscribe
=
function
(msg, callback)
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
var lst = this.listener[msg];
Douban的jquery使用技巧Douban的jquery使用技巧    
if (lst != null)Douban的jquery使用技巧{

Douban的jquery使用技巧Douban的jquery使用技巧        lst 
= lst.filter(function(ele, index, arr)Douban的jquery使用技巧{
return ele!=callback;}
);
Douban的jquery使用技巧    }

Douban的jquery使用技巧}


Douban的jquery使用技巧
Douban的jquery使用技巧

//
 Page scope event-monitor obj.

Douban的jquery使用技巧

var
 event_monitor 
=
 
new
 Bowtech.EventMonitor();
Douban的jquery使用技巧

//
对于所有 class=”j a_xxx yyy” id=”xxx-123″的元素执行事件绑定, xxx-123部分用来获取元素的ID,比如一个帖子的ID,

Douban的jquery使用技巧//

 a_xxx  后面的部

Douban的jquery使用技巧//

分用来标识应用如 vote / review / blog 等.

Douban的jquery使用技巧//

绑定的事件就是 :  Bowtech.init_vote / Bowtech.init_blog 等.

Douban的jquery使用技巧Douban的jquery使用技巧

function
 load_event_monitor(root) 
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
var re = /a_(\w+)///正则表达式获取ID.
Douban的jquery使用技巧Douban的jquery使用技巧
    var fns = Douban的jquery使用技巧{};
Douban的jquery使用技巧Douban的jquery使用技巧    $(
.j, root).each(function(i) Douban的jquery使用技巧{

Douban的jquery使用技巧        
var m = re.exec(this.className);
Douban的jquery使用技巧Douban的jquery使用技巧        
if (m) Douban的jquery使用技巧{

Douban的jquery使用技巧            
var f = fns[m[1]];
Douban的jquery使用技巧Douban的jquery使用技巧            
if (!f) Douban的jquery使用技巧//如果事件处理函数不存在则创建函数对象.
Douban的jquery使用技巧
                f = eval(Bowtech.init_+m[1]); 
Douban的jquery使用技巧                fns[m[
1]] = f;//调用绑定函数.
Douban的jquery使用技巧
            }

Douban的jquery使用技巧            f 
&& f(this);
Douban的jquery使用技巧        }

Douban的jquery使用技巧    }
);
Douban的jquery使用技巧}


Douban的jquery使用技巧

//
在文档加载完毕后将执行的方法(参见jquery文档)

Douban的jquery使用技巧//

一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.

Douban的jquery使用技巧//

比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定.

Douban的jquery使用技巧//

需要手动调用 load_event_monitor(element);  方法.

Douban的jquery使用技巧Douban的jquery使用技巧

$(
function
() 
Douban的jquery使用技巧
{

Douban的jquery使用技巧    load_event_monitor(document);
Douban的jquery使用技巧}

);
Douban的jquery使用技巧

//
注意这里的o对象是一个html 元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数

Douban的jquery使用技巧//

把它转化为jquery对象.

Douban的jquery使用技巧Douban的jquery使用技巧

Bowtech.init_forder 
=
 
function
(o) 
Douban的jquery使用技巧
{

Douban的jquery使用技巧    
var eid = $(o).attr(id).split()[1];
Douban的jquery使用技巧    
var fo = $(#f-+eid);
Douban的jquery使用技巧    
var unfo = $(#unf-+eid);
Douban的jquery使用技巧    
Douban的jquery使用技巧Douban的jquery使用技巧    fo.click(
function() Douban的jquery使用技巧{

Douban的jquery使用技巧       $(o).hide();
Douban的jquery使用技巧       unfo.show();
Douban的jquery使用技巧       fo.hide();
Douban的jquery使用技巧    }
);
Douban的jquery使用技巧Douban的jquery使用技巧    unfo.click(
function() Douban的jquery使用技巧{

Douban的jquery使用技巧        $(o).show();
Douban的jquery使用技巧        fo.show();
Douban的jquery使用技巧        unfo.hide();
Douban的jquery使用技巧    }
);
Douban的jquery使用技巧}


Douban的jquery使用技巧
Douban的jquery使用技巧
Douban的jquery使用技巧Douban的jquery使用技巧jQuery.fn.extend(

Douban的jquery使用技巧
{

Douban的jquery使用技巧Douban的jquery使用技巧    set_caret: 
function()Douban的jquery使用技巧{

Douban的jquery使用技巧        
if(!$.browser.msie) return;
Douban的jquery使用技巧Douban的jquery使用技巧        
var initSetCaret = function()Douban的jquery使用技巧{
this.caretPos = document.selection.createRange().duplicate()}
;
Douban的jquery使用技巧        
this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
Douban的jquery使用技巧    }

Douban的jquery使用技巧Douban的jquery使用技巧    insert_caret:
function(textFeildValue)Douban的jquery使用技巧{

Douban的jquery使用技巧        
var textObj = this[0];
Douban的jquery使用技巧Douban的jquery使用技巧        
if(document.all && textObj.createTextRange && textObj.caretPos)Douban的jquery使用技巧{

Douban的jquery使用技巧            
var caretPos=textObj.caretPos;
Douban的jquery使用技巧            caretPos.text 
= caretPos.text.charAt(caretPos.text.length1==  ? textFeildValue+ : textFeildValue;
Douban的jquery使用技巧Douban的jquery使用技巧        }
 else if(textObj.setSelectionRange)Douban的jquery使用技巧{

Douban的jquery使用技巧            
var rangeStart=textObj.selectionStart;
Douban的jquery使用技巧            
var rangeEnd=textObj.selectionEnd;
Douban的jquery使用技巧            
var tempStr1=textObj.value.substring(0,rangeStart);
Douban的jquery使用技巧            
var tempStr2=textObj.value.substring(rangeEnd);
Douban的jquery使用技巧            textObj.value
=tempStr1+textFeildValue+tempStr2;
Douban的jquery使用技巧            textObj.focus();
Douban的jquery使用技巧            
var len=textFeildValue.length;
Douban的jquery使用技巧            textObj.setSelectionRange(rangeStart
+len,rangeStart+len);
Douban的jquery使用技巧            textObj.blur();
Douban的jquery使用技巧Douban的jquery使用技巧        }
 else Douban的jquery使用技巧{

Douban的jquery使用技巧            textObj.value
+=textFeildValue;
Douban的jquery使用技巧        }

Douban的jquery使用技巧    }

Douban的jquery使用技巧}

)

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

Douban的jquery使用技巧
<
div 
id
=”test2″
 class
=”mod”
>

Douban的jquery使用技巧                

<
h3
>

Douban的jquery使用技巧                    这里可以放标题
Douban的jquery使用技巧                

</
h3
>

Douban的jquery使用技巧                

<
div 
class
=”j modb a_forder”
 id
=”modb-1002″
>

Douban的jquery使用技巧                    这里是一些主要的内容
Douban的jquery使用技巧                    

<
dl
>

Douban的jquery使用技巧                        

<
dt
>
Hello world
</
dt
>

Douban的jquery使用技巧                        

<
dd
>

Douban的jquery使用技巧                            hahaha

</
dd
>

Douban的jquery使用技巧                    

</
dl
>

Douban的jquery使用技巧                    这个实验在沙加的神舟本上完成
Douban的jquery使用技巧                

</
div
>

Douban的jquery使用技巧                

<
div 
class
=”edit”
>

Douban的jquery使用技巧                    

<

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

id
=”unf-1002″

Douban的jquery使用技巧                        class

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

Douban的jquery使用技巧                

</
div
>

Douban的jquery使用技巧            

</
div
>

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


Douban的jquery使用技巧

收起时的样子


Douban的jquery使用技巧

开发环境:  沙加的神舟本, VS2008, Framework 2.0

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111035.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • git 查看、修改Git用户名和密码_163邮箱用户名可以改吗

    git 查看、修改Git用户名和密码_163邮箱用户名可以改吗用户名和邮箱地址的作用用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变。每次commit都会用用户名和邮箱纪录。github的contributions统计就是按邮箱来统计的。查看用户名和邮箱地址:$gitconfiguser.name$gitconfiguser.email修改用户名和邮箱地址:$gitconfig–globaluser.name”user

  • SIFT特征匹配算法介绍——寻找图像特征点的原理

    SIFT特征匹配算法介绍——寻找图像特征点的原理关于opencv的SIFT特征匹配算法原理的详细介绍,附有图文解析,希望能帮助到图像处理刚入门的朋友们(*^__^*)嘻嘻……

  • Spatial Transformer Network_transgression

    Spatial Transformer Network_transgression导读上一篇通俗易懂的SpatialTransformerNetworks(STN)(一)中,我们详细介绍了STN中会使用到的几个模块,并且用pytorch和numpy来实现了他们,这篇文章我们将会利用pytorch来实现一个MNIST的手写数字识别并且将STN模块插入到CNN中STN关键点解读STN有一个最大的特点就是STN模块能够很容易的嵌入到CNN中,只需要进行非常小的修改即可。上一篇文章我们也说了STN拥有平移、旋转、剪切、缩放等不变性,而这一特点主要是依赖θ\thetaθ参数来实现的。刚开

  • 爬虫项目#4567电影网scrapy数据爬取moviePro/持久化储存handReqPro

    爬虫项目#4567电影网scrapy数据爬取moviePro/持久化储存handReqPro仅用与备忘录

  • 5g端到端网络切片技术_5G网络切片的特征

    5g端到端网络切片技术_5G网络切片的特征1、网络切片的一些概念网络切片(Slice):基于客户化需求,可以被设计、部署、维护的逻辑网络,旨在满足特定的客户、业务、商业场景的业务特点及商业模式。网络切片实例(E2ESliceInstance-ESI):网络切片实例(Instance)是一个临时逻辑网络,跨多个技术域,包含:(1)组网络:”功能”(Function)即虚拟网元(终端、接入网、回传网、核心网、业务网络)及网管系统对应的资源;(2)存储、运算;(3)连接关系。2、网络切片原因:未来业务需求差异

  • vs 安装包_vs离线安装包

    vs 安装包_vs离线安装包VS安装包注册com组件VS安装包注册com组件1.把你的com组件加入到打包程序。 2.在打包程序中找到该com组件,点击属性。在属性中有Register项,把值选择为vsdrfCOM即可。

    2022年10月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号