设计模式的相关内容

设计模式及相关内容

大厂实习必备

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.执行完 取消事件

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(){

    }
}

观察者模式

//完成观察者模式
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()