JavaScript设计模式读书笔记=; 结构型设计模式

Posted 2022-03-12 刘翾

全系列目录

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

文章目录

• 1. 外观模式
• 2. 适配器模式
• 3. 装饰者模式
• 4. 桥接模式
• 5. 组合模式
• 6. 享元模式

1. 外观模式

这个很简单，就是指当一个复杂的系统提供一系列复杂的接口方法时，对接口的二次封装隐藏其复杂性。

// e.g.
const api = 
 getabc: () => 
 	// 调用各种函数
 	// 处理很多
 	return 'gkd';
 

2. 适配器模式

一样很容易理解，将一个对象的方法或者属性转化为另外一个接口，以满足用户的需求，使对象之间接口不兼容问题通过适配器来解决。

// 例如原有一个A框架要换成jq，代码不动就要使用写适配器用jq适配原来的A框架
// e.g.
A.on = function (id, type, fn) 
	$('#'+id).on(type, fn);

3. 装饰者模式

不改变原对象的基础上，通过对其进行包装拓展使原有对象可以满足用户的更复杂需求。

es6有提供了 http://es6.ruanyifeng.com/#docs/decorator

function doSomething(name) 
  console.log('Hello, ' + name);


function loggingDecorator(wrapped) 
  return function() 
    console.log('Starting');
    const result = wrapped.apply(this, arguments);
    console.log('Finished');
    return result;
  


const wrapped = loggingDecorator(doSomething);

4. 桥接模式

其最主要的特点是将实现层与抽象层解耦分离，使两部分可以独立变化。

// e.g.
function speed(x, y) 
  // 调用很多函数
  this.x = x;
  this.y = y;


speed.prototype.run = function () 
  console.log('run');


function say(gkd) 
  // 调用很多函数
  this.word = gkd;


say.prototype.speak = function () 
  console.log(this.word + ':)');


function people (x, y, gkd) 
  this.speed = new speed(x, y);
  this.mouth = new say(gkd);


people.prototype.init = function () 
  this.speed.run();
  this.mouth.speak();


const liu = new people(1,1,'asd');
liu.init();

5. 组合模式

组合模式又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。

这个思想和使用React编写组件差不多，不断拆分成最小的功能模板，最后组合到一起

6. 享元模式

享元模式（Flyweight）指运用共享技术有效地支持大量的细粒度对象，避免对象间拥有相同内容造成多余的开销。应用时一定要找准内部状态（数据与方法）与外部状态（数据与方法），这样你才能更合理地提取分离。

这本书的例子代码写的真是渣

下面这个例子就是把移动方法单独抽出来，实现共用，减少其他类重写时造成不必要的开销

const FlyWeight = 
  moveX: function(x) 
    this.x = x;
  ,
  moveY: function(y) 
    this.y = y;
  ,


const Player = function (x, y, name) 
  this.x = x;
  this.y = y;
  this.name = name;


// refect写法 Reflect.setPrototypeOf(Player, FlyWeight)

Player.prototype = Object.create(FlyWeight);
Player.prototype.constructor = Player;
Player.prototype.changeName = function (name) 
  this.name = name;
;


const Car = function (x, y, logo) 
  this.x = x;
  this.y = y;
  this.logo = logo;


// Reflect写法 Reflect.setPrototypeOf(Car, FlyWeight)

Car.prototype = Object.create(FlyWeight);
Car.prototype.constructor = Car;
Car.prototype.changeLogo = function (logo) 
  this.logo = logo;
;

参考资料：

1. 张容铭著 javascript设计模式 68-108页