• 技术文章 >web前端 >js教程

    有命名空间的事件监听器nsevent的详细介绍(代码示例)

    不言不言2019-01-10 10:04:27转载1185
    本篇文章给大家带来的内容是关于有命名空间的事件监听器nsevent的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    这个模块主要的原因是用在微信开发时候监听两个页面之间的状态交互

    比如 pageA 和 pageB 两个页面, pageA 页面有收藏项 pageB 也有同样的收藏项,监听同一个事件

    // 收藏事件改变
    nsevent.on('collectChange', () => {
        // 刷新列表数据
    })

    那么在 pageA 页面操作 collect(收藏) 事件会触发自身页面 collectChange 回调,这时候nsevent就派上用场,

    在 pageA 这样声明

    // 收藏事件改变
    nsevent.on('collectChange', () => {
        // 刷新列表数据
    }, 'pageA')

    在 pageB 触发 pageA 的事件,就不会触发自身页面的回调了

    // 触发collectChange事件
    NSEvent.emit('collectChange', params, { ns: ['pageA'] });

    还可以在 pageC 触发 pageA, pageB页面的 collectChange 事件

    // 触发collectChange事件
    NSEvent.emit('collectChange', params, { ns: ['pageA', 'pageB'] });

    nsevent document

    有命名空间的事件监听器 - event emitter with namespace

    安装和使用

    npm i nsevent --save
    const nsevent = require('nsevent');
    // 浏览器
    <script src="dist/nsevent.umd.js"></script>

    on(eventName, fn, namespace)

    参数必选说明
    eventName监听事件名
    fn回调函数
    namespace命名空间
    NSEvent.on('add', (a, b) => {
      console.log(a, b);
    });
    
    NSEvent.on('add', (a, b) => {
      console.log(a, b, 'ns');
    }, 'ns');
    
    // 1, 2
    // 1, 2, 'ns'
    NSEvent.emit('add', a, b);

    once(eventName, fn)

    参数必选说明
    eventName监听事件名
    fn回调函数
    NSEvent.once('add', (a, b) => {
      console.log(a, b);
    });
    
    NSEvent.emit('add', 1, 2);      // 1, 2
    NSEvent.emit('add', 1, 2);      // nothing

    emit(eventName, arg1, arg2, ..., object)

    参数必选说明
    eventName监听事件名
    arg[1,2,3...]传递给回调函数的值
    object{ 最后一个传递对象,ns: ['ns'] } 可以指定命名空间触发事件
    NSEvent.on('fire', () => {
      console.log('fire ns');
    }, 'ns');
    
    NSEvent.on('fire', () => {
      console.log('fire ns2');
    }, 'ns');
    
    NSEvent.on('fire', () => {
      console.log('fire');
    });
    
    NSEvent.emit('fire');     // fire ns, fire ns2, fire
    console.log("======");
    NSEvent.emit('fire', 1, 2, { ns: [] });     // nothing
    NSEvent.emit('fire', 1, 2, { ns: ['ns'] }); // fire ns, fire ns2

    off(eventName, [string|function|array])

    参数必选说明

    eventName监听事件名

    stringfunctionarray解绑回调函数

    string指定命名空间解绑


    function指定函数解绑


    array通过数组指定命名空间或者函数解绑

    const NSEvent = require('../dist/nsevent.cjs');
    NSEvent.on('fire', () => {
      console.log('fire ns');
    }, 'ns');
    NSEvent.on('fire', () => {
      console.log('fire ns');
    }, 'ns');
    NSEvent.on('fire', () => {
      console.log('fire1');
    }, 'ns1');
    NSEvent.emit('fire');   // fire ns, fire ns, fire1
    console.log('==========');
    NSEvent.off('fire', ['ns']);
    NSEvent.emit('fire');   // fire1
    console.log('==========');
    NSEvent.off('fire', 'ns1');
    NSEvent.emit('fire');   // none

    以上就是有命名空间的事件监听器nsevent的详细介绍(代码示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:小程序 html5 javascript
    上一篇:JavaScript中归并排序的介绍(代码示例) 下一篇:Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法
    线上培训班

    相关文章推荐

    • js事件监听器用法实例详解_javascript技巧• 封装了一个支持匿名函数的Javascript事件监听器_javascript技巧• javascript 传统事件模型构造的事件监听器实现代码_javascript技巧• jquery与google map api结合使用 控件,监听器_jquery• oracle配置多个监听器• 11gR2中的SCAN监听器和本地监听器配置• ArcSDE10.1配置Oracle 监听器来使用SQL操作ST• Jsp连接Mysql数据库:利用Servlet监听器

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网