Javascript设计模式之工厂模式

设计模式并不是某一种语言所特有的，而是一种设计理念，现在学习Javascript的设计模式相关知识点。

工厂模式

工厂模式设计目标是：根据不同的需求创建实例化对象。我们将通过一个特定的需求来逐渐深入的讲解工程模式的用法。

我们需要达到的一个需求是，做一个音乐播放器，这个播放器有四个按钮，分别是上一首、下一首、播放暂停、静音。

 

针对上面的需求，我们先按照最简单的工厂模式写一个方法。

<script>
    function WangyiMusicAction(action) {
        var obj = new Object;
        obj.vender = "网易云音乐";
        obj.playingMusic = "see you again";

        switch (action) {
            case "last":
                obj.information = { currentMusic: "小幸运", status: "200|404", message: "上一曲" };
                break;
            case "next":
                obj.information = { currentMusic: "野子", status: "200|404", message: "下一曲" };
                break;
            case "play":
                obj.information = { currentMusic: "see you again", status: "200|500", message: "播放" };
                break;
            case "mute":
                obj.information = { currentMusic: "see you again", status: "200|500", message: "静音" };
                break;
        }

        return obj;
    };

    /***下面是调用测试代码***/
    var music = new WangyiMusicAction("next");
    console.log("音乐提供商：" + music.vender); // 网易云音乐
    console.log("正在播放：" + music.playingMusic); // see you again
    console.log("执行动作：" + music.information.message); // 下一曲
    console.log("接口状态：" + music.information.status); // 200|404
    console.log("执行动作后歌曲：" + music.information.currentMusic); //野子

</script>

通过给action传递不同的参数，可以获取不同的播放器状态。

 

面向对象理念

但是上述的方法并没有用到面向对象的理念，我们使用面向对象的思维重新修改上面的方法。

<script>
    var WangyiMusicAction = function () {
        this.vender = "网易云音乐";
        this.playingMusic = "see you again";
    };

    //扩展其prototype属性
    WangyiMusicAction.prototype = {
        last: function () {
            this.information = { currentMusic: "小幸运", status: "200|404", message: "上一曲" };
        },
        next: function () {
            this.information = { currentMusic: "野子", status: "200|404", message: "下一曲" };
        },
        play: function () {
            this.information = { currentMusic: "see you again", status: "200|500", message: "播放" };
        },
        mute: function () {
            this.information = { currentMusic: "see you again", status: "200|500", message: "静音" };
        }
    };


    /***下面是调用测试代码***/
    var music = new WangyiMusicAction();
    console.log("音乐提供商：" + music.vender); // 网易云音乐
    console.log("正在播放：" + music.playingMusic); // see you again

    music.next(); // 执行下一曲动作
    console.log("执行动作：" + music.information.message); // 下一曲
    console.log("接口状态：" + music.information.status); // 200|404
    console.log("执行动作后歌曲：" + music.information.currentMusic); //野子

</script>

在上述面向对象的工厂模式中，建立一个WangyiMusicAction对象，然后扩展其prototype属性，这样每个实例都会有自己的方法。

 

改进工厂模式

上面的工厂模式中，只能生成WangyiMusicAction的对象，如果我还要生成一个QQMusic和BaiduMusic，XiamiMusic，只有每个music都得写一遍方法，这是不值得推荐的。

我们可以通过一个Factory来动态创建各种类型的Music，首先是WangyiMusicAction。

 

优化工厂模式

但是在上面的工厂模式中，我们发现对于不同音乐提供商共用的属性可以封装成一个对象，用作父类继承。

1，定义父类

2，继承
通过修改prototype属性实现继承。

3，建立Factory工厂

建立工厂动态生成WangyiMusic或者QQMusic，然后生成一个QQMusic实例，并调用相应的方法。

 

<script>
    //基类（父类）Music方法
    var BaseMusic = function () {
        this.playingMusic = "see you again";
        this.information = {
            currentMusic: "",
            status: "",
            message: ""
        };
    };

    //实现通用方法
    BaseMusic.prototype = {
        last: function () {
            this.information.currentMusic = "小幸运";
            this.information.status = "200|404";
            this.information.message = "上一曲";
        },
        next: function () {
            this.information.currentMusic = "野子";
            this.information.status = "200|404";
            this.information.message = "下一曲";
        },
        play: function () {
            this.information.currentMusic = "see you again";
            this.information.status = "200|500";
            this.information.message = "播放";
        },
        mute: function () {
            this.information.currentMusic = "see you again";
            this.information.status = "200|500";
            this.information.message = "静音";
        }
    };


    //网易云音乐不同于父类的构造方法
    var WangyiMusicAction = function (action) {
        this.vender = "网易云音乐";
    };
    //通过prototype实现类继承
    WangyiMusicAction.prototype = new BaseMusic(); //将动作放在基类，到达代码复用的目的

    //QQ音乐不同于父类的构造方法
    var QQMusicAction = function (action) {
        this.vender = "QQ音乐";
    };
    //通过prototype实现类继承
    QQMusicAction.prototype = new BaseMusic(); //将动作放在基类，到达代码复用的目的


    //音乐工厂
    var MusicFactory = function (type) {
        switch (type) {
            case "wangyi":
                return new WangyiMusicAction();
            case "qq":
                return new QQMusicAction();
        }
    };

    /***下面是调用测试代码***/
    var music = new MusicFactory("wangyi");
    console.log("音乐提供商：" + music.vender);
    console.log("正在播放：" + music.playingMusic);

    music.next(); // 执行下一曲动作
    console.log("执行动作：" + music.information.message);
    console.log("接口状态：" + music.information.status);
    console.log("执行动作后歌曲：" + music.information.currentMusic);

</script>

通过上述的继承父类方案，可以优化代码结构，工厂模式也使用的更加简洁。