当前位置:澳门贵宾厅 > 澳门贵宾厅 > 一种典型的发布订阅者模式,3 沙箱模式
一种典型的发布订阅者模式,3 沙箱模式
2020-02-08
let sandboxModel=(function(){ function sayName(){}; function sayAge(){}; return{ sayName:sayName, sayAge:sayAge }})()
3. 全局的发布订阅模式

问题:

所以【对于全局模式下的订阅者】:

只能被实例化(构造函数给实例添加属性与方法)一次

又叫做观察者模式,定义对象之中一种一对多的依赖关系,当一个对象的状态发生改变时候,所有依赖于它的对象都将得到通知。

2单例模式

4. 模块之间通信

简单的工厂模式可以理解为解决多个相似的问题;

5. 全局事件的命名冲突

//全局作用域下的发布订阅模式
(function(){
var Event = (function{
    var global = this,
        Modal,
        _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(const 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] === 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,cache,fn);
                    },
                    remove:function(key,fn){
                        _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 : ,
            one: ,
            remove: ,
            listen:,
            trigger:,
            var event = this.create();
            event.trigger.apply(this,arguments);
        }
    }();
    return Event;
}());

代码实现逻辑是用数组存贮订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组

1. Dom事件

一种典型的发布订阅者模式,一个事件(‘click,mousedown等’)对一个dom节点进行监听,操作dom节点,相应的触发事件,响应函数执行。事件函数对dom节点完全未知,不用去理会事件函数内容,发布就好。

4 发布者订阅模式

二、遇到的问题:

....未完待续

时间: 2018-04-16阅读: 800标签: 模式1 工厂模式

2. 自定义事件

就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,

一、应用

  1. 广泛应用于异步编程之中,是一种替代回调函数的方案。订阅一个事件,发生操作A(对操作A监听)之后,事件发生.
  2. 取代对象之间硬编码的通知机制,一个对象不用再显示的调用另外一个对象的某个接口,让两个对象松耦合的联系在一起,虽然不清楚彼此的细节,但是不影响他们之间相互通信。

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

3 沙箱模式

function CreatePerson(name,age,sex) { var obj = new Object(); obj.name = name; obj.age = age; obj.sex = sex; obj.sayName = function(){ return this.name; } return obj;}var p1 = new CreatePerson("longen",'28','男');var p2 = new CreatePerson("tugenhua",'27','女');console.log(p1.name); // longenconsole.log(p1.age); // 28console.log(p1.sex); // 男console.log(p1.sayName()); // longenconsole.log(p2.name); // tugenhuaconsole.log(p2.age); // 27console.log(p2.sex); // 女console.log(p2.sayName()); // tugenhua 
//发布者与订阅模式 var shoeObj = {}; // 定义发布者 shoeObj.list = []; // 缓存列表 存放订阅者回调函数 // 增加订阅者 shoeObj.listen = function(fn) { shoeObj.list.push(fn); // 订阅消息添加到缓存列表 } // 发布消息 shoeObj.trigger = function() { for (var i = 0, fn; fn = this.list[i++];) { fn.apply(this, arguments);//第一个参数只是改变fn的this, } } // 小红订阅如下消息 shoeObj.listen(function(color, size) { console.log("颜色是:" + color); console.log("尺码是:" + size); }); // 小花订阅如下消息 shoeObj.listen(function(color, size) { console.log("再次打印颜色是:" + color); console.log("再次打印尺码是:" + size); }); shoeObj.trigger("红色", 40); shoeObj.trigger("黑色", 42); 
// 单体模式var Singleton = function(name){ this.name = name;};Singleton.prototype.getName = function(){ return this.name;}// 获取实例对象var getInstance = (function() { var instance; return function(name) { if(!instance) {//相当于一个一次性阀门,只能实例化一次 instance = new Singleton(name); } return instance; }})();// 测试单体模式的实例,所以a===bvar a = getInstance("aa");var b = getInstance("bb"); 
上一篇:没有了
下一篇:没有了