观察者模式

csxiaoyaojianxian · csxiaoyaojianxian · commit eba234e5dd7d · 2019-09-01T23:31:47.000+08:00
diff --git a/06-设计模式/8.1 发布订阅模式-封装.html b/06-设计模式/8.1 发布订阅模式-封装.html
@@ -0,0 +1,59 @@
+观察者模式，封装发布订阅模式 - 全局对象方案
+<script type="text/javascript">
+var Event = (function(){
+	var clientList = {},
+	listen,
+	trigger,
+	remove;
+	listen = function( key, fn ){
+		if ( !clientList[ key ] ){
+			clientList[ key ] = [];
+		}
+		clientList[ key ].push( fn );
+	};
+	trigger = function(){
+		var key = Array.prototype.shift.call( arguments ),
+		fns = clientList[ key ];
+		if ( !fns || fns.length === 0 ){
+			return false;
+		}
+		for( var i = 0, fn; fn = fns[ i++ ]; ){
+			fn.apply( this, arguments );
+		}
+	};
+	remove = function( key, fn ){
+		var fns = clientList[ key ];
+		if ( !fns ){
+			return false;
+		}
+		if ( !fn ){
+			fns && ( fns.length = 0 );
+		}else{
+			for ( var l = fns.length - 1; l >=0; l-- ){
+				var _fn = fns[ l ];
+				if ( _fn === fn ){
+					fns.splice( l, 1 );
+				}
+			}
+		}
+	};
+	return {
+		listen: listen,
+		trigger: trigger,
+		remove: remove
+	}
+})();
+
+Event.listen( 'squareMeter88', function( price ){
+	console.log( '1. 价格 = ' + price ); // 输出：'1. 价格=2000000'
+});
+Event.listen( 'squareMeter88', function( price ){
+	console.log( '2. 价格 = ' + price ); // 输出：'2. 价格=2000000'
+});
+Event.listen( 'squareMeter110', function( price ){
+	console.log( '价格 = ' + price );
+});
+
+Event.trigger( 'squareMeter88', 2000000 ); // 售楼处发布消息
+
+</script>
diff --git a/06-设计模式/8.2 发布订阅模式-封装优化.html b/06-设计模式/8.2 发布订阅模式-封装优化.html
@@ -0,0 +1,126 @@
+全局的发布—订阅对象里只有一个 clinetList 来存放消息名和回调函数
+难免会出现事件名冲突的情况，所以还可以给 Event 对象提供创建命名空间的功能
+<script>
+var Event = (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 ] === 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' ){
+                    }else{
+                        each( offlineStack, function(){
+                            this();
+                        });
+                    }
+                    offlineStack = null;
+                },
+                one: function( key, fn, last ){
+                    _remove( key, cache );
+                    this.listen( key, fn ,last );
+                },
+                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: _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;
+})();
+</script>
diff --git a/06-设计模式/temp/8/8.html b/06-设计模式/temp/8/8.html
