开发者社区> 问答> 正文

JavaScript工厂模式?

展开
收起
前端问答 2019-12-30 12:37:27 2825 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

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

    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 传入参数就能创建一个组件实例,但是创建这个实例是很复杂的一个过程,工厂帮助我们隐藏了这个复杂的过程,只需要一句代码调用就能实现功能。

    2019-12-30 12:40:00
    赞同 1 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载