设计模式 (1)

设计模式及相关内容

大厂实习必备

1.数据结构（算法）*

数据结构 就是存储数据的结构（容器）

1.1 数组

1.2 链表（单链表和双向链表）

1.3 队列 （先进先出）

1.4 栈 （先进后出）

1.5 图

1.6 树

…

算法

递归算法 查找算法（bfs 广度优先 dfs 深度优先）

贪心算法

马拉车算法

狄克斯特拉算法

排序算法

…

2.操作系统（Linux）

3.计算机组成原理

4.网络通信原理

设计模式

概述：

设计模式 是一种用于快速构造模型以及对象的一种模式 他不区分语言 传统的设计模式总共有23种

他分为三种类型

创建型：设计类，创建对象的一种设计模式

结构型：将多个类的结构组成一个大的结构

行为型：类和对象的交互

工厂模式

function PersonFactory(name){
	let obj = new Object() //生成一个对象
	obj.name = name
	return obj
}
let person = PersonFactory('jack')

单例模式

概述: 使生成的对象只有一个（他生成的对象永远只有一个）

function Person(){
	
}
let person1 = new Person()
let person2 = new Person()
console.log(person1===person2) //生成的俩个对象 地址不是一个 false

实现

1.用一个变量来判断是否存在这个对象

2.如果不存在 创建 这个变量要重新赋值

3.如果存在 直接返回这个变量

闭包实现单例

function Person(){
	
}
//利用闭包来实现单例
function CreatePerson(){
	let instance
	return function(){
        if(!instance){
            instance = new Person()
        }
        return instance
	}
}
let created = CreatePerson()
let person = created() //产生一个新的对象
let person1 = created() //产生一个新的对象
console.log(person === person1) //true

原型实现单例

function Person(){
	
}
//用原型来实现单例
function CreatedPerson(){
    if(!Person.instance){
        Person.instance = new Person()
    }
    return Person.instance
}
let person2 = CreatedPerson()
let person3 = CreatedPerson()
console.log(person2 === person3);

组合模式

组合模式 将几个共有的方法一起调用

class getHome{
    constructor(){

    }
    init(){
        console.log("到家了");
    }
}
class openComputer{
    constructor(){

    }
    init(){
        console.log("打开电脑");
    }
}
class playGame{
    constructor(){

    }
    init(){
        console.log("玩游戏");
    }
}
//原来的调用方式
new getHome().init()
new openComputer().init()
new playGame().init()
//组合模式 让这个几个init方法 放在一起调用
//传对象
class Combination{
    constructor(){
        this.args = []
    }
    //写个方法来传
    add(obj){
        this.args.push(obj)
    }
    //写个执行的方法
    execute(fnName){
        this.args.forEach((obj)=>{
            obj[fnName]()
        })
    }
}
//组合模式的调用
let combin = new Combination()
combin.add(new getHome())
combin.add(new openComputer())
combin.add(new playGame())
combin.execute('init')

观察者模式

概述

观察者模式是前端使用的最多模式 （vue）订阅者模式 消息模式… 主要是通过事件派发的机制进行工作的

示例

来千锋报名

1.过来看下环境 没有位置了（需要一个位置 发布了一个事件）

2.等有位置空 （等消息）（执行了一个事件函数）

3.如果有位置 通知我过来 如果没有位置（我要告诉你继续等 回复）（结果）

观察者模式的三个过程

1.发布一个事件

2.执行一个事件

3.执行完 取消事件

addEventListent 就是一个简单的观察者实现

//获取按钮
let btn  = document.getElementsByTagName('button')[0]
//添加一个事件
//btn发布一个click的事件  浏览器一直监听者他 当他被点击的时候执行对应的函数 
btn.addEventListener('click',function(){
    console.log('点击了');
})

观察者模型

//完成观察者模式
class obServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件
    on(){

    }
    //派发事件
    emit(){

    }
    //取消事件
    off(){

    }
}

on

//完成观察者模式
class obServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件
    emit(){

    }
    //取消事件
    off(){

    }
}

emit

//完成观察者模式
class ObServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件 执行事件
    emit(type,...args){ //事件类型  参数
        //判断事件是否发布
        if(!this.message[type]) return
        //对参数进行一个包装
        const event = {
            type:type,
            args: args || {}
        }
        //执行函数
        this.message[type].forEach(fn => {
            fn.call(this,event) //回调调用
        });
    }
    //取消事件
    off(){
    }
}

off

//完成观察者模式
class ObServer{
    constructor(){
        //事件类型 事件执行的函数 click:[fn1,fn2]
        this.message = {}
    }
    //发布事件 事件名  事件对应的函数
    on(type,fn){
        if(!this.message[type]){ //第一次发布事件
            this.message[type] = [fn]
        }else{
            this.message[type].push(fn) //添加对应的事件
        }
    }
    //派发事件 执行事件
    emit(type,...args){ //事件类型  参数
        //判断事件是否发布
        if(!this.message[type]) return
        //对参数进行一个包装
        const event = {
            type:type,
            args: args || {}
        }
        //执行函数
        this.message[type].forEach(fn => {
            fn.call(this,event) //回调调用
        });
    }
    //取消事件
    off(type,fn){
        //判断事件是否发布
        if(!this.message[type]) return
        this.message[type].forEach((fn1,index)=> {
            //删除对应的fn
            if(Object.is(fn,fn1)){ //判断俩个函数是否是一个函数对象（不能传new的形式）
                this.message[type].splice(index,1)
            }
        });
    }
}

调用

function a(e){
    console.log('hello');
}
function b(e){
    console.log('hi');
}
let obServer = new ObServer() //创建一个观察者
//发布一个事件
obServer.on('abc',a)
obServer.on('abc',b)
//执行方法
obServer.emit('abc',10,20)
//取消方法
obServer.off('abc',a)
obServer.off('abc',b)
obServer.emit('abc',10,20)

装饰者模式（功能加强 代理模式）

// 没有改变原本的内容来实现功能加强的操作
//他是通过传入一个毛坯的类 来实现返回一个精装的类（多态）
// 1.俩者要继承同一个父类
// 2.找到你需要功能加强的方法 进行加强（重写方法）
// 3.将这个新的类返回
class Person{
    constructor(){

    }
    eat(){
        console.log('吃饭');
    }
}
//毛坯
class Student extends Person{
    constructor(name){
        super()
        this.name = name
    }
    eat(){
        console.log('吃饭');
    }
}
//精装
class Student1 extends Person{
    constructor(Person){
        super()
        this.name = Person.name
    }
    eat(){
        console.log(this.name+'用筷子吃饭');
    }
}
let stu = new Student('李四')
let stu1 = new Student1(stu)
stu1.eat()

毛坯
class Student extends Person{
constructor(name){
super()
this.name = name
}
eat(){
console.log(‘吃饭’);
}
}
//精装
class Student1 extends Person{
constructor(Person){
super()
this.name = Person.name
}
eat(){
console.log(this.name+‘用筷子吃饭’);
}
}
let stu = new Student(‘李四’)
let stu1 = new Student1(stu)
stu1.eat()