js设计模式之路--简单工厂

第一个需求

1、用户名输入框，这里用户如果输入的内容不符合久自定义个警示信息“用户名不能多于16个字母和数字”。

我的代码：

var LoginAlert = function(text) {
    this.content = text;
}
LoginAlert.prototype.show = function() {
    //显示警示框
}

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

2、现在用户密码也有一个需求，就是当用户输入密码错误的时候提示“输入的密码不正确”。

心里窃喜上面谢了一个类了，简单：

var passwordAlert = new LoginAlert('输入的密码不正确');
passwordAlert.show();

3、用户登录时如果用户名不存在，提示“你的用户名不存在，请重新输入”。不过这里有个变化，就是在提示框中添加一个注册按钮。

。。。添加注册按钮？？？傻眼了。这个功能没办法复用了，在创建一个新的类：

var LoginConfirm = function(text) {
    this.content = text;
}
LoginConfirm.prototype.show = function() {
    //显示确认框
}
var loginFailConfirm = new LoginConfirm('你的用户名不存在，请重新输入');
loginFailConfirm.show();

4、用户登录成功给出一个自定义框，除了有确认和取消外，也提示一句“欢迎回来，请输入你今天的心情”。

。。。有是一个新类：

var LoginPrompt = function(text) {
    this.content = text;
}
LoginPrompt.prototype.show = function() {
    //显示登录成功信息提示框
}
var loginSuccessConfirm = new LoginPrompt('欢迎回来，请输入你今天的心情');
loginSuccessConfirm.show();

比人复用你的代码

现在和别人合作同时别人想用我的代码，我将LoginAlert、LoginConfirm、LoginPrompt，这三个类告诉别人。

A：“怎么这么多类，而且名字都是以Login开头的，这样吧你写个简单工厂给我吧。”

B：“简单工厂？什么东西？”

A：“是一种模式，你给我三个类，每次创建的时候我还得去找对应的类，这样很麻烦，并且注册提示框(regist)你用登录(login)也不合适。所以你最好封装在一个函数里面，我只要记住这个函数，然后通过调用这个函数就能创建我需要的对象，不是更好。使用你的人不用去关注这些对象到底以来那个基类创建的，而我们只知道这个函数就可以。这种函数我们通常叫工厂函数。这种模式就是我们的工厂模式。”

“举个例子吧，比如说体育商店卖体育器材，里面很多提月用品，以及相关的介绍，你去店里卖东西，只需要问售货员，他会帮你找到你所需要的东西。”

// 篮球基类
var Basketball = function() {
    this.intro = '篮球盛行于美国';
}

Baskeball.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 Baketball();
        case 'wordCup':
            return new Football();
        case 'FrenchOpen':
            return new Tennis();
    }
}

// 使用
var footnall = SportsFactory('wordCup');
console.log(footnall);
console.log(footnall.intro);
footnall.getMember();

A：好了，简单吧，你去将你前面的代码修改下。

var PopFactory = function(name) {
    switch (name) {
        case 'alert':
            return new LoginAlert();
        case 'confirm':
            return new LoginConfirm();
        case 'prompt':
            return new LoginPrompt();
    }
}

一个对象也可以代替许多类

A：你发现你的三个类中有很多方法是相同的，你觉得没？比如都有关闭按钮，都有提示文案等。

A：你要将这些相同的提出来，不同的针对处理。举个例子。比如你想创建一些书，书都有相似的地方，比如目录、页码等，有些地方不同，如书名、出版社、书的类型等。我们处理不同：

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('js book', 2000, 'js');
var book2 = createBook('css book', 2008, 'css');

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

所以将之前的三个类改成工厂模式就比较简单。首先抽取他们的相同点，比如 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 == 'prompt') {
       // 确认框差异部分
    }
    
    return o;
}

var userNameAlert = new createPop('alert', '用户名只能16个字母或数字');

你的理解决定你选择的方式

• 第一种是通过类实例化对象创建的。
• 第二种是通过创建新的对象，然后包装增强其属性和功能来实现。这也叫寄生式继承，只不过这里函数内部创建的o对象没有继承任何类和对象。

他们之间的差异：

    1、通过类创建的对象，如果父类继承一个对象，那么他们的父类原型上的方法是可以共用的。

    2、通过寄生方式创建的对象是一个新的个体。所以他们的方法就不能共用。

具体选择那种工厂方式来实现，要看你是如何分析需求的。