V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
50vip
V2EX  ›  分享创造

一个 0.8 简洁的事件订阅和发布 Javascript 库

  •  
  •   50vip · 2016-07-18 09:32:12 +08:00 · 2611 次点击
    这是一个创建于 3051 天前的主题,其中的信息可能已经有所发展或是发生改变。

    onfire.js 是一个很简洁的事件分发,事件订阅和发布的 Javascript 库(仅仅 0.8kb),简洁实用。

    Github 地址: https://github.com/hustcc/onfire.js

    可以用于:

    • 简单的事件分发;
    • 在 react / vue.js / angular 用于跨组件的轻量级实现;
    • 事件订阅和发布;

    在线示例,点击这里; English Version Readme. Click Here

    Build Status npm npm npm

    API 方法

    1. on(event_name, callback)

    绑定事件,参数为 event_namecallback, 当有名字为event_name的事件发生的时候,callback方法将会被执行。

    这个方法会返回一个eventObj,这个可以用于使用un(eventObj)方法来取消事件绑定。

    2. one(event_name, callback)

    绑定(订阅)事件,参数为 event_name with callback. 当被触发一次之后失效。**只能被触发一次,一次之后自动失效**。

    3. fire(event_name, data)

    触发名字为 event_name 的事件,并且赋予系列变量datascallback方法的输入值。

    4. un(eventObj / event_name)

    取消事件绑定。可以仅仅取消绑定一个事件回调方法,也可以直接取消全部的事件。

    5. size()

    获得当前的所有事件数量。

    6. events()

    返回所有的事件名称数组。

    7. clear()

    清空所有事件。

    使用的 DEMO

    1. 引入 js 文件

    npm install onfire.js

    可以使用 <script> 标签直接引入; 也可以使用 require 或者 import 关键字引入,会得到全局变量 onfire 。

    import onfire from 'onfire.js';
    
    // or
    
    var onfire = require("onfire.js");
    

    2. 简单使用

    使用方法 on 来订阅事件, 使用 un 来取消订阅, 使用 fire 方法来触发事件。

    import onfire from 'onfire.js';
    
    // 绑定事件
    var eventObj = onfire.on('test_event', function(data1 , data2) {
    	console.log('this is a event 1');
    });
    var eventObj2 = onfire.on('test_event', function(data1, data2) {
    	console.log('this is a event 2');
    });
    
    // 触发事件
    onfire.fire('test_event', 'test_data1', 'test_data2');
    
    // 取消绑定
    onfire.un(eventObj); // 取消绑定这个事件.
    onfire.un('test_event'); // 取消绑定所有的 `test_event`.
    
    // 长度
    onfire.size();
    

    LICENSE

    MIT

    ooTwToo
        1
    ooTwToo  
       2016-07-18 12:26:36 +08:00
    哇 Github 头像很漂亮啊
    xqin
        2
    xqin  
       2016-07-18 12:48:35 +08:00
    1. 触发事件的时候, 没有加`try/catch`, 将会导致的问题是, 如果出错, 后续的其他需要执行的事件不会被执行.

    2. `for/in` `__onfireEvents` 的时候没有使用 `hasOwnProperty` 来过滤从原型上继承过来的东西(做为一个模块,你必须假设其他人在使用你这个模块的时候有可能会对 原型做扩展), 产生的问题,我想你应该懂的.
    50vip
        3
    50vip  
    OP
       2016-07-18 12:57:22 +08:00
    @xqin 感谢感谢, 很有道理。
    for in __onfireEvents ,加 hasOwnProperty 好像不太必要吧~~~只是 onfire 中的一个变量~
    xqin
        4
    xqin  
       2016-07-18 13:15:28 +08:00   ❤️ 1
    测试代码, 你自己试.

    ```
    Object.prototype.test = 123;//给原型上添加一个属性, 值是 123


    var of = require("onfire.js"); //引入 onfire

    of.on('test', function(){//添加事件
    console.log('test ...');
    });

    of.fire('test');//触发事件
    ```
    otakustay
        5
    otakustay  
       2016-07-18 13:19:43 +08:00   ❤️ 1
    1. 绑定和移除事件缺少对 this 的自定义会让不少使用方很难受
    2. 暴露了太多没啥意义的东西,比如 size()和 events()不应该暴露出来,这和事件的机制相悖
    3. un 只接受 eventObject 而不接受 eventName + handler 的话,使用方就不得不找地方存下来这个 eventObject ,加重了他们的负担
    4. 从实现上来看,感觉如果有一个 event handler 调用了同事件名的 un (即事件 fire 过程中对这个事件有 on/un ),逻辑会出问题, test case 也没覆盖这些
    5. 没用 hasOwnProperty 确实可能是个问题,比如和 sugar.js 配合用可能就完蛋了,另一种方法是把__onfireEvents 初始化为 Object.create(null)
    6. 全局单例会让使用场景很受限
    50vip
        6
    50vip  
    OP
       2016-07-18 14:44:46 +08:00
    @otakustay 非常感谢反馈~
    yolio2003
        7
    yolio2003  
       2016-07-18 14:52:54 +08:00
    跟着 otakustay 学习了
    50vip
        8
    50vip  
    OP
       2016-07-18 15:16:13 +08:00
    @yolio2003 同学习~
    50vip
        9
    50vip  
    OP
       2016-07-18 19:57:14 +08:00
    @otakustay 新 commit 了一下,修改了一些问题。 https://github.com/hustcc/onfire.js/issues/2
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2968 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:48 · PVG 20:48 · LAX 04:48 · JFK 07:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.