Factory Pattern

[weikee94]

工厂模式

• 工厂模式符合 SO 原则
  • 构造函数和创建者分离，符合单一原则
  • 符合开放封闭原则

class Product {
  constructor(name) {
    this.name = name;
  }
  init = () => {
    console.log("init");
  };
  fn1 = () => {
    console.log("this is fn1 function");
  };
}

class Creator {
  create = (name) => {
    return new Product(name);
  };
}

// test
let creator = new Creator();
let p = creator.create("p1");
p.init();
p.fn1();

这时候会问什么例子用这种模式呢？

• React.createElement
• 看下面 React.createElement 的例子会知道 React.createElement 相当于一个工厂，我们传入什么值 会返回Vnode 给我们

var profile = React.createElement('div', null, 
        React.createElement('img', {src: 'avatar.png', className="profile"})
    )

class Vnode {
 // skip
}

React.createElement = function(tag, attrs, children) {
    return new Vnode(tag, attrs, children)
}

[weikee94]

export const createBook = (title, author, isbn) => ({
  title,
  author,
  isbn,
});

export const book1 = createBook('Harry Potter', 'JK Rowling', 'AB123');

export const book2 = createBook(
  'The Great Gatsby',
  'F. Scott Fitzgerald',
  'CD456'
);

export const book3 = createBook('Moby-Dick', 'Herman Melville', 'EF789');

export const book4 = createBook('Harry Potter', 'JK Rowling', 'AB123');

export const book5 = createBook(
  'The Great Gatsby',
  'F. Scott Fitzgerald',
  'CD456'
);

stackblitz