美文网首页
【js】--- 监听者模式

【js】--- 监听者模式

作者: 愫幕 | 来源:发表于2019-05-03 10:28 被阅读0次

在函数里传回调函数,可以实现在特定的条件下执行想要的功能,但是缺点是什么呢?如果你要在特定条件下执行很多的功能,咋办呢?再次调用函数,然后回调?太啰嗦;

这里说的监听者模式呢,其实也是一种思想,用大白话比喻呢就是:比如说有一个人比赛得了冠军(也可以是亚军,233),然后嘞,有三个人分别想做三件事,但是,这三件事只有当前面那个人拿了冠军,这三件事才会被做;那么,怎么办呢?

用监听者模式的思想来解决这件事:先定义两个方法,一个方法用来将三个人想做的事push进一个定义好的数组里面;另一个方法,遍历数组,执行数组里的方法;

(其实我是自己明白的,就怕表达不清楚~)

写一个简单的应用,代码如下:

//定义一个person对象
        let person = {
            listens : [],

            //将需要特定时机触发的函数push进listens数组里
            //调用下边的executeListener函数就可以触发
            addListener : function(fn){
                this.listens.push(fn);
            },

            //在特定条件下调用函数,执行listens里面的函数
            executeListener : function() {
                this.listens.forEach(function(ele){
                    ele();
                });
            }
        };

        //分别将要做的事情push进数组里面,等拿了冠军,一起调用
        person.addListener(function(){
            console.log('恭喜你,拿了冠军');
        });
        person.addListener(function(){
            console.log('拿了冠军,送给你一束鲜花');
        });
        person.addListener(function(){
            console.log('得了冠军,回家请你饱餐一顿');
        });

        
        //拿了冠军了,好,执行那三件事吧~
        if('拿了冠军'){
            person.executeListener();
        }

相关文章

  • 【js】--- 监听者模式

    在函数里传回调函数,可以实现在特定的条件下执行想要的功能,但是缺点是什么呢?如果你要在特定条件下执行很多的功能,咋...

  • 设计模式-观察者模式

    设计模式-观察者模式 springboot实现 观察者1 观察者2 定义事件 测试方法,发布事假,监听者1.2均监...

  • js异步编程(updating)

    js 异步编程方式: Promise,generator/yield,async/await 回掉函数 js事件监...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 监听者模式

    监听者模式 回调函数: 往组件注册自定义的方法,以便组件在特定场景下调用—这个方法是组件定义的,业务方实现@Slf...

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • JavaScript 监听回车事件(转)

    http://www.cnblogs.com/sxhlf/p/6734628.html JS监听某个输入框 JS监...

  • JS异常监 20170507

    http://www.infoq.com/cn/presentations/javascript-exceptio...

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

网友评论

      本文标题:【js】--- 监听者模式

      本文链接:https://www.haomeiwen.com/subject/gxyanqtx.html