JavaScript设计模式第一弹-建立型设计模式

前言

接下来将会为你们介绍设计模式中的建立型设计模式，在此以前须要掌握必定的JavaScript对象继承基础。

简单工厂模式

先说说

• 什么是简单工厂模式：又叫静态工厂方法，由一个工厂对象决定建立某一种产品对象类的实例

看着定义有点懵，不要紧。继续往下走

工厂函数

• 说明：简单来讲，就是为了把多个相同类型的类集成到一个函数内，咱们把这个函数叫作工厂函数
• 用途：使得其余人不用关注建立对象是基于哪一个基类，直接用该工厂函数便可
• 代码：

//定义小猫类
var Cat = function(){
    this.voice = '喵';
}
Cat.prototype.getVoice = function(){
    console.log(this.voice);
}

//定义小狗类
var Dog = function(){
    this.voice = '汪';
}
Dog.prototype.getVoice = function(){
    console.log(this.voice);
}

//动物工厂
var AnimalFactory = function(name) {
    switch(name){
        case 'cat':
            return new Cat();
        case 'dog':
            return new Dog();
    }
}

//建立实例
var hellokity = AnimalFactory('cat');
hellokity.getVoice();   //'喵'

固然，上面两种方法十分类似，因而还能够有下面的定义方式：

var createAnimal = function(name,voice) {
    var o = new Object(); 
    o.name = name;
    o.voice = voice;
    o.getVoice = function() {
        console.log(this.voice);
    }
    return o;
}
var hellokity = createAnimal('hellokity','喵');
hellokity.getVoice();   //'喵'

看似最后一种方法好像简便很多，可是实际上这两种定义方法是有区别的。

• 第一种方式所定义的实例对象是拥有父类的方法，也就是能够访问到原型链上面的属性和方法的。
• 第二种方式定义则是由于在内部新建了一个对象，那么父级对象什么的天然也就不存在了（固然这里不是指object）。

最后回顾

最后再次加深对简单工厂模式的印象吧

简单工厂模式：又叫静态工厂方法，由一个工厂对象决定建立某一种产品对象类的实例

工厂方法模式

先说说

• 什么是工厂方法模式：经过对产品类的抽象使其建立业务主要负责用于建立多类产品的实例

懵？不要紧。继续往下走

安全模式类

• 用途：能够屏蔽使用该类的所形成的错误
• 例子：

var Demo = function() {};
Demo.prototype.getName = function(){
    console.log('get success!')
}

var d = Demo();
d.getName();    //报错

//安全模式类
var Demo = function() {
    if(!(this instanceof Demo)){
        return new Demo
    }
};
Demo.prototype.getName = function(){
    console.log('get success!')
}

var d = Demo();
d.getName();    //'get success!'

工厂方法

实际上工厂方法和简单工厂模式区别在于：简单工厂模式若是须要增长类的话，那么它则须要改变两处地方，一处是工厂函数，一处是改变类。可是若是是工厂方法模式的话，则只须要往工厂方法中添加基类则能够。代码实现以下：

//安全模式建立的工厂类
var superHeroFatory = function(type,skill){
    if(this instanceof superHeroFatory){
        var s = new this[type](skill);
        return s
    }else{
        return new superHeroFatory(type,skill)
    }
}
superHeroFatory.prototype = {
    IronMan: function(skill){
        this.name = 'Iron Man';
        this.skill = skill;
        this.getName = function(){
            console.log(this.name);
        }
        this.getSkill = function(){
            console.log(this.skill);
        }
    },
    CaptainAmerica: function(skill){
        this.name = 'Captain America';
        this.skill = skill;
        this.getName = function(){
            console.log(this.name);
        }
        this.getSkill = function(){
            console.log(this.skill);
        }
    }
}

var captainAmerica = superHeroFatory('CaptainAmerica','shield');
captainAmerica.getName();   //'Captain America'
captainAmerica.getSkill();  //'shield'

最后回顾

这个工厂方法模式解决了建立多类对象所带来的麻烦，这样的工厂方法对象的方式也避免了使用者与对象类之间的耦合，用户不关心建立该对象的具体类，只需调用工厂方法便可。

抽象工厂模式

先说说

• 什么是抽象工厂模式：经过对类的工厂抽象使其业务用于对产品类簇的建立，而不负责建立其某一类产品的实例

看着定义有点懵，不要紧。继续往下走

抽象类

