前言

今天我们要来聊的是设计模式（Design Pattern）

所谓设计模式是什么设计模式是一套经过分类的、被反复使用、代码设计经验的总结。

通俗来讲就是一种能让你的代码表现得更加优雅、完整、满足现实的一种代码设计

设计模式十分重要一年的工程师（新手）不学但是三年以上的工程师（架构师）一定要学作为大项目开发这是必不可少的

但是各位切莫抓耳挠腮，让我们直接上才艺，加上通俗易懂的代码，且看我们轻松拿捏设计模式。

一、 JavaScript语言精粹------对象

js 复制代码

const xm = {
   name : "小明"
   age : 18
   hometown : "南昌"
}

在现实生活中，我们所有看见的事物其实都是对象，而这些对象其实都具有一个相同的本质属性+方法

在上述代码中我们就定义了一个名字叫做 xm 的对象而我们要了解这个对象怎么办呢

我们再看里面发现这个对象里面还定义了xm对象的 name,age,hometowm三种属性，这样我们是不是就更加了解这个对象了呢
在聊完对象之后我们接下来要介绍对象的两个好朋友

分别是对象字面量和两种数据类型（基本类型和引用类型）

1. 对象字面量

定义：一个对象字面量就是包围在一对花括号中的零或多个"键/值"对

js 复制代码

var empty_object = {};  //这是一个空的对象

const xm = {
   name : "小明"
   age : 18
   hometown : "南昌"
}

上述代码中我们定义了一个空对象和含有三个键值对的对象而这个零和三个键值对就分别是这两个对象的对象字面量

2.两种数据类型（基本类型和引用类型）

基本类型（简单类型）：Underfined,Null,Boolean,Number,String

引用类型（复杂类型）：Object，Array，Date，Function

而我们上述代码定义的都是属于obj对象也是一种引用类型

由于这两种类型能够继续拓展讲解但是为了能够让我们了解这次文章的内容就行我就不过多赘述

二、设计模式

首先，正如文章开头所说，设计模式是服务于生活，那么我们的代码肯定是要结合生活来写

举个例子，此刻屏幕前的你肯定是一个十分优秀的Person，除了每天努力学习外恋爱这方面也是手到擒来，谈过的恋爱更是数不胜数，那么你还记得你第一次追女生是什么样的情景吗？

1. 对象本质 = 属性 + 方法

js 复制代码

const xl = {
   name : "小刘",
   age : 20,
   hometown : "南昌"
}

js 复制代码

const xm = {
   name : "小美",
   age : 18,
   hometown : "南昌"
}

首先我们定义了两个对象，分别是我们今天的男主角和女主角，这时候我们就有了两个有属性的对象。就像浪漫的你第一次追女生肯定就是想着送一束花给漂亮的她，此刻你们带着彼此的属性相遇了，但是你们好像啥也干不了似乎还缺少什么？

我们在上面提到了 对象本质 = 属性 + 方法

所以我们还缺少为这两个对象赋予送花和收到花的方法

js 复制代码

const xl = {
   name : "小刘",
   age : 20,
   hometown : "南昌",
   sendFlower(receiver){
   receiver.receiveFlower(this);
   }
}

const xm = {
    name: '小美',
    receiveFlower(sender){
         console.log(this.name+'收到'+sender.name+'花');
    }
}

xl.sendFlower(xm);

最后这段代码运行的结果就是

到了这里，你以为结束了吗，Not At All,我们的设计模式才要刚刚开始。因为在现实生活中你这么直接的送花给小美，小美肯定觉得你做事太一步到位了，但是高情商的你想到了一个既不失风度又优雅的方法：找小美的闺蜜小红来帮你把花送给小美

2、代理模式 & 面向对象 -> 面向接口编程

这时候我们又要引入一个新名词：代理模式（proxy pattern）

何为代理模式：JS代理模式的核心是一个代理对象，它充当了一个虚拟的对象，可以代替真实的对象执行一系列任务。代理对象本身并不提供任何实际的功能，它的任务是将请求转发给真实的对象，然后在请求前后添加一些额外的逻辑或控制。在执行中，代理对象拦截了对真实对象的访问，并对其进行统一的处理。

通俗来说代理对象就是代替你完成你的任务的一个 "工具人"

js 复制代码

const xl = {
   name : "小刘",
   age : 20,
   hometown : "南昌",
   sendFlower(receiver){
   receiver.receiveFlower(this);
   }
}

const xm = {
    name: '小美',
    receiveFlower(sender){
         console.log(this.name+'收到'+sender.name+'花');
    }
}
const xh = {
    name : '小红',
    hometown : '南昌',
    //接口 interface
    receiveFlower(sender){
         xm.receiveFlower(sender)
    }
}
xh.receiverFlower(xl);

在这里我们让工具人，哦不是，代理人小红带着属性和方法登场了，上述代码运行的结果就是

在上述代码中我们可以发现小红实现了和小美同样的方法

这其实是一种面向对象 -> 面向接口编程的转变

因为当我们有两个对象实现了同样的方法时，这里的方法（method）其实叫做接口，换言之两个对象实现了同样的接口，就可以互换使用，实现代理模式。
到了这里其实你已经快成功了，但是贴心的你又考虑到了小美的心情可能时好时坏，如果心情不好那就得让你退下了，如果心情好那么恭喜你成功了。
我们要如何在小美心情好的时候送出花呢？这时候又要求助于我们伟大的代理对象--小红，帮忙观察一波小美的心情，并在她心情好的时候送出这束花。

js 复制代码

const xl = {
   name : "小刘",
   age : 20,
   hometown : "南昌",
   sendFlower(receiver){
   receiver.receiveFlower(this);
   }
}

const xm = {
    name: '小美',
    emotion : 50, //当emotion > 80 接受你
    receiveFlower(sender){
         console.log(this.name+'收到'+sender.name+'花');
        if(this.emotion < 80){
            console.log('本宫没心情，打出去');
        }else{
            console.log('约会走一波');
        }
    }
}
const xh = {
    name : '小红',
    hometown : '南昌',
    receiveFlower(sender){
        if(xm.emotion >= 80){
          xm.receiveFlower(sender)  
        }else{
            setTimeout(function(){
                xm.emotion = 99
                xm.receiveFlower(sender)
            },2000)
        }
    }
}

这时我们再执行上述代码不会立即输出而是过了一会再输出以下内容

综上而言

JS强大的表现力体现于：JavaScript语言精粹---对象

对象的本质 = 属性 + 方法

代理模式通过实现面向接口编程实现更复杂的任务

专门针对小白 如何轻松理解 JavaScript 设计模式

前言

一、 JavaScript语言精粹------对象

1. 对象字面量

2.两种数据类型（基本类型和引用类型）

二、 设计模式

1. 对象本质 = 属性 + 方法

2、代理模式 & 面向对象 -> 面向接口编程

综上而言

专门针对小白如何轻松理解 JavaScript 设计模式

二、设计模式