先说说名字
创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
这么多枯燥的名字 在我们JS中使用的我先介绍个10种吧。
再说说原则
总原则：开闭原则（Open Close Principle）
大家都用过USB外设吧，外设有很多种比如鼠标，充电器，小风扇，U盘，那么对于USB内部的实现其实我们是不知道的，但是我们只要按照他提供的抽象的USB接口就可以去生产我们不同的设备。这就是对外您随便，对内不好意思不让您看。
1、单一职责原则
这个和现在的函数式编程 和模块化编程的思想有些像，也就是说一个函数 现在ES6中可以说是Class 只做单独的一类事情 ，这个力度可以自己把控，只要不影响其他模块那就是对的。
2、里氏替换原则（Liskov Substitution Principle）
JS中没有方法重载这一说（也就是方法名称一样 参数不同可以视为不同方法）JS中实现呢基本是更具参数的类型不同 然后 走不同的逻辑实现分支。所以JS中这个原则其实不是那么的强
这里我也不会描述了，引用别人的一句话 历史替换原则中，子类对父类的方法尽量不要重写和重载。因为父类代表了定义好的结构，通过这个规范的接口与外界交互，子类不应该随便破坏它。
总结一句话 —— 就是尽量不要从可实例化的父类中继承，而是要使用基于抽象类和接口的继承。
其他原则
写到这里其实大家还有总结了一些 依赖倒转原则（Dependence Inversion Principle），接口隔离原则（Interface Segregation Principle），迪米特法则（最少知道原则）（Demeter Principle），合成复用原则（Composite Reuse Principle），总结下这些原则其实还是总原则的一些完善，主要就是面向接口编程和面向抽象编程的思想。这里就不引导大家学习这些了，有兴趣的同学可以百度一下这些原则。
💐闲话到这里为止，我们来看看实际的代码吧。
创建型模式
简单工厂模式（Simple Factory）4
抽象工厂模式（Abstract Factory）5
建造者模式（Builder）2
单例模式（Singleton）3
1 单例模式
var single = (function() {
var temp;
function getInstance(name) {
if (temp === undefined) {
temp = new Temp(name);
}
return temp;
}
function Temp(name) {
this.name = name;
}
return {
getInstance: getInstance
}
})();
single.getInstance("kobe")
//输出Temp {name: "kobe"}
single.getInstance("jay")
//输出Temp {name: "kobe"}
单例模式也就是说一个对象的实例在系统中只能存在一个，这样做的好处就是可以控制核心对象在系统中的唯一性，但是由于闭包的特性，他的GC回收不及时。
1 简单工厂模式
让我们先看看一段代码
class ButtonFactory{
constructor(name,color){
this.name = name;
this.color = color;
}
getButton(){
let btn = document.createElement("button");
btn.innerText = this.name;
btn.style.backgroundColor=this.color;
btn.style.minWidth="100px"
return btn;
}
}
然后在看看进阶版本
class Buttons {
constructor(name, color, cf) {
this.name = name;
this.color = color;
}
createButton(cf) {
let btn = document.createElement("button");
btn.style.backgroundColor = this.color;
btn.style.minWidth = "100px"
btn.onclick=cf;
btn.innerText=this.name;
return btn;
}
}
class ButtonBlue extends Buttons {
constructor(cf) {
super();
this.name="我是蓝色按钮";
this.color="blue";
}
}
class ButtonRed extends Buttons {
constructor(cf) {
super();
this.name="我是红色按钮";
this.color="red";
}
}
class ButtonFactory {
constructor(type) {
this.type = type;
}
getButton(cf) {
let btn;
switch(this.type) {
case "blue":
btn= new ButtonBlue().createButton(cf);
break;
case "red":
btn= new ButtonRed().createButton(cf);
break;
}
return btn;
}
}
第一种写法就是单纯的产生一个按钮的实例，既然是工厂就应该生产多元化的按钮，那么我们经过改进以后的代码灵活性和实用性就要高与第一种写法，但是这种生产按钮的工厂还是不能满足我们多元的需求，那么我们就需要下一种模式
抽象工厂模式
还是老样子 先撸一段代码
const CXMONKEY = {
MONKEY: function(name) {
return new Monkey(name)
}
}
const CXSHIP = {
MONKEY: function(name) {
return new Ship(name)
}
}
const FA = {
MF: function() {
return new MonkeyFactory()
},
SP: function() {
return new ShipFactory()
}
}
//抽象方法
class IAnmial {
say() {
throw "我是抽象方法"
}
}
//抽象类
class Anmial extends IAnmial {
constructor(name) {
super();
this.name = name;
}
eat() {
console.log(this.name + "吃东西")
}
anmial(type, name, factory) {
return FA[factory]().getAnmial(type, name)
}
}
//抽象工厂
class AbsAnmialFactory {
cerateAnmial(type, name, factory) {
return new Anmial().anmial(type, name, factory);
}
}
//实例工厂
class MonkeyFactory {
getAnmial(type, name) {
return CXMONKEY[type](name);
}
}
//实例工厂
class ShipFactory {
getAnmial(type, name) {
return CXSHIP[type](name);
}
}
//实例产品
class Monkey extends Anmial {
constructor(name) {
super(name);
}
say() {
console.log("我是CX猴工厂出来的:" + this.name)
}
}
//实例产品
class Ship extends Anmial {
constructor(name) {
super(name);
}
say() {
console.log("我是CX羊工厂出来的:" + this.name)
}
}
//调用方式
new AbsAnmialFactory().cerateAnmial('MONKEY', "猴子", "SP").say();
这段代码解释起来还是有点绕口，简单说抽象工厂就是生产抽象的产品的 在实例化的过程中可以指定 是有哪个实例工厂 生产那种产品。那么同样是汽车，可能是德国制造也可以是 中国制造。这样的好处就是可以多种组合但是不用改变代码。
看看这个实际的定义 结合代码理解一下
多个抽象产品类，每个抽象产品类可以派生出多个具体产品类。
一个抽象工厂类，可以派生出多个具体工厂类。
每个具体工厂类可以创建多个具体产品类的实例，也就是创建的是一个产品线下的多个产品。
建造者模式
来瞅瞅代码
class Car {
constructor(engine,tyre){
this.engine = engine;
this.tyre = tyre;
}
}
class Engineer {
makeCar(factory){
return new Car(factory.getEngine(), factory.getTyre());
}
}
class Factory { //这个工厂不是工厂模式
getEngine() {
console.log("引擎组装完毕");
return "我是动力"
}
getTyre() {
console.log("轮胎组装完毕");
return "我是轮胎"
}
};
var engineer = new Engineer();
var car = engineer.makeCar(new Factory())
console.log(car)
建造者模式是一步一步创建一个复杂的对象，它允许用户只通过指定复杂对象的类型和内容就可以构建它们，用户不需要知道内部的具体构建细节。建造者模式属于对象创建型模式。根据中文翻译的不同，建造者模式又可以称为生成器模式
结合代码我们看看，我们的汽车由轮胎和引擎组成但是呢我们需要一个工程师来组装他 ，但是他怎么组装的我们并不知道，最后返回一个汽车出来就好了。
结构型模式
适配器模式
桥接模式
装饰模式
外观模式
享元模式
代理模式
适配器模式
将一个接口转换成客户希望的另一个接口，适配器模式使接口不兼容的那些类可以一起工作，其别名为包装器(Wrapper)。适配器模式既可以作为类结构型模式，也可以作为对象结构型模式。
class MediaPlayer{
play(audioType,fileName){
throw "我是抽象的播放方法 没有具体实现"
}
}
class AdvancedMediaPlayer{
playVlc(fileName){}
playMp4(fileName){}
}
class VlcPlayer extends AdvancedMediaPlayer{
playVlc(fileName){
console.log(`我是Vlc播放器文件名称是${fileName}`)
}
playMp4(fileName){}
}
class Mp4Player extends AdvancedMediaPlayer{
playVlc(fileName){}
playMp4(fileName){
console.log(`我是Mp4播放器文件名称是${fileName}`)
}
}
class MediaAdapter extends MediaPlayer{
play(audioType,fileName){
if(audioType=="vlc")new VlcPlayer().playVlc(fileName);
if(audioType=="mp4")new Mp4Player().playMp4(fileName);
}
}
class AudioPlayer extends MediaPlayer{
play(audioType,fileName){
if(audioType==="mp3"){
console.log(`我是mp3播放器文件名称是${fileName}`)
}else{
return new MediaAdapter().play(audioType,fileName);
}
}
}
var audioPlayer = new AudioPlayer();
audioPlayer.play("mp3", "beyond the horizon.mp3");
audioPlayer.play("mp4", "alone.mp4");
audioPlayer.play("vlc", "far far away.vlc");
我们有一个播放器，他有基本的播放功能。我们不想他只能播放MP3 所以我们可以用一个适配器转换一下，让他拥有更多的功能。
桥接模式(Bridge Pattern)
将抽象部分与它的实现部分分离，使它们都可以独立地变化。它是一种对象结构型模式，又称为柄体(Handle and Body)模式或接口(Interface)模式
class DrawAPI {
drawCircle(radius,x, y){
throw "抽象方法"
}
}
class RedCircle extends DrawAPI {
drawCircle( radius, x, y) {
console.log("Drawing Circle[ color: red, radius: " + radius + ", x: " + x + ", " + y + "]");
}
}
class GreenCircle extends DrawAPI {
drawCircle( radius, x, y) {
console.log("Drawing Circle[ color: green, radius: " + radius + ", x: " + x + ", " + y + "]");
}
}
class Shape {
constructor(drawAPI) {
this.drawAPI = drawAPI;
}
draw(){
this.drawAPI.drawCircle(this.x,this.y,this.radius)
}
}
class Circle extends Shape{
constructor(x, y, radius,drawAPI){
super(drawAPI);
this.x = x;
this.y = y;
this.radius = radius;
}
}
var redCircle = new Circle(100,1000, 10, new RedCircle());
var greenCircle = new Circle(100,100, 10, new GreenCircle());
redCircle.draw();
greenCircle.draw();
我们现在有一个画图形的类这个类可以生成一个圈，为了可以画不同种类的圈我们可以吧画圈的实现类传递进去，这样就实现了我们的多样化可扩展了。如果我们想画一个其他类型的圈我们可以继承抽象方法，然后去实现他 这样就可以在实例化图形类的时候 把我们新的实现类传递进去了，这有点LSP的味道哦。
装饰模式 Decorator Pattern
动态地给一个对象增加一些额外的职责(Responsibility)，就增加对象功能来说，装饰模式比生成子类实现更为灵活。其别名也可以称为包装器(Wrapper)，与适配器模式的别名相同，但它们适用于不同的场合。
function decorateArmour(target, key, descriptor) {
const method = descriptor.value;
let moreDef = 100;
let ret;
descriptor.value = (...args)=>{
args[0] += moreDef;
ret = method.apply(target, args);
return ret;
}
return descriptor;
}
class Man{
constructor(def = 2,atk = 3,hp = 3){
this.init(def,atk,hp);
}
//ES7的装饰器
@decorateArmour
init(def,atk,hp){
this.def = def; // 防御值
this.atk = atk; // 攻击力
this.hp = hp; // 血量
}
toString(){
return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
}
}
var tony = new Man();
console.log(`当前状态 ===> ${tony}`);
// 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3
看看我们的超人，本来的基础防御力是2 我们可以通过装饰器方法让他防御变成102
下面我们来说说ES7的装饰器
它的主要作用与装饰者模式类似，是给一个已有的方法或类扩展一些新的行为，而不是去直接修改它本身
外观模式(Facade Pattern)
外部与一个子系统的通信必须通过一个统一的外观对象进行，为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用
class FaceShape {
draw() {
throw "定义抽象方法"
}
}
class Rectangle extends FaceShape {
draw() {
console.log("Rectangle::draw()")
}
}
class Square extends FaceShape {
draw() {
console.log("Square::draw()")
}
}
class FCircle extends FaceShape {
draw() {
console.log("Circle::draw()")
}
}
class ShapeMaker {
constructor() {
this.circle = new FCircle();
this.rectangle = new Rectangle();
this.square = new Square();
}
drawCircle() {
this.circle.draw();
}
drawRectangle() {
this.rectangle.draw();
}
drawSquare() {
this.square.draw();
}
}
var shapeMaker = new ShapeMaker();
shapeMaker.drawCircle();
shapeMaker.drawRectangle();
shapeMaker.drawSquare();
首先是有一个抽象接口，所有的实现类都需要实现这个抽象接口，然后通过一个大对象暴露出来，让开发人员也很容易记住通过某个对象就可以完成很多事情。
享元模式(Flyweight Pattern)
运用共享技术有效地支持大量细粒度对象的复用。系统只使用少量的对象，而这些对象都很相似，状态变化很小，可以实现对象的多次复用。由于享元模式要求能够共享的对象必须是细粒度对象，因此它又称为轻量级模式，它是一种对象结构型模式。
class Monster{
constructor(name) {
this.name = name;
}
sayName(){
console.log(`我的名字是:${this.name}`)
return this;
}
}
class MonsterFactory extends Monster{
createMonster(name){
return new Monster(name)
}
}
class GetMonster{
getM(num){
let monsters=[];
let names=["a","b","2","1","e","f","g"];
let name="";
for (let i = num; i>=0;i--) {
name=names[parseInt(Math.random()*7,10)].repeat(2)+names[parseInt(Math.random()*7,10)];
monsters.push(new MonsterFactory().createMonster(name).sayName() )
}
return monsters;
}
}
console.log(new GetMonster().getM(10))
现在需要做一个小游戏，游戏里面有10个或者100个怪物，我们可以在使用的时候去生成怪物，也可以在游戏加载的初始化中实例化100个怪物，并且把怪物保存在数组中，但是其实屏幕上只存在3个怪物，总计有100个怪物那么 我们产生100个怪物就有些浪费了，所以我们修改下上述代码 让他变成享元模式
class GetMonster{
getM(num){
let monsters={};
let names=["a","b","2","1","e","f","g"];
let name="";
for (let i = num; i>=0;i--) {
name=names[parseInt(Math.random()*7,10)].repeat(2)+names[parseInt(Math.random()*7,10)];
if(!monsters[name]){
monsters[name]=new MonsterFactory().createMonster(name).sayName()
}
}
return monsters;
}
}
console.log(new GetMonster().getM(20))
我们通过对象的key来确定已经有的key不用添加使用的时候就可以复用这个对象了
代理模式(Proxy Pattern)
通过引入一个新的对象（如小图片和远程代理 对象）来实现对真实对象的操作或者将新的对 象作为真实对象的一个替身，这种实现机制即 为代理模式，通过引入代理对象来间接访问一 个对象，这就是代理模式的模式动机
class Images{
addendImage(src){
let imgNode = document.createElement('img');
document.body.appendChild(imgNode);
imgNode.src = src;
return imgNode;
}
}
class proxyImage {
addendImage(src){
let imgNode = new Images().addendImage("./img/test.gif");
let image = new Image();
image.src = src;
image.onload=function(){
imgNode.src =src;
}
}
}
new proxyImage().addendImage('http://ww3.sinaimg.cn/mw690/0064cTs2jw1ey2ptjq6aoj30sg0lc12j.jpg');
new proxyImage().addendImage('http://ww1.sinaimg.cn/mw690/0064cTs2jw1ey2pthhfiyj30p00dwgtt.jpg');
new proxyImage().addendImage('http://ww4.sinaimg.cn/mw690/0064cTs2jw1ey2ptmcfa6j30sg0lcan2.jpg');
我们可以先展示本地的一个默认图片，等远程图片返回了在显示真实的图片。
先写到这里 下一期接着写观察者模式和中介者模式 以及一些源码分析
网友评论