js 自定义事件观察者模式(发布/订阅)

/*
 * 示例:
 * Event.create("namespace1").listen(‘click‘, function(a){
 *      console.log(a);
 * });
 * Event.create("namespace1").trigger("click", 1);
 */
window.myEvent = (function() {
   var global = this,
       Event,
       _default = ‘default‘;

    Event = function() {
        var _listen,
            _trigger,
            _remove,
            _slice = Array.prototype.slice,
            _shift = Array.prototype.shift,
            _unshift = Array.prototype.unshift,
            namespaceCache = [],
            _create,
            find,
            each = function( ary, fn) {
                var ret;
                for(var i = 0, l = ary.length; i < l; i++) {
                    var n = ary[i];
                    ret = fn.call(n, i, n);
                }
                return ret;
            };
        // 订阅
        _listen = function(key, fn, cache) {
            if(!cache[key]) {
                cache[key] = [];
            }
            cache[key].push(fn);
        };
        // 移除订阅
        _remove = function(key, cache, fn) {
            if(cache[key]) {
                if(fn) {
                    for(var i = cache[key].length; i >=0; i++) {
                        if(cache[key][i] === fn) {
                            cache[key].splice(i, 1);
                        }
                    }
                }else {
                    cache[key] = [];
                }
            }
        };
        // 发布
        _trigger = function() {
          var cache = _shift.call(arguments),
              key = _shift.call(arguments),
              args = arguments,
              _self = this,
              ret,
              stack = cache[key];
            if(!stack || !stack.length) {
                return;
            }
            return each(stack, function() {
               return this.apply(_self, args);
            });
        };
        // 创建命名空间
        _create = function(namespace) {
            var namespace = namespace || _default;
            var cache = {},
                offlineStack = [],  // 离线事件
                ret = {
                    listen: function (key, fn, last) {
                        _listen(key, fn, cache);
                        if (offlineStack == null) {
                            return;
                        }
                        if (last === ‘last‘) {
                            offlineStack.length && offlineStack.pop()();
                        } else {
                            each(offlineStack, function () {
                                this();
                            });
                        }
                        offlineStack = null;
                    },

                    one: function (key, fn, last) {
                        _remove(key, cache);
                        this.listen(key, fn, last);
                    },

                    remove: function(key, fn, last) {
                        _remove(key, cache, fn);
                    },

                    trigger: function() {
                        var fn,
                            args,
                            _self = this;
                        _unshift.call(arguments, cache);
                        args = arguments;
                        fn = function() {
                            return _trigger.apply(_self, args);
                        };
                        if(offlineStack) {
                            return offlineStack.push(fn);
                        }
                        return fn();
                    }
                };

                return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
            };

        return {
            create: _create,
            one: function(key, fn, last) {
                var event = this.create();
                event.one(key, fn, last);
            },
            remove: function(key, fn) {
                var event = this.create();
                event.remove(key, fn);
            },
            listen: function(key, fn, last) {
                var event = this.create();
                event.listen(key, fn, last);
            },
            trigger: function() {
                var event = this.create();
                event.trigger.apply(this, arguments);
            }
        };
    }();
    return Event;
})();

原文地址:https://www.cnblogs.com/tianzhongshan/p/9146134.html

时间: 2024-07-31 01:18:06

js 自定义事件观察者模式(发布/订阅)的相关文章

Jquery 自定义事件实现发布/订阅

1 //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 2 3 $('#logoff').click(function(){ 4 $.event.trigger("logoff");//广播一个事件 5 window.location = "logoff.php";//导航到新页面 6 });

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

C# 委托和事件 与 观察者模式(发布-订阅模式)讲解 by天命

使用面向对象的思想 用c#控制台代码模拟猫抓老鼠 我们先来分析一下猫抓老鼠的过程 1.猫叫了 2.所有老鼠听到叫声,知道是哪只猫来了 3.老鼠们逃跑,边逃边喊:"xx猫来了,快跑啊!我是老鼠xxx" 一  双向耦合的代码 首先需要一个猫类Cat 一个老鼠类Rat 和一个测试类Program 老鼠类的代码如下 //老鼠类 public class Rat { public string Name { get; set; } //老鼠的名字 public Cat MyCat { get;

js自定义事件的实现探索

我们一般所熟悉的事件,都是这样的:onclick,onmouseover,ontouchstart,onfocus... 但这里要讨论自定义事件的实现,包含:事件注册/监听.事件分发. 有两种方式去实现: 自己实现事件管理器:CustomEventManager 使用document.createEvent 先说第一种方式 CustomEventManager的实现 要实现一个完整的事件体系,必须包含2大功能:注册/监听.触发,用伪代码表示: function CustomEventManage

JavaScript设计模式之----原生JS实现简单的发布订阅模式

第一部分: 发布订阅模式简介 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式. 发布—订阅模式可以广泛应用于异步编程中,是一种替代传递回调函数的方案.比如,可以订阅ajax请求的error.success等事件.或者如果想在动画的每一帧完成之后做一些事情,可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件.在异步编程中使用发布—订阅模式,就无需过

js自定义事件模式

---恢复内容开始--- js事件用的最多的就是默认事件.不过有时候需要自定义事件来使用. 参照默认事件的模式,例如click事件,鼠标点击dom,先触发click事件,然后执行dom上的事件处理程序. <p>点我</p> document.getElementByTagName('p')[0].addEventLisener('click',()=>{ alert('click'); }) 同理,自定义事件也需要三个部分,即事件注册.事件触发.处理程序. 这里使用原型方法做

vue.js 自定义事件

<div id="app"> <h2>{{num}}</h2> <h1>全局组件</h1> <my-component @myclick="vueAdd"></my-component> <!-- 渲染全局组件--> </div> </body> </html> <script>/* */ Vue.component('my

转 js自定义事件——Event和CustomEvent

之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作为替代,我们可以通过创建Event对象和CustomEvent对象来创建自定义对象.先从Event()对象开始. Event()——Event对象的构造函数 咱们可以看着下面这个例子去了解如何使用Event()创建一个自定义对象: 1 <script type="text/javascript