JavaScript设计模式介绍

由于JavaScript不是典型的面向对象语言，因而在实现一些经典的设计模式上也与一般语言存在差异，本文主要介绍在JavaScript中如何实现常用的设计模式。

1. 单例模式

单例模式是最常见的设计模式，在一般的OOP语言中，我们可以通过私有化构造函数实现单例模式。但由于单例模式实际上可以看做返回的是一个结构，该结构在内存中有且仅有唯一的一份，所以可以类比JavaScript中的闭包，所以可以记住闭包完成单例模式的实现：

// 单例模式
var mySingleton = (function(){
    var instance;

    init = function() {
        var privateVar = "privateVar";
        privateFunc = function() {
            console.log("This is private func");
        };
        return {
            publicVar: 'public var', // 公共变量
            publicFunc: function() { // 公共方法
                console.log('This is public func');
            },
            getPrivateVar: function() {
                return privateVar;
            }
        }
    };
  
    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    }

})();

var singleton1 = mySingleton.getInstance();
var singleton2 = mySingleton.getInstance();
singleton1.publicFunc();
console.log(singleton1 === singleton2);

2. 观察者模式

观察者模式下存在两个成员：观察者和被观察者。观察者在被被观察者处进行注册，当被观察者相关状态发生变化时，被观察者告知观察者，同时观察者执行相应更新逻辑。通常来说，存在多个观察者观察同一个被观察者的情况。在观察者模式下，存在以下几个组件：

• 被观察者：维护一组被观察接口，用于添加、删除观察者，通知观察者
• 观察者：维护一组观察者接口，用于在被观察者状态发生变化时，通知到观察者
• 具体的被观察者：实现被观察者接口
• 具体的观察者：实现观察者接口

// 观察者模式：建立观察者/被观察者关系，观察者可以注册其观察对象(被观察者)，当被观察者的状态发生改变时，可以及时通知到观察者

// 被观察者管理观察者能力建模
function ObserverList() {
    this.observerList = [];
}

// 添加观察者
ObserverList.prototype.Add = function(observer) {
    this.observerList.push(observer);
}

// 清空观察者
ObserverList.prototype.Empty = function() {
    this.observerList = [];
}

// 观察者数量
ObserverList.prototype.Count = function() {
    return this.observerList.length;
}

// 获取某个观察者
ObserverList.prototype.Get = function(index) {
    if (index >= 0 && index < this.observerList.length) {
        return this.observerList[index];
    }
    return undefined;
}

// 删除某个观察者
ObserverList.prototype.RemoveAt = function( index ){
    if( index === 0 ){
      this.observerList.shift();
    }else if( index === this.observerList.length -1 ){
      this.observerList.pop();
    }
};

// var testObserverList = new ObserverList();
// for(var key in testObserverList) {
//     console.log('key:' + key + '->' + testObserverList[key]);
// }

// 给某个对象扩展被观察者能力
function extend(extension, target) {
    for(var key in extension) {
        target[key] = extension[key];
    }
}

// 创建被观察者对象Subject,同时集成观察者对象的能力
function Subject() {
    this.observerList = new ObserverList();
};

Subject.prototype.AddObserver = function(observer) {
    this.observerList.Add(observer)
};

Subject.prototype.RemoveObserver = function( observer ){
    this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );
}; 

// 通知所有观察者
Subject.prototype.Notify = function(context) {
    var count = this.observerList.Count();
    for(var i = 0; i < count; i++) {
        this.observerList.Get(i).Update(context);
    }
};


// 构建观察者对象，主要是定义观察后的处理函数
function Observer() {
    this.Update = function() {
        //do something
    }
}

接下来我们基于观察者模式实现一个例子：

• 一个按钮，这个按钮用于增加新的充当观察者的选择框到页面上
• 一个控制器的选择框，充当一个被观察者，通知其他选择框是否应该被选中
• 一个容器，用于放置新的选择框

    
        Add New Observer checkbox