• 概念：抽象类是一种声明但不能使用的类，使用就会报错。
• 用途：定义一个产品簇，并声明一些必备的方法，若是子类没有重写就会报错
• 例子：在java中能够简单定义，可是在js中的话暂时尚未这种抽象类的定义，因而咱们能够用这种方式模仿抽象类：

var Car = function() {};
Car.prototype = {
    getPrice(){
        return new Error('抽象方法不可用')
    },
    getName(){
        return new Error('抽象方法不可用')
    }
}

因而乎，在对象实例化后调用这些函数就会报错。由于抽象类是没有具体实现的，它只用做继承的方式

抽象工厂模式

• 说明：为了更好的建立抽象类，因而将抽象类整合为一个抽象工厂
• 用途：用于建立抽象对象的一种方法
• 定义：

var VehicleFactory = function(subType,superType){
    if(typeof VehicleFactory[superType] === 'function'){
        // 缓存类
        function F() { };
        
        //继承父类属性和方法
        F.prototype = new VehicleFactory[superType]();
        
        //子类constructor指向子类
        subType.constructor = subType;
        
        //子类原型继承“父类”
        subType.prototype = new F();
    }else{
        throw new Error('未建立该抽象类')
    }
}

//小汽车抽象类 
VehicleFactory.Car = function(){
    this.type = 'car';
}
VehicleFactory.Car.prototype = {
    getPrice(){
        return new Error('抽象方法不可用')
    },
    getName(){
        return new Error('抽象方法不可用')
    }
}

//大巴抽象类
VehicleFactory.Bus = function(){
    this.type = 'bus';
}
VehicleFactory.Bus.prototype = {
    getPrice(){
        return new Error('抽象方法不可用')
    },
    getName(){
        return new Error('抽象方法不可用')
    }
}

抽象类的实现

啥也别说了，直接上码

var BMW = function(price,name){
    this.price = price;
    this.name = name;
}
VehicleFactory(BMW,'Car');
BMW.prototype.getName = function(){
    console.log(this.name);
}

var X2 = new BMW(200,'X2');
X2.getName();   //'X2'
X2.getPrice();  //报错，由于忘记定义这个方法了

最后回顾

最后再次感觉一下定义吧

抽象工厂模式：经过对类的工厂抽象使其业务用于对产品类簇的建立，而不负责建立其某一类产品的实例

建造者模式

先说说

• 什么是建造者模式：将一个复杂对象的构建层与其表示层相互分离，一样的构建过程可采用不一样的表示

与工厂模式差异

• 工厂模式主要是为了建立对象实例或者类簇（抽象工厂），关心的是最终建立的是什么，而对建立的过程并不关心
• 建造者模式在建立对象时要更复杂，它更多的关心建立对象的过程甚至于每一个细节。或者说这种模式建立了一个复合对象

建造者模式

• 说明：关心建立对象的过程，对于建立的具体实现的细节也参与了干涉
• 用途：当须要咱们建立对象不只须要获得对象实例，还需对对象细化时，则可使用建造者模式
• 代码：

//建立类
var Human = function(props){
    this.name = props && props.name || '保密';
}
Human.prototype.getName = function(){
    console.log(this.name);
}

//名字类
var Name = function(name){
    var that = this;
    (function(name,that){
        that.wholeName = name;
        if(name.indexOf(' ') > -1){
            that.FirstName = name.slice(0,name.indexOf(' '));
            that.SecondName = name.slice(name.indexOf(' '));
        }
    })(name,that)
}


var Person = function(name){
    var _name = new Name(name);
    var _person = new Human({name:_name});
    return _person
}

var Miles = new Person('Miles Jiang');
Milse.getName();    //{wholeName: "Miles Jiang", FirstName: "Miles", SecondName: " Jiang"}

最后回顾

这种模式下，咱们就能够关心到对象的建立过程。所以咱们一般将建立对象模块化，这样使得被建立的类的每一个模块均可以得到灵活的运用和高质量的复用

单例模式

先说说

• 什么是单例模式：又被称为单体模式，是只容许实例化一次的对象类。有时咱们也用一个对象来规划一个命名空间，层次分明地管理对象上的属性与方法

命名空间

• 说明：用来约束每一个人定义的变量
• 用途：防止共同开发时带来的变量名冲突
• 例子：

var Miles = {
    getDom: function(id){
        return document.getElementById(id)
    }
}

最后回顾

为了梳理代码，使得代码有序整洁

后话

本文章是经过学习张荣铭所著的《JavaScript设计模式》所总结。但愿你们看完文章能够学到东西，同时也推荐你们去看看这本设计模式，写得很不错。

成功不在一朝一夕，咱们都须要努力