无法运行观察者模式示例

Question

我试图重现《 学习JavaScript设计模式 》一书中给出的Observer Pattern示例，但在extend函数中遇到此错误：

我正在使用这行下面的书中的代码：

首先，让我们对主题可能具有的相关观察者列表进行建模：

我已经在小提琴中设置了代码，我想了解为什么会出现错误。

Answer 1

问题中所报告的错误的问题在于， extend()的第一个参数不是有效的对象。

当我运行您的jsFiddle时，它报告Observer is not defined 。

如果Observer()模式应与Subject()模式平行，则您缺少以下代码：

function Observer() {
  this.observers = new ObserverList();
}

或者，也许您只需要更改：

extend( new Observer(), check );

至：

extend( new ObserverList(), check );

这样它就可以使用您为ObserverList()显示的代码。

---

实际上，当我按下您的jsFiddle中的按钮时，发生的错误是Uncaught ReferenceError: Observer is not defined ，这进一步确认了上述错误。

而且，当我应用此更改时，代码似乎在这里运行： http : //jsfiddle.net/jfriend00/8xmu1mcg/ ，尽管我不确切知道它应该做什么，但是它添加了一个复选框，并且没有错误。

Answer 2

唯一的问题是您忽略了定义Observer 。 添加函数定义后，小提琴将起作用：

http://jsfiddle.net/cm5a62jb/1/

 // The Observer function Observer(){ this.update = function(){ // ... }; } function ObserverList(){ this.observerList = []; } ObserverList.prototype.add = function( obj ){ return this.observerList.push( obj ); }; ObserverList.prototype.count = function(){ return this.observerList.length; }; ObserverList.prototype.get = function( index ){ if( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; } }; ObserverList.prototype.indexOf = function( obj, startIndex ){ var i = startIndex; while( i < this.observerList.length ){ if( this.observerList[i] === obj ){ return i; } i++; } return -1; }; ObserverList.prototype.removeAt = function( index ){ this.observerList.splice( index, 1 ); }; function Subject(){ this.observers = new ObserverList(); } Subject.prototype.addObserver = function( observer ){ this.observers.add( observer ); }; Subject.prototype.removeObserver = function( observer ){ this.observers.removeAt( this.observers.indexOf( observer, 0 ) ); }; Subject.prototype.notify = function( context ){ var observerCount = this.observers.count(); for(var i=0; i < observerCount; i++){ this.observers.get(i).update( context ); } }; // Extend an object with an extension function extend( extension, obj ){ for ( var key in extension ){ obj[key] = extension[key]; } } // References to our DOM elements var controlCheckbox = document.getElementById( "mainCheckbox" ), addBtn = document.getElementById( "addNewObserver" ), container = document.getElementById( "observersContainer" ); // Concrete Subject // Extend the controlling checkbox with the Subject class extend( new Subject(), controlCheckbox ); // Clicking the checkbox will trigger notifications to its observers controlCheckbox.onclick = function(){ controlCheckbox.notify( controlCheckbox.checked ); }; addBtn.onclick = addNewObserver; // Concrete Observer function addNewObserver(){ // Create a new checkbox to be added var check = document.createElement( "input" ); check.type = "checkbox"; // Extend the checkbox with the Observer class extend( new Observer(), check ); // Override with custom update behaviour check.update = function( value ){ this.checked = value; }; // Add the new observer to our list of observers // for our main subject controlCheckbox.addObserver( check ); // Append the item to the container container.appendChild( check ); } 

 <button id="addNewObserver">Add New Observer checkbox</button> <input id="mainCheckbox" type="checkbox"/> <div id="observersContainer"></div>