zoukankan      html  css  js  c++  java
  • 设计模式之创建型工厂模式

    通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。
    创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。
    定义一个创建对象的接口,让其子类决定实例化哪一个工厂类,工厂模式使其创建过程延迟到子类进行,最终生成复杂对象。主要解决接口选择的问题。

    您需要一辆汽车,可以直接从工厂里提货,而不用去管这辆汽车是怎么做出来的,以及这个汽车里面的具体实现。

    var PageFactory = function(type, content) {
      if(this instanceof PageFactory) {
        var s = new this[type](content);
        return s;
      } else {
        // 防止使用者不知道这是一个类,忘了加new操作符创建,导致全局变量污染
        return new PageFactory(type, content);
      }
    };
    PageFactory.prototype = {
      MyCss: function(content) {
        // ...
      },
      MyJavaScript: function(content) {
        // ...
      },
      MyPhp: function(content) {
        // ...
      }
    };

    这样以后如果想添加其他类,只需要在PageFactory的原型里添加就可以了。对于创建很多类的对象,简单工厂模式就不适合了,通过工厂模式可以轻松创建多个类的实例对象,而且避免了使用者与对象类之间的耦合,用户不必关心创建该对象的具体类,只需调用工厂方法即可。

    // 文本工厂
    class Text {
        constructor(text) {
            this.text = text
        }
        insert(where) {
            const txt = document.createTextNode(this.text)
            where.appendChild(txt)
        }
    }
    
    // 链接工厂
    class Link {
        constructor(url) {
            this.url = url
        }
        insert(where) {
            const link = document.createElement('a')
            link.href = this.url
            link.appendChild(document.createTextNode(this.url))
            where.appendChild(link)
        }
    }
    
    // 图片工厂
    class Image {
        constructor(url) {
            this.url = url
        }
        insert(where) {
            const img = document.createElement('img')
            img.src = this.url
            where.appendChild(img)
        }
    }
    
    // DOM工厂
    class DomFactory {
    
      constructor(type) {
        return new (this[type]())
      }
    
      // 各流水线
      link() { return Link }
      text() { return Text }
      image() { return Image }
    }
    
    // 创建工厂
    const linkFactory = new DomFactory('link')
    const textFactory = new DomFactory('text')
    
    linkFactory.url = 'https://www.me'
    linkFactory.insert(document.body)
    
    textFactory.text = 'HI! I am camille.'
    textFactory.insert(document.body)
  • 相关阅读:
    移动端轮播插件
    一个简单的富文本编辑器
    animation css3
    渐变的写法
    js拖拽功能
    打子弹游戏 js
    css-vertical-centering
    css3的linear-gradient
    js模拟滚动条
    js日历
  • 原文地址:https://www.cnblogs.com/camille666/p/design_pattern_create_factory.html
Copyright © 2011-2022 走看看