JavaScript工厂模式?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

JavaScript工厂模式?

前端问答 2019-12-30 12:37:27 129
JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 前端问答
    2019-12-30 12:40:00

    工厂模式分为好几种,这里就不一一讲解了,以下是一个简单工厂模式的例子

    class Man {
      constructor(name) {
        this.name = name
      }
      alertName() {
        alert(this.name)
      }
    }
    
    class Factory {
      static create(name) {
        return new Man(name)
      }
    }
    
    Factory.create('yck').alertName()
    
    

    当然工厂模式并不仅仅是用来 new 出实例。

    可以想象一个场景。假设有一份很复杂的代码需要用户去调用,但是用户并不关心这些复杂的代码,只需要你提供给我一个接口去调用,用户只负责传递需要的参数,至于这些参数怎么使用,内部有什么逻辑是不关心的,只需要你最后返回我一个实例。这个构造过程就是工厂。

    工厂起到的作用就是隐藏了创建实例的复杂度,只需要提供一个接口,简单清晰。

    在 Vue 源码中,你也可以看到工厂模式的使用,比如创建异步组件

    export function createComponent (
      Ctor: Class<Component> | Function | Object | void,
      data: ?VNodeData,
      context: Component,
      children: ?Array<VNode>,
      tag?: string
    ): VNode | Array<VNode> | void {
        
        // 逻辑处理...
      
      const vnode = new VNode(
        `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
        data, undefined, undefined, undefined, context,
        { Ctor, propsData, listeners, tag, children },
        asyncFactory
      )
    
      return vnode
    }
    
    

    在上述代码中,我们可以看到我们只需要调用 createComponent 传入参数就能创建一个组件实例,但是创建这个实例是很复杂的一个过程,工厂帮助我们隐藏了这个复杂的过程,只需要一句代码调用就能实现功能。

    1 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程