豆瓣的jQuery使用技巧
Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery, 我比较喜欢它的一体式的事件处理机制，不用写很多的事件绑定代码，只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器，代码看起来比较简洁清晰. 下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3，压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了，直接看看代码吧. 另外推荐一下blueprint 这个css框架，还挺好用的.http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//定义命名空间
http://cms.cnblogs.com/Images/OutliningIndicators/None.gifvar Bowtech=new Object();
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//注册全局的事件监视器.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifBowtech.EventMonitor = function()http://www.cnblogs.com/Images/dot.gif{ <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif this.listeners = new Object();
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//广播事件
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifBowtech.EventMonitor.prototype.broadcast=function(widgetObj, msg, data)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var lst = this.listeners;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if(lst != null)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif for(var o in lst)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif lst(widgetObj, data);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//绑定所有的事件.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifBowtech.EventMonitor.prototype.subscribe=function(msg, callback)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var lst = this.listeners;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if (lst) http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif lst.push(callback);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif } else http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif this.listeners = ;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//取消事件绑定.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifBowtech.EventMonitor.prototype.unsubscribe=function(msg, callback)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var lst = this.listener;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if (lst != null)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif lst = lst.filter(function(ele, index, arr)http://www.cnblogs.com/Images/dot.gif{return ele!=callback;});
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif// Page scope event-monitor obj.
http://cms.cnblogs.com/Images/OutliningIndicators/None.gifvar event_monitor = new Bowtech.EventMonitor();
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//对于所有 class="j a_xxx yyy" id="xxx-123"的元素执行事件绑定, xxx-123部分用来获取元素的ID，比如一个帖子的ID,
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif// a_xxx 后面的部
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//分用来标识应用如 vote / review / blog 等.
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//绑定的事件就是 : Bowtech.init_vote / Bowtech.init_blog 等.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.giffunction load_event_monitor(root) http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var re = /a_(\w+)/; //正则表达式获取ID.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif var fns = http://www.cnblogs.com/Images/dot.gif{};
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif $(".j", root).each(function(i) http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var m = re.exec(this.className);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if (m) http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var f = fns];
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if (!f) http://www.cnblogs.com/Images/dot.gif{ //如果事件处理函数不存在则创建函数对象.
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif f = eval("Bowtech.init_"+m);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif fns] = f;//调用绑定函数.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif f && f(this);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif });
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//在文档加载完毕后将执行的方法(参见jquery文档)
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//比如 通过Ajax方法取回来的内容里面还含有动作按钮的，这时需要针对这部分功能执行绑定.
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//需要手动调用 load_event_monitor(element); 方法.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif$(function() http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif load_event_monitor(document);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif});
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//注意这里的o对象是一个html 元素而非是一个jquery对象，所以在调用它的方法时应该使用$(o)函数
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif//把它转化为jquery对象.
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifBowtech.init_forder = function(o) http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var eid = $(o).attr("id").split("-");
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var fo = $("#f-"+eid);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var unfo = $("#unf-"+eid);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif fo.click(function() http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif $(o).hide();
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif unfo.show();
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif fo.hide();
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }); <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif unfo.click(function() http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif $(o).show();
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif fo.show();
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif unfo.hide();
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif });
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif}
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifjQuery.fn.extend(http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif set_caret: function()http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif if(!$.browser.msie) return;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif var initSetCaret = function()http://www.cnblogs.com/Images/dot.gif{this.caretPos = document.selection.createRange().duplicate()};
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif },
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif insert_caret:function(textFeildValue)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var textObj = this;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif if(document.all && textObj.createTextRange && textObj.caretPos)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var caretPos=textObj.caretPos;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif } else if(textObj.setSelectionRange)http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var rangeStart=textObj.selectionStart;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var rangeEnd=textObj.selectionEnd;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var tempStr1=textObj.value.substring(0,rangeStart);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var tempStr2=textObj.value.substring(rangeEnd);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif textObj.value=tempStr1+textFeildValue+tempStr2;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif textObj.focus();
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif var len=textFeildValue.length;
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif textObj.setSelectionRange(rangeStart+len,rangeStart+len);
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif textObj.blur();
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://cms.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif } else http://www.cnblogs.com/Images/dot.gif{
http://cms.cnblogs.com/Images/OutliningIndicators/InBlock.gif textObj.value+=textFeildValue;
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://cms.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif})
前台要用就比较简单了, 只需要这样写:
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif<div id="test2" class="mod">
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <h3>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif 这里可以放标题
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif h3>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <div class="j modb a_forder" id="modb-1002">
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif 这里是一些主要的内容
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <dl>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <dt>Hello worlddt>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <dd>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif hahahadd>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif dl>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif 这个实验在沙加的神舟本上完成
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif div>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <div class="edit">
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif <a id="f-1002" class="forder" href="javascript:void(0);">[收起]a> <a id="unf-1002"
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif class="unforder" href="javascript:void(0);">[展开]a>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif div>
http://cms.cnblogs.com/Images/OutliningIndicators/None.gif div>
样式就省略了, 大家可以自己写, 最后发两个效果图:
http://images.cnblogs.com/cnblogs_com/darkangle/122191/r_open.GIF
收起时的样子 <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
http://images.cnblogs.com/cnblogs_com/darkangle/122191/r_close.GIF
页:
[1]