美文网首页
javascript设计模式之简单工厂模式

javascript设计模式之简单工厂模式

作者: dillon_fly | 来源:发表于2018-08-11 20:13 被阅读0次

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

    1.一个需求

    下面我们从一个简单的需求说起
    在做用户登录的时候我们往往会有用户名校验等功能,下面我们就用常规方法来简单实现一下。
    需求:登录是用户名要控制在16个数字或字母以内,做一个校验失败的弹窗提示

    var LoginTips = function(text) { 
         this.content = text;
    }
    LoginTips.prototype.show = function () {
          //显示提示框
    }
    var loginTipName = new LoginTips('用户名为数字或者字母,不得超过16个字符!')
    loginTipName.show()
    

    好了,大功告成
    接下来也可以用这个做密码的校验

    var loginTipPassword = new LoginTips('您输入的密码不正确')
    

    哇,是不是很好用!

    2.第二个需求

    在原来的基础上添加一个去注册的按钮
    好,那我们就再写一个类来做这个事情

    var LoginRegister = function(text) { 
         this.content = text;
    }
    LoginRegister.prototype.show = function () {
          //显示提示框
    }
    var gotoRgister = new LoginTips('错了这么多次了,是不是没有账户呢?')
    gotoRgister.show()
    

    3.第三个需求,登录成功后显示提示框,让用户输入性别

    ........
    又要写一个类。。。。
    用起来,管理起来太复杂了点,类的名字还不同,每次用的时候还的找一下,好麻烦,我们不妨用简单工厂的方法来实现一下
    我们先简单举个例子
    比如一个体育用品店,每一种器材都用对应的属性,我们用篮球,足球,网球举一下例子。

    var Basketball = function () {
        this.info = '美国人打篮球挺厉害'
    }
    Basketball.prototype = {
        getNumber:function () {console.log('每个队伍需要5名队员')},
        getBallsize:function() {console.log('篮球很大')}  
    }
    var Football = function () {
        this.info = '足球在世界各地广受欢迎'
    }
    Football.prototype = {
        getNumber:function () {console.log('每个队伍需要11名队员')},
        getBallsize:function() {console.log('足球比篮球小一点')}  
    }
    var Tennis = function () {
        this.info = '国人看李娜!'
    }
    Tennis.prototype = {
        getNumber:function () {console.log('每个队伍需要1名队员')},
        getBallsize:function() {console.log('网球很小,比鸡蛋稍微大一点')}  
    }
    //运动器材工厂
    var SportFactory = function(name){
        switch(name){
            case 'NBA': return new Basketball();
            case 'wordCup': return new Bootball();
            case 'frenchOpen': return new Tennis()
        }
    }
    用的时候就很简单了
    var basketball = SportFactory('NBA')
    basketball.getNumber()
    

    下面我们将一开始的两个类通过简单工厂的方式来改造一下,就好用多了

    var PopFactory = function(name){
        switch(name){
            case 'checkTip': return new loginTips();
            case 'registerTip': return new loginRegister()
        }
    }
    

    这样就好用多了吧

    一个对象可以代替许多类

    举个例子,比如要创建一本书,这些书都有比较相似的属性,比如都有书名,简介,出版时间等。这样我们就可以通过对象来创建创建不同的书,如下

    //工厂模式
    function createBook(name,time,summary){
        //创建一个对象并对对象进行属性和方法的扩展
        var obj = new Object()
        obj.name = name
        obj.time = time
        obj.summay = summay
        obj.getName = function (){
            console.log(this.name)
        }
        return obj
    }
    //使用
    var js = createBook('js','2013','这是一本基础javascript')
    var css = createBook('css','2015','这是一本进阶css')
    js.getName()
    css.getName()
    //这样是不是更简单~
    

    那么现在想一下两种方式有什么异同呢?第一种是通过类实例化对象创建的,第二种是通过创建一个新的对象然后通过对这个对象进行属性和方法的拓展来实现的。第一种方法创建的,如果这个类有父类,则被创建的对象就会拥有那个父类的属性和方法,第二种则是一个新的个体。
    当然选择哪种方法来实现,就要看你自己解决需求的思路了!


    相关文章

      网友评论

          本文标题:javascript设计模式之简单工厂模式

          本文链接:https://www.haomeiwen.com/subject/wsmdbftx.html