JavaScript设计模式读书笔记=; 创建型设计模式

Posted 2022-03-12 刘翾

全系列目录

1. JavaScript设计模式读书笔记（一）=> 创建型设计模式
2. JavaScript设计模式读书笔记（二）=> 结构型设计模式
3. JavaScript设计模式读书笔记（三）=> 行为型设计模式
4. JavaScript设计模式读书笔记（四）=> 技巧型设计模式
5. JavaScript设计模式读书笔记（五）=>架构型设计模式，MVC，MVP，MVVM

文章目录

• 1. 简单工厂模式
• 2. 工厂模式
• 3. 建造者模式
• 4. 原型模式
• 5. 单例模式

1. 简单工厂模式

为了尽量减少地创建全局变量，同一类对象在不同需求中的重复性使用。通过对简单工厂来创建一些对象，可以让这些对象共用一些资源而又私有一些资源。对于简单工厂模式来说，它的使用场合通常也就限制在创建单一对象。

// e.g.
function createPop(type, text) 
  const o = ;
  o.content = text;
  o.show = function() 
    return this; 
  
  switch (type) 
    case 'asd':
      o.a = 123;
      break;
    default:
      break;
  
  return o;

2. 工厂模式

对于创建多类对象，前面学过的简单工厂模式就不太适用了，通过工厂模式可以轻松创建多个类的实例对象，这样工厂方法在创建对象的方式也避免了使用者与对象类之间的耦合，用户不用关心创建对象的具体类，只需调用工厂方法即可。

// e.g. 安全模式创建的工程类
const Factory = function (type, content)
  if (this instanceof Factory) 
    return new this[type](contnet);
   else 
    return new Factory(type, content)
  


Factory.prototype = 
  Java: function (content) 
    // asd
  ,
  Python: function (content) 
    // zxc
  

安全模式可以避免用户当成函数直接调用导致获取不到实例方法。

书看到这里时来了个疑问 =》为什么函数直接在prototype上定义属性，函数却没法直接访问，经过查找资料总结如下：

function Fn() 
    this.hello = function () 
        console.log('实例方法');
    


Fn.hello = function() 
    console.log('静态方法');


Fn.prototype.hello = function () 
    console.log('实例共享方法(对象方法)');

3. 建造者模式

建造者模式关心的是对象创建过程，因此我们通过将创建对象的类模块化，这样使得被创建的类的每一个模块都可以得到灵活的运用与高质量的复用。
对于整体对象的拆分无形中增加了结构的复杂性，因此如果对象粒度很小，或者模块复用率很低最好还是创建整体对象

const Human = function (param) 
  this.skill = param || '保密';


Human.prototype.getSkil = function () 
  return this.skill;


const Named = function(name) 
  this.wholeName = name;
  const indexSpace = name.indexOf(' ')
  if (indexSpace > -1) 
    this.firstName = name.slice(0, indexSpace);
    this.lastName = name.slice(indexSpace);
  


const Person = function(param, name) 
  const o = new Human(param);
  Named.call(o, name);
  return o;


const Liu = Person('asd', 'liu xuan');

4. 原型模式

原型模式可以让多个对象分享同一个原型对象的属性与方法，这是一种继承方式。

代码以及继承讲解博主之前写过一篇文章：https://blog.csdn.net/c_kite/article/details/80261544

5. 单例模式

单例模式只允许实例化一次的对象类，它也经常作为命名空间对象来实现，类似Jquery的$符号。

这个例子很简单没什么说的

// e.g.

const A = 
	c: function(),
	d: function()

结合es6的Symbol实现单例

// 代码出处 http://es6.ruanyifeng.com/#docs/symbol#%E5%AE%9E%E4%BE%8B%EF%BC%9A%E6%A8%A1%E5%9D%97%E7%9A%84-Singleton-%E6%A8%A1%E5%BC%8F
const FOO_KEY = Symbol('foo');

function A() 
  this.foo = 'hello';


if (!global[FOO_KEY]) 
  global[FOO_KEY] = new A();


module.exports = global[FOO_KEY];

参考资料：

1. 张容铭著 javascript设计模式 40-66页
2. https://segmentfault.com/q/1010000007817639
3. http://es6.ruanyifeng.com/#docs/symbol#实例：模块的-Singleton-模式