<!doctype html>
<html lang="en">
<head>
<title>JavaScript Patterns</title>
<meta charset="utf-8">
</head>
<body>
<script>
var toString = {}.toString,
isFunction = function( it ) {
return toString.call( it ) == "[object Function]";
},
isString = function( it ) {
return toString.call( it ) == "[object String]";
};
var hub = (function() {
var identifier = 1,
channels = {},
counter = {};
return {
subscribe: function( name, listener ) {
if ( !isString(name) || !isFunction(listener) ) {
return;
}
var done = channels[name];
if ( !done ) {
done = channels[name] = {};
counter[name] = 0;
}
done[identifier] = listener;
counter[name] += 1;
return [ name, identifier++ ];
},
publish: function( name ) {
var done, args, index;
if ( !name || !isString(name) ) {
return;
}
done = channels[name];
args = [].slice.call( arguments, 1 );
for ( index in done ) {
done[index].apply( this, args );
}
},
unsubscribe: function unsubscribe( handle ) {
var isa = isArray( handle ),
name = isa ? handle[0] : handle,
done;
if ( !name || !isString(name) ) {
return;
}
done = channels[name];
if ( isa ) {
counter[name] -= 1;
delete done[handle[1]];
}
if ( !isa || counter[name] === 0 ) {
delete channels[name];
delete counter[name];
}
}
};
})();
hub.subscribe('a', function(){
console.log(123);
});
hub.subscribe('a', function(){
console.log(456);
});
console.log(hub)
hub.publish('a')
</script>
</body>
</html>
https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/observer.html
http://icodon.com/observer-pattern-of-js.html
http://amplifyjs.com/api/pubsub/
http://rolfzhang.com/articles/927.html
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Patterns</title>
<meta charset="utf-8">
</head>
<body>
<script>
(function( global, undefined ) {
var slice = [].slice,
subscriptions = {};
var amplify = global.amplify = {
publish: function( topic ) {
var args = slice.call( arguments, 1 ),
topicSubscriptions,
subscription,
length,
i = 0,
ret;
if ( !subscriptions[ topic ] ) {
return true;
}
topicSubscriptions = subscriptions[ topic ].slice();
for ( length = topicSubscriptions.length; i < length; i++ ) {
subscription = topicSubscriptions[ i ];
ret = subscription.callback.apply( subscription.context, args );
if ( ret === false ) {
break;
}
}
return ret !== false;
},
subscribe: function( topic, context, callback, priority ) {
if ( arguments.length === 3 && typeof callback === "number" ) {
priority = callback;
callback = context;
context = null;
}
if ( arguments.length === 2 ) {
callback = context;
context = null;
}
priority = priority || 10;
var topicIndex = 0,
topics = topic.split( /\s/ ),
topicLength = topics.length,
added;
for ( ; topicIndex < topicLength; topicIndex++ ) {
topic = topics[ topicIndex ];
added = false;
if ( !subscriptions[ topic ] ) {
subscriptions[ topic ] = [];
}
var i = subscriptions[ topic ].length - 1,
subscriptionInfo = {
callback: callback,
context: context,
priority: priority
};
for ( ; i >= 0; i-- ) {
if ( subscriptions[ topic ][ i ].priority <= priority ) {
subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo );
added = true;
break;
}
}
if ( !added ) {
subscriptions[ topic ].unshift( subscriptionInfo );
}
}
return callback;
},
unsubscribe: function( topic, callback ) {
if ( !subscriptions[ topic ] ) {
return;
}
var length = subscriptions[ topic ].length,
i = 0;
for ( ; i < length; i++ ) {
if ( subscriptions[ topic ][ i ].callback === callback ) {
subscriptions[ topic ].splice( i, 1 );
break;
}
}
}
};
}(this));
amplify.subscribe('a', function(){
console.log(123);
});
amplify.subscribe('a', function(){
console.log(456);
});
console.log(amplify)
amplify.publish('a')
</script>
</body>
</html>
相关推荐
总结来说，JavaScript观察者模式是一种强大的工具，它可以简化代码结构，提高代码可维护性，尤其在需要处理复杂的交互和实时数据同步时。通过理解并应用这个模式，开发者可以更有效地构建可扩展和灵活的应用程序。
一个比较有意思的js库可以为javascript的对象实现观察者模式，以往我们使用javascript实现的观察者模式都是通过使用回调函数配合dom上的event事件来操作的，而“Watch.js”可以为javascript的对象实现观察者模式，...
### JavaScript观察者模式详解 #### 一、观察者模式概念 观察者模式（Observer Pattern）是一种行为设计模式，用于定义对象间的一种一对多依赖关系，以便当一个对象的状态发生改变时，所有依赖于它的对象都会得到...
以下是一个简单的JavaScript观察者模式实现： ```javascript class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver...
JavaScript观察者模式是一种基于事件驱动的设计模式，它允许对象在状态改变时自动通知其他相关对象。这个模式在软件开发中非常常见，特别是在JavaScript这样的动态语言中，因为JavaScript的事件模型就是观察者模式的...
### JavaScript观察者模式实现自动刷新效果 #### 一、引言 在JavaScript开发中，观察者模式（Observer Pattern）是一种常见的设计模式，用于处理对象之间的依赖关系。它定义了一种一对多的依赖关系，以便当一个...
在JavaScript这种事件驱动的语言中，观察者模式有着天然的应用场景，比如DOM事件的处理、Ajax请求的响应等。 观察者模式主要包含以下几种角色： 1. Subject（被观察者）：它持有注册的观察者的列表，并负责在状态...
此外，现代前端框架如React和Vue.js也利用类似的观察者模式实现组件间的通信和状态管理。 总之，掌握观察者模式可以帮助我们构建更加灵活、可扩展的系统，提高代码的复用性和可维护性。通过最佳实践的学习，可以...
在实际开发中，很多框架和库也内置了观察者模式，如JavaScript中的EventEmitter（Node.js）、C#的事件和委托，以及Android中的BroadcastReceiver等。这些工具使得开发者可以更便捷地应用观察者模式，提高代码的可...
除了标准实现，还有很多其他语言和框架提供了观察者模式的支持，例如在C#中，可以使用System.ComponentModel.INotifyPropertyChanged接口来实现，而在JavaScript中，可以通过事件监听器或者发布/订阅模式来实现类似...
在JavaScript中，观察者模式可以通过多种方式实现，包括自定义事件、发布/订阅模式等。本文将详细介绍如何在JavaScript中实现观察者模式，并探讨其在现代Web开发中的应用。 观察者模式是JavaScript中实现事件驱动...
【JavaScript源代码】详解从vue的组件传值着手观察者模式 在JavaScript中，Vue框架是一种广泛应用的前端开发工具，其核心设计思想包含了观察者模式的元素。观察者模式是一种软件设计模式，它定义了对象间的一种一对...
### JavaScript设计模式详解：单例模式与观察者模式 #### 一、单例模式 **定义**：单例模式是一种常用的软件设计模式，其目的是确保某个类只有一个实例，并且能够提供一个全局访问点来访问该实例。在JavaScript中...
本文实例为大家分享了js观察者模式的弹幕案例代码，供大家参考，具体内容如下 观察者模式的弹幕案例 上代码 弹幕.html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <...
本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考，具体如下： 观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这...
在JavaScript中，观察者模式也被称为发布者-订阅者模式，其中包含两个主要角色：发布者（Publisher）和订阅者（Subscriber）。 1. 发布者（Publisher）： 发布者是状态发生变化的对象，当它的状态改变时，会通知...
在JavaScript中，`EventEmitter`是Node.js中的一个核心模块，它是实现观察者模式的一个典型例子。开发者可以通过`.on()`方法订阅事件，通过`.emit()`方法触发事件并通知所有订阅者。此外，`CustomEventTarget`接口在...
本篇文章将深入探讨JavaScript的OOP思想，并通过实际代码示例介绍单例模式、工厂模式和观察者模式。 首先，面向对象编程的核心概念是类和对象。在JavaScript中，虽然没有传统的类定义，但可以通过构造函数来模拟类...
在JavaScript中，我们可以看到一个简单的观察者模式实现。在给出的例子中，`select`元素作为被观察者，当用户选择不同的选项时，`select`元素会触发`onchange`事件。这个事件会通知所有已注册的观察者（`content`、`...