JavaScript -- 设计模式创建型设计模式-工厂模式

亦凉 2022-01-09 23:53 222阅读 0赞

也许你在网上看到有关工厂模式的其他教程（包括我在内,我在学校学习工厂模式时,老师用的c\#),那些并不适合前端（JS)。

在前端中，当你考虑使用new运算符来创建对象的时候，就可以考虑使用工厂模式了。

工厂模式的类图可以是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

我不直接使用Product来生成实例，而是通过使用Creator.create方法来实现这个功能。

class Product {
        constructor(name) {
            this.name = name;
        }
        init() {}
        fn1() {}
        fn2() {}
    }
    class Creator {
        create() {
            return new Product();
        }
    }

使用工厂模式的好处：

使得调用者不用关注细节，只需要简单的调用一个方法即可，使得创建者和调用者分离。

在前端中，那些地方用到了工厂模式。

1:  JQ的$运算符这就是一个工厂模式。

class jQuery {
        constructor(selector) {
            super(selector)
        }
        //  ....
    }
    
    window.$ = function(selector) {
        return new jQuery(selector)
    }

2：React.createComponent()方法

熟悉react的应该知道createComponent是干什么的。

![1][]

不难发现这些我们常用的框架 都有工厂模式的身影。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220109/83d236dd17db40b2a9324d4e88e61aa8.png
[1]: https://user-gold-cdn.xitu.io/2018/8/9/1651a5e388f90113?imageView2/0/w/1280/h/960/format/webp/ignore-error/1