javascript 设计模式(张容铭)学习篇 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. 他们之间的差异性也造成前面通过类创建的对象,如果这些类继承同一个父类,那么他们的父类原型上的方法是可以共用。
而后面寄生方式创建的对象都是一个新的个体,所以他们的方法就不能共用了。

转载于:https://my.oschina.net/u/3520255/blog/3020816

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值