豆瓣的jQuery使用技巧

2021年1月13日   |   by tgcode

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

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>%title插图%num//定义命名空间
%title插图%num
varBowtech=newObject();
%title插图%num
%title插图%num
//注册全局的事件监视器.
%title插图%num%title插图%num
Bowtech.EventMonitor=function()%title插图%num{
%title插图%num
this.listeners=newObject();
%title插图%num}

%title插图%num
//广播事件
%title插图%num%title插图%num
Bowtech.EventMonitor.prototype.broadcast=function(widgetObj,msg,data)%title插图%num{
%title插图%num
varlst=this.listeners[msg];
%title插图%num
%title插图%num%title插图%num
if(lst!=null)%title插图%num{
%title插图%num%title插图%num
for(varoinlst)%title插图%num{
%title插图%numlst[o](widgetObj,data);
%title插图%num}

%title插图%num}

%title插图%num}

%title插图%num
//绑定所tgcode有的事件.
%title插图%num%title插图%num
Bowtech.EventMonitor.prototype.subscribe=function(msg,callback)%title插图%num{
%title插图%num
varlst=this.listeners[msg];
%title插图%num%title插图%num
if(lst)%title插图%num{
%title插图%numlst.push(callback);
%title插图%num%title插图%num}
else%title插图%num{
%title插图%num
this.listeners[msg]=[callback];
%title插图%num}

%title插图%num}

%title插图%num
//取消事件绑定.
%title插图%num%title插图%num
Bowtech.EventMonitor.prototype.unsubscribe=function(msg,callback)%title插图%num{
%title插图%num
varlst=this.listener[msg];
%title插图%num%title插图%num
if(lst!=null)%title插图%num{
%title插图%num%title插图%numlst
=lst.filter(function(ele,index,arr)%title插图%num{returnele!=callback;});
%title插图%num}

%title插图%num}

%title插图%num
%title插图%num
//Pagescopeevent-monitorobj.
%title插图%num
varevent_monitor=newBowtech.EventMonitor();
%title插图%num
//对于所有class=”ja_xxxyyy”id=”xxx-123″的元素执行事件绑定,xxx-123部分用来获取元素的ID,比如一个帖子的ID,
%title插图%num//
a_xxx后面的部
%title插图%num//
分用来标识应用如vote/review/blog等.
%title插图%num//
绑定的事件就是:Bowtech.init_vote/Bowtech.init_blog等.
%title插图%num%title插图%num
functionload_event_monitor(root)%title插图%num{
%title插图%num
varre=/a_(w+)/;//正则表达式获取ID.
%title插图%num%title插图%num
varfns=%title插图%num{};
%title插图%num%title插图%num$(
.j,root).each(function(i)%title插图%num{
%title插图%num
varm=re.exec(this.className);
%title插图%num%title插图%num
if(m)%title插图%num{
%title插图%num
varf=fns[m[1]];
%title插图%num%title插图%num
if(!f)%title插图%num{//如果事件处理函数不存在则创建函数对象.
%title插图%num
f=eval(Bowtech.init_+m[1]);
%title插图%numfns[m[
1]]=f;//调用绑定函数.
%title插图%num
}

%title插图%numf
&&f(this);
%title插图%num}

%title插图%num}
);
%title插图%num}

%title插图%num
//在文档加载完毕后将执行的方法(参见jquery文档)
%title插图%num//
一般来说文档加载的时候应该绑定所有的事件,但是有一种情况例外.
%title插图%num//
比如通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定.
%title插图%num//
需要手动调用load_event_monitor(element);方法.
%title插图%num%title插图%num
$(function()%title插图%num{
%title插图%numload_event_monitor(document);
%title插图%num}
);
%title插图%num
//注意这里的o对象是一个html元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数
%title插图%num//
把它转化为jquery对象.
%title插图%num%title插图%num
Bowtech.init_forder=function(o)%title插图%num{
%title插图%num
vareid=$(o).attr(id).split()[1];
%title插图%num
varfo=$(#f-+eid);
%title插图%num
varunfo=$(#unf-+eid);
%title插图%num
%title插图%num%title插图%numfo.click(
function()%title插图%num{
%title插图%num$(o).hide();
%title插图%numunfo.show();
%title插图%numfo.hide();
%title插图%num}
);
%title插图%num%title插图%numunfo.click(
function()%title插图%num{
%title插图%num$(o).show();
%title插图%numfo.show();
%title插图%numunfo.hide();
%title插图%num}
);
%title插图%num}

%title插图%num
%title插图%num
%title插图%num%title插图%numjQuery.fn.extend(
%title插图%num{
%title插图%num%title插图%numset_caret:
function()%title插图%num{
%title插图%num
if(!$.browser.msie)return;
%title插图%num%title插图%num
varinitSetCaret=function()%title插图%num{this.caretPos=document.selection.createRange().duplicate()};
%title插图%num
this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
%title插图%num}
,
%title插图%num%title插图%numinsert_caret:
function(textFeildValue)%title插图%num{
%title插图%num
vartextObj=this[0];
%title插图%num%title插图%num
if(document.all&&textObj.createTextRange&&textObj.caretPos)%title插图%num{
%title插图%num
varcaretPos=textObj.caretPos;
%title插图%numcaretPos.text
=caretPos.text.charAt(caretPos.text.length1)==?textFeildValue+:textFeildValue;
%title插图%num%title插图%num}
elseif(textObj.setSelectionRange)%title插图%num{
%title插图%num
varrangeStart=textObj.selectionStart;
%title插图%num
varrangeEnd=textObj.selectionEnd;
%title插图%num
vartempStr1=textObj.value.substring(0,rangeStart);
%title插图%num
vartempStr2=textObj.value.substring(rangeEnd);
%title插图%numtextObj.value
=tempStr1+textFeildValue+tempStr2;
%title插图%numtextObj.focus();
%title插图%num
varlen=textFeildValue.length;
%title插图%numtextObj.setSelectionRange(rangeStart
+len,rangeStart+len);
%title插图%numtextObj.blur();
%title插图%num%title插图%num}
else%title插图%num{
%title插图%numtextObj.value
+=textFeildValue;
%title插图%num}

%title插图%num}

tgcode%title插图%num}
)


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

<!–

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

–>%title插图%numdivid=”test2″class=”mod”>
%title插图%num
h3>
%title插图%num这里可以放标题
%title插图%num
<!–h3>
%title插图%num
divclass=”jmodba_forder”id=”modb-1002″>
%title插图%num这里是一些主要的内容
%title插图%num
dl>
%title插图%num
dt>Helloworld<!–dt>
%title插图%num
dd>
%title插图%numhahaha
<!–dtgcoded>
%title插图%num
<!–dl>
%title插图%num这个实验在沙加的神舟本上完成
%title插图%num
<!–div>
%title插图%num
divclass=”edit”>
%title插图%num
aid=”f-1002″class=”forder”href=”javascript:void(0);”>[收起]<!–a>aid=”unf-1002″
%title插图%numclass
=”unforder”href=”javascript:void(0);”>[展开]<!–a>
%title插图%num
<!–div>
%title插图%num
<!–div>


样式就省略了, 大家可以自己写, 最后发两个效果图:
%title插图%num
收起时的样子
%title插图%num

相关推荐: Javascript文件加载:LABjs和RequireJS

  传统上,加载 Javascript 文件都是使用标签。   就像下面这样: script type=”text/javascript” src=”example.js”>script>   标签很方便,只要加入网页,浏览器就会读取并运行。但是,…

Tags: , , ,