JavaScript中的设计模式有哪些？如何实现并应用？

1. 单例模式

单例模式是指在系统中只需要一个实例对象，通过该对象可以进行操作。它的特点是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。在JavaScript中，单例模式常常用于命名空间的声明和全局变量的管理。

  
    var Singleton = (function(){
        var instance;
        function createInstance(){
            var object = new Object("I am the instance");
            return object;
        }
        return {
            getInstance: function(){
                if(!instance){
                    instance = createInstance();
                }
                return instance;
            }
        }
    })();
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
    alert("Same instance? " + (instance1 === instance2)); // Same instance? true
  

2. 工厂模式

工厂模式是指定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。工厂模式让类的实例化推迟到子类中进行。在JavaScript中，工厂模式常常用于创建对象，尤其是创建复杂对象的情况。

  
    function Car(options) {
        this.doors = options.doors || 4;
        this.state = options.state || "brand new";
        this.color = options.color || "silver";
    }
    function Truck(options) {
        this.state = options.state || "used";
        this.wheelSize = options.wheelSize || "large";
        this.color = options.color || "blue";
    }
    function VehicleFactory() {}
    VehicleFactory.prototype.vehicleClass = Car; // 默认类
    VehicleFactory.prototype.createVehicle = function(options) {
        switch(options.vehicleType) {
            case "car":
                this.vehicleClass = Car;
                break;
            case "truck":
                this.vehicleClass = Truck;
                break;
            default:
                this.vehicleClass = Car;
        }
        return new this.vehicleClass(options);
    }
    var carFactory = new VehicleFactory();
    var car = carFactory.createVehicle({
        vehicleType: "car",
        color: "yellow",
        doors: 6
    });
    var truck = carFactory.createVehicle({
        vehicleType: "truck",
        state: "like new",
        color: "red",
        wheelSize: "small"
    });
    console.log(car instanceof Car); // true
    console.log(truck instanceof Truck); // true
  

3. 观察者模式

观察者模式是指当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并被自动更新。在JavaScript中，观察者模式常常用于事件处理、异步编程等场景。

  
    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);
        }
    };
    function Observer() {
        this.update = function() {
            // ...
        };
    }
    var subject = new Subject();
    var observer1 = new Observer();
    var observer2 = new Observer();
    subject.addObserver(observer1);
    subject.addObserver(observer2);
    subject.notify("Hello World!"); // observer1.update("Hello World!"); observer2.update("Hello World!");