JavaScript设计模式

1.工厂模式

最初的工厂模式用来抽象创建具体对象的过程

function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        alert(this.name);
    };
    return o;
}

var person1 = createPerson('Nicholas', 29, 'Software Engineer');
var person2 = createPerson('Grey', 29, 'Software Doctor')；

缺点：不能识别对象类型

---

2.构造函数模式

特点：

• 没有显示的创建对象
• 直接将属性和方法赋给了 this 对象
• 没有 return 语句。

function Person(name, age , job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}

var sayName = function(){
    alert(this.name);
}

var person1 = new Person("Nicholas", 29 , "Software Engineer");
var person2 = new Person("Grey", 27 , "Doctor");

此方式调用的构造函数经理的调用过程：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个对象）；
3. 执行构造函数中的代码（为这个对象添加属性）；
4. 返回新的对象

缺点：

* 上面创建的全局函数只能被某个对象调用，在某种特定情况下导致全局作用域存在过多的只能在该构造函数使用的函数，使代码变得混乱。*

---

3.原型模式

每个函数内部都有一个 prototype 属性， 这个属性是一个指针，指向一个对象。

function Person() {
}

Person.prototype = {
  name: "Nicholas",
  age:29,
  job:"Software Engineer",
  sayName: function () {
    alert(this.name);
  }
}

实现更简单的原型模式

//人民币类
    function Rmb(name) {
        this.p = null;
        this.input = null;
        this.name = name;
        //需要有一个数组，管理自己的观察者
        this.waibis = [];
        //初始化的函数
        this.init();
        //监听事件
        this.bindEvent();
    }
    //注册方法
    Rmb.prototype.tellMoney = function (money) {
        for(var i = 0;i<this.waibis.length;i++){
            //遍历管理者的数组，进行调用zhuanhuilv
            this.waibis[i].zhuanhuilv(money);
        }
    }
    Rmb.prototype.regsin = function (obj) {
        this.waibis.push(obj);
    }
    //告诉其他外国钱咱们人民币是多少钱
    //初始化的方法
    Rmb.prototype.init = function (argument) {
        //文字的设置
        this.p = document.createElement("p");
        this.p.innerHTML = this.name+":";
        document.body.appendChild(this.p);
        //文本输入框
        this.input = document.createElement("input");
        this.p.appendChild(this.input);
    }
    //监听事件
    Rmb.prototype.bindEvent = function (argument) {
        //监听文本输入框的实时的变化
        var self = this;
        this.input.oninput = function (argument) {
            //当文本输入框变化的时候，调用了tellMoney
            self.tellMoney(this.value);
        }
    }
    /*********************************人民币***************************************/   //外币的类
    function Waibi(name,huilv,rmb) {
        this.name = name;
        this.huilv = huilv;
        this.p = null;
        this.input = null;
        //初始化的方法
        this.init();
        //添加到人民币的数组里面
        rmb.regsin(this);
    }
    //初始化的方法
    Waibi.prototype.init = function (argument) {
        //文字的设置
        this.p = document.createElement("p");
        this.p.innerHTML = this.name+":";
        document.body.appendChild(this.p);
        //文本输入框
        this.input = document.createElement("input");
        this.p.appendChild(this.input);
    }
    //外币的转汇率的方法
    Waibi.prototype.zhuanhuilv = function (rmb) {
        this.name == "泰铢" && (this.input.value = rmb * this.huilv);
        this.name == "美元" && (this.input.value = rmb * this.huilv);
    }
    var rmb = new Rmb("人民币");
    var taizhu = new Waibi("泰铢",5,rmb);
    var meiyuan= new Waibi("美元",6,rmb);

以下使用了更简单的模式构建

 //人民币类
    function Rmb(name) {
        this.p = null;
        this.input = null;
        this.name = name;
        this.waibis = [];
        this.init();
        this.bindEvent();
    }

    Rmb.prototype = {
        tellMoney: function (money) {
            for (var i = 0; i < this.waibis.length; i++) {
                //遍历管理者的数组，进行调用zhuanhuilv
                this.waibis[i].zhuanhuilv(money);
            }
        },
        regsin: function (obj) {
            this.waibis.push(obj);
        },
        init: function (argument) {
            //文字的设置
            this.p = document.createElement("p");
            this.p.innerHTML = this.name + ":";
            document.body.appendChild(this.p);
            //文本输入框
            this.input = document.createElement("input");
            this.p.appendChild(this.input);
        },
        bindEvent: function (argument) {
            //监听文本输入框的实时的变化
            var self = this;
            this.input.oninput = function (argument) {
                //当文本输入框变化的时候，调用了tellMoney
                self.tellMoney(this.value);
            }
        }

    }

    /*********************************人民币***************************************/   //外币的类
    function Waibi(name, huilv, rmb) {
        this.name = name;
        this.huilv = huilv;
        this.p = null;
        this.input = null;
        //初始化的方法
        this.init();
        //添加到人民币的数组里面
        rmb.regsin(this);
    }

    //初始化的方法
    Waibi.prototype = {
        init: function (argument) {
            this.p = document.createElement("p");
            this.p.innerHTML = this.name + ":";
            document.body.appendChild(this.p);
            this.input = document.createElement("input");
            this.p.appendChild(this.input);
        },
        zhuanhuilv: function (rmb) {
            this.name == "泰铢" && (this.input.value = rmb * this.huilv);
            this.name == "美元" && (this.input.value = rmb * this.huilv);
        }
    }

    var rmb = new Rmb("人民币");
    var taizhu = new Waibi("泰铢", 5, rmb);
    var meiyuan = new Waibi("美元", 6, rmb);

使得每一个只作用于对应构造函数上的函数只定义于其内部，使代码结构更加易于理解。