JavaScript之设计模式

概念：
设计模式（Designpattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

工厂设计模式

design patterns
解决的问题是批量生产对象

<script>
    //用于创建学生对象的工厂函数
    function studentFac(name,age,gender,score) {
        var stu = {};
        stu.name = name;
        stu.age = age;
        stu.gender = gender;
        stu.score = score;
        return stu;
    }

    var stu = studentFac("小刚",14,"男",100);
    console.log (stu);
</script>

单例设计模式

singleton
单例设计模式解决的问题：对某种类型，只能创建该种类型的唯一的一个实例

1、使用静态成员实现的单例模式（缺点：确保单例的静态属性很容易被覆盖掉，不安全）
2、使用闭包实现

<script>
    var instace = {};
    //使用静态成员实现单例模式
    var Singleton = function (name, age) {
        //静态成员是否存在。存在，直接返回
        if(Singleton.instance)
            return Singleton.instance;
        // 不存在，创建
        Singleton.instance = this;
        this.name = name;
        this.age = age;
    }

    Singleton.prototype.setName = function (name) {
        this.name = name;
    }
    Singleton.prototype.getName = function () {
       return this.name;
    }
    var tom = new Singleton("TOM",3);
    var jerry = new Singleton("JERRY",1);
    var jerry1 = new Singleton("JERRY1",2);
    jerry.setName("jerry");
    console.log (Singleton.instance.getName());
    console.log (tom === jerry);

    //被暴露在外，很容易被修改
    Singleton.instance = null;
    

    //具有唯一实例的类型
    var Single;
    (function () {
        //函数内的局部变量，它指向了惟一的类型的实例
        var instance;
        Single = function (name) {
            //已经创建，直接返回
            if(instance)
                return instance;
            //初始化instance
            instance = this;
            //绑定属性
            this.name = name;
        }
    })();

    var gang = new Single("小刚");
    var ma = new Single("小马");

观察者设计模式

observer
面对解决的是 1对多 的问题
也称为订阅发布模式。

解决的问题：
    1、实现多个对象之间的松耦合
    2、当某一个对象执行了某个操作，其他的多个对象都可以接收到通知
    3、被通知接收信息的对象的数量是开放的

实例：HR 通知 若干个面试者

<script>
    //隶属于某个公司的hr
    // 属性：公司的名称，保存应聘者的信息的容器
    // 功能：添加观察者、删除观察者、通知观察者
    function HR(name) {
        this.name = name;
        //保存应聘者的信息的容器
        this.observers = [];
    }
    //HR的原型对象中添加上述的功能
    HR.prototype.addObserver = function (obs) {
        this.observers.push(obs);
    }
    //删除观察者
    HR.prototype.removeObserver = function (obs) {
        var observers = this.observers;
        //遍历所有的应聘者，相同的删除掉
        for (let i = 0; i < observers.length; i++) {
            if(observers[i] === obs){
                var removeObserver = observers.splice(i,1)[0];
                removeObserver.update(removeObserver.name+"先生/女士：很遗憾，希望以后有合作的机会！");
            }
        }
    }

    //通知所有的观察者
    HR.prototype.notify = function () {
        //遍历所有的观察者，执行更新的方法
        var observers = this.observers;
        for (let i = 0; i < observers.length; i++) {
            observers[i].update(observers[i].name + "\t恭喜先生/女士：下周来"+this.name + "上班");
        }
    }

    //面试者，观察者   功能就是接收信息
    function Observer(name) {
        this.name = name;
    }
    /**
     *  //接收更新通知的方法
     * @param msg 接收到的信息
     */
    Observer.prototype.update = function (msg) {
        console.log (msg);
    }

    var hr = new HR("JD");

    var gang = new Observer("小刚");
    var ma = new Observer("小马");
    var bai = new Observer("小白");

    hr.addObserver(gang);
    hr.addObserver(ma);
    hr.addObserver(bai);

    //删除小马
    hr.removeObserver(ma);
    //通知其他人
    hr.notify();


    //前面学习的事件处理，就是观察者模式
    document.body.addEventListener("click",function () {
        console.log ("body click")
    },false);
    document.addEventListener("click",function () {
        console.log ("document click")
    },false);
    document.body.click();
</script>