Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

支持冒泡的事件模型(WeakMap 实现)

  在以前的文章中我曾实现过基本事件模型,而且兼容到了低版本 IE。最近看了 Angular 中是 $scope,瞬间觉得以前的事件模型弱爆了。冒泡不是 DOM 的专利,在原型链上也能实现冒泡。在原型链上的冒泡可以解决好多问题,我以前都用事件命名空间去做,真是太愚蠢了。
  开了个 Github 仓库 来放这东西,后续会再 Github 上更新。下面这个例子在 Github 上的 README.md 中也可以看到,我就随手丢一份到这边了。 <script src="EventModel.2.0.js"></script>
<script>
// Define a constructor A
var A=function(){};

// Create an instance from A
var a=new A;

// Bind 'test' event for 'a'
EventModel.on(a,"test",function(e){
  console.log("a",e);
});

// Bind 'test' event for 'A.prototype'
EventModel.on(A.prototype,"test",function(e){
  console.log("A.prototype",e);
  e.stopImmediatePropagation();
});

// Bind 'test' event for 'A.prototype'
EventModel.on(A.prototype,"test",function(e){
  console.log("A.prototype",e);
  e.stopPropagation();
});

// Bind 'test' event for 'Object.prototype'
EventModel.on(Object.prototype,"test",function(e){
  console.log("Object.prototype",e);
});

// Trigger the 'test' event on 'a',
// the event will bubbling along its prototype chain
EventModel.trigger(a,"test");
</script>
  不过这个版本暂不支持命名空间,可能会后续加入。另外 Angular 除了实现冒泡外还实现了广播,这对于原生 JavaScript 而言不太容易实现,因为原型链只能从叶遍历到根,反之则不行。
  另外要注意的是这个版本直接使用了 WeakMap 这么先进的东西,浏览器兼容性拙计。暂时也不想为低版本浏览器实现这个高端的冒泡功能(其实一般也没这种需求),如果只是需要事件模型可以考虑使用旧版本。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^