javascript 设计模式 学习篇 3

244 阅读3分钟

简单工厂模式:又叫 静态工厂方法,由一个工厂对象决定某一种产品对象类的实例。主要用来创建同一类对象

3.1 工作中的第一次需求

 警示框 类
var LoginAlert = function(text){
    this.content = text;
}

LoginAlert.prototype.show = function(){
    // 显示警示框
}

var userNameAlert = new LoginAlert("用户不能多于16个字母或数字");
userNameAlert.show();

// 用户不存在,你提示一句‘您的用户不存在,请重新输入’
// 又创建了一个类
var LoginConfirm = function(text){
    this.content = text;
}
LoginConfirm.prototype.show = function(){
    // 显示确认框
}

var LoginFailConfirm = new LoginConfirm('您的用户不存在,请重新输入');
LoginFailConfirm.show();

  登录成功后给出一个自定义提示框,除了有确定按钮,也提示一句‘欢迎回来,请输入您今天的心情’
  又是一个新类
  
var LoginPrompt = function(text){
    this.content = text;
}
LoginPrompt.prototype.show = function(){
    // 提示框
}


     3。2 如果类太多,那么提供一个
      LoginAlert() LoginConfirm()  LoginPrompt()
      以 Login为前缀,写一个简单工厂

     该怎么办呢????
     举个栗子
     比如说体育商店卖体育器材,里面有很多体育用品,及其相关介绍

// 篮球基类
var Bsketball = function(){
    this.intro = '篮球盛行于美国';
}
Bsketball.prototype = {
    getMember : function(){
        console.log('每个队伍需要5名队员');
    },
    getBallSize : function(){
        console.log('篮球很大');
    }
}

// 足球基类
var Football = function(){
    this.intro = '足球在世界范围内很流行';
}
Football.prototype = {
    getMember : function(){
        console.log('每个队伍需要11名队员');
    },
    getBallSize : function(){
        console.log('足球很大');
    }

}

// 网球基类
var Tennis = function(){
    this.intro = '每年很多的网球联赛';
}
Tennis.prototype = {
    getMember : function(){
        console.log('每个队伍需要1名队员');
    },
    getBallSize : function(){
        console.log('网球很小');
    }
}

// 运动工厂
var SportsFactory = function(name){
    switch(name){
        case 'NBA': 
            return new Basketball();
        case 'worldCup':
            return new Football();
        case 'FrenchOpen':
            return new Tennis();        
    }
}

     当你小伙伴想买足球的时候,只要和店员说 我要买个足球即可。你是使用这个商店工厂时仅仅需要记住 SportsFactory这个工厂对象即可.
    
    
// 为世界杯创建一个足球,只需要记住运动工厂 SportsFactory, 调用并创建
var footnall = SportsFactory('worldCup');
console.log(footnall);
console.log(footnall.intro);
footnall.getMember();
    你的写的类有很多公共的地方可以抽象提取出来公用的, use simple Factory
    
 3.3 一个对象有时可以代替许多类
 
// 工厂模式
function createBook (name, time, type){
    // 创建一个对象,并对对象拓展属性和方法
    var o = new Object();
    o.name = name;
    o.time = time;
    o.type = type;
    o.getName = function(){
        console.log(this.name);
    }
    // 并将对象返回
    return o;
}

var book1 = createBook();
var book2 = createBook();

book1.getName();
book2.getName();

     真的很想使用寄生式继承, 只不过这里的 o 没有任何类或对象
     所以你这三个类要改用成 一个工厂模式就很简单了。 首先抽象他们的共同点,比如说共有属性 this.content, 原型公有方法show
     当然也有不同点, 比如说确认框和提示框的确认按钮。比如提示框的用户输入框等等。
    
function createPop(type, text){
    // 创建一个对象,并对对象拓展属性和方法
    var o = new Object();
    o.content = text;
    o.show = function(){
        // 显示方法
    };

    if(type == 'alert'){
        // 警示框差异部分
    }
    if(type == 'prompt'){
        // 提示框差异部分
    }
    if(type == 'confirm'){
        // 确认框差异部分
    }
    // 将对象返回
    return o;
}
// 创建警示框
var userNameAlert = createPop('alert', '用户名只能是26个字母和数字');
     3.4 你的理解决定你选择的方式
     这两个不同的‘魔术师’ 工厂, 有一定的区别的,你知道是什么吗?

    1. 第一种是通过类的实例化对象创建的, 第二种是通过创建一个新对象然后包装增强其属性和功能来实现的。
    2. 他们之间的差异性也造成前面通过类创建的对象,如果这些类继承同一个父类,那么他们的父类原型上的方法是可以共用。
    而后面寄生方式创建的对象都是一个新的个体,所以他们的方法就不能共用了。