修改prototype使Event支持observe任何对象

本文介绍了如何通过修改Prototype中的Event对象来实现自定义事件监听器,支持任意对象的事件监听,并提供了一种不修改Prototype的替代方案。
上次对 js自定义事件做了一些介绍,这次修改prototype使得Event对象支持observe任何对象,代码如下:
ExpandedBlockStart.gif ContractedBlock.gif var  Event  =   dot.gif {
InBlock.gif    observers: 
false,
ExpandedSubBlockStart.gifContractedSubBlock.gif    observe: 
function(element, name, observer, useCapture) dot.gif{
InBlock.gif        
if(typeof element == 'string')
InBlock.gif            element 
= document.getElementById(element);
InBlock.gif        useCapture 
= useCapture || false;
InBlock.gif        
InBlock.gif        
if (name == 'keypress' &&
InBlock.gif            (navigator.appVersion.match(
/Konqueror|Safari|KHTML/)
InBlock.gif            
|| element.attachEvent))
InBlock.gif          name 
= 'keydown';
InBlock.gif        
InBlock.gif        
this._observeAndCache(element, name, observer, useCapture);
ExpandedSubBlockEnd.gif    }
,
ExpandedSubBlockStart.gifContractedSubBlock.gif    _observeAndCache: 
function(element, name, observer, useCapture) dot.gif{
InBlock.gif        alert(
this)
InBlock.gif        
InBlock.gif        
if (!this.observers) this.observers = [];
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(element.tagName)dot.gif{
InBlock.gif            
this.observers.push([element, name, observer, useCapture]);
ExpandedSubBlockStart.gifContractedSubBlock.gif            
if (element.addEventListener) dot.gif{      
InBlock.gif              element.addEventListener(name, observer, useCapture);
ExpandedSubBlockStart.gifContractedSubBlock.gif            }
 else if (element.attachEvent) dot.gif{
InBlock.gif              element.attachEvent('on' 
+ name, observer);
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockStart.gifContractedSubBlock.gif        }
else if(typeof element[name] == 'function')dot.gif{
InBlock.gif            
var s = element[name].toString();
ExpandedSubBlockEnd.gif            s 
= s.substring(0, s.lastIndexOf('}
')) + 'Event.occor(this,\'' + name + '\')'
ExpandedSubBlockStart.gifContractedSubBlock.gif            s 
= s.replace('function()dot.gif{', '')
InBlock.gif            s 
= s.replace(/return/img,'Event.occor(this, \'' + name + '\');return')
InBlock.gif            element[name] 
= new Function(s)
InBlock.gif            
this.observers.push([element, name, observer, useCapture]);
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }
,
ExpandedSubBlockStart.gifContractedSubBlock.gif    occor:
function(obj, method)dot.gif{
InBlock.gif        
var arr = [];
ExpandedSubBlockStart.gifContractedSubBlock.gif        
for(var i=0; i<Event.observers.length; i++)dot.gif{
InBlock.gif            
if(Event.observers[i][0]==obj && Event.observers[i][1]==method) arr.push(Event.observers[i][2]);
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockStart.gifContractedSubBlock.gif        
for(var i=0; i<arr.length; i++)dot.gif{
InBlock.gif            arr[i]();
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
function  F() dot.gif {
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.method = function()dot.gif{
InBlock.gif        alert('f.method is called')
ExpandedSubBlockStart.gifContractedSubBlock.gif        
for(i=0; i<10; i++)dot.gif{
ExpandedSubBlockEnd.gif        }

InBlock.gif        
return;
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}

None.gif
None.gif
var  f  =   new  F()
ExpandedBlockStart.gifContractedBlock.gifEvent.observe(f, 'method', 
function () dot.gif {alert(1)} false )
None.giff.method()
None.gif
当然如果你不想修改prototype,也可以参考下面的代码:
ExpandedBlockStart.gif ContractedBlock.gif var  Observer  =   dot.gif {
InBlock.gif    __list:[],
ExpandedSubBlockStart.gifContractedSubBlock.gif    observe:
function(obj, pro, fun, b)dot.gif{
InBlock.gif        
if(typeof obj[pro] != 'function')
InBlock.gif            
return;
ExpandedSubBlockStart.gifContractedSubBlock.gif        
this.__list.push(dot.gif{o:obj, p:pro, f:fun})
InBlock.gif        
var s = obj[pro].toString();
ExpandedSubBlockEnd.gif        s 
= s.substring(0, s.lastIndexOf('}
')) + 'Observer.__occor(this,\'' + pro + '\')'
ExpandedSubBlockStart.gifContractedSubBlock.gif        s 
= s.replace('function()dot.gif{', '')
InBlock.gif        
if(b)
InBlock.gif            s 
= s.replace(/return/img,'Observer.__occor(this, \'' + pro + '\');return')
InBlock.gif        document.write(s)
InBlock.gif        obj[pro] 
= new Function(s)
ExpandedSubBlockEnd.gif    }
,
ExpandedSubBlockStart.gifContractedSubBlock.gif    __occor:
function(obj, method)dot.gif{
InBlock.gif        
var arr = []
ExpandedSubBlockStart.gifContractedSubBlock.gif        
for(var i=0; i<this.__list.length; i++)dot.gif{
InBlock.gif            
if(Observe.__list[i].o==obj && Observer.__list[i].p==method) arr.push(Observer.__list[i]);
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockStart.gifContractedSubBlock.gif        
for(var i=0; i<arr.length; i++)dot.gif{
InBlock.gif            arr[i].f();
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}
(1)普通用户端(全平台) 音乐播放核心体验: 个性化首页:基于 “听歌历史 + 收藏偏好” 展示 “推荐歌单(每日 30 首)、新歌速递、相似曲风推荐”,支持按 “场景(通勤 / 学习 / 运动)” 切换推荐维度。 播放页功能:支持 “无损音质切换、倍速播放(0.5x-2.0x)、定时关闭、歌词逐句滚动”,提供 “沉浸式全屏模式”(隐藏冗余控件,突出歌词与专辑封面)。 多端同步:自动同步 “播放进度、收藏列表、歌单” 至所有登录设备(如手机暂停后,电脑端打开可继续播放)。 音乐发现与管理: 智能搜索:支持 “歌曲名 / 歌手 / 歌词片段” 搜索,提供 “模糊匹配(如输入‘晴天’联想‘周杰伦 - 晴天’)、热门搜索词推荐”,结果按 “热度 / 匹配度” 排序。 歌单管理:创建 “公开 / 私有 / 加密” 歌单,支持 “批量添加歌曲、拖拽排序、一键分享到社交平台”,系统自动生成 “歌单封面(基于歌曲风格配色)”。 音乐分类浏览:按 “曲风(流行 / 摇滚 / 古典)、语言(国语 / 英语 / 日语)、年代(80 后经典 / 2023 新歌)” 分层浏览,每个分类页展示 “TOP50 榜单”。 社交互动功能: 动态广场:查看 “关注的用户 / 音乐人发布的动态(如‘分享新歌感受’)、好友正在听的歌曲”,支持 “点赞 / 评论 / 转发”,可直接点击动态中的歌曲播放。 听歌排行:个人页展示 “本周听歌 TOP10、累计听歌时长”,平台定期生成 “全球 / 好友榜”(如 “好友中你本周听歌时长排名第 3”)。 音乐圈:加入 “特定曲风圈子(如‘古典音乐爱好者’)”,参与 “话题讨论(如‘你心中最经典的钢琴曲’)、线上歌单共创”。 (2)音乐人端(创作者中心) 作品管理: 音乐上传:支持 “无损音频(FLAC/WAV)+ 歌词文件(LRC)+ 专辑封面” 上传,填写 “歌曲信息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值