Day25-数据结构与设计模式

数据结构(数据的组成结构对应的数据存储结构)

数组

链表(双向链表单向链表)

栈(先进后出后进先出)

队列(先进先出) 后进后出

串(字符串 hash)

图(散链表)

树(平衡树(红黑树二叉树 )完全二叉树)

计算机组成原理(冯若依曼)

操作系统(linux设计到对应的服务器相关指令及操作(center-os))

计算机网络(对应的网络组成及相关网络协议)

数据解构及算法

数据结构其实就是数据的存储结构

数组链表队列栈图串树

算法(依靠固定的套路来做相关的解题操作(公式))

递归算法(BFS(广度优先搜索)DFS深度优先搜索)

动态规划(思想寻宝迷宫这类的问题)

关于树的算法(完全二叉树里面最小路径问题) 狄克斯特拉算法

马拉车算法

贪心算法

字符串匹配算法(hash算法)

数组排序算法(快速排序(数据量较少)希尔排序(插入数据)归并排序(数据量大的时候))

...

设计模式

概述:设计模式是固定的套路,他是用来快速设计和创建的对象(类的) 的模式,总共有23种(不区分语言)

设计模式划分:

创建型:用来创建对象的

结构型:用来加强对应的对象的结构,设计类(对象)的结构

行为型:用于对象之前的数据交互和联系建立

工厂模式

function factory(name){
    //先创建一个对象
    var obj = new Object()
    //再给对象设置属性
    obj.name = name
    //再返回这个对象
    return obj
}
//调用
var Person = factory('jack')

单例模式:

主要思维:在对应的生成对象的时候,每次生成对应的都是一个对象(单例的意思就是生成的对象只有一个)

function Person(){
    
}
let person1 = new Person()
let person2 = new Person()
console.log(person1==person2) //false

使用闭包来实现

// 使用闭包来实现单例
function Single(){
    var instance = null //保存这个对应的对象
    return function(){
        //判断当前对象是否存在
        if(instance==null){
            //如果不存在就new
            instance = new Person()
        }
        return instance
    }
}
//调用
var SinglePerson = Single()
let person3 = SinglePerson()
let person4 = SinglePerson()
console.log(person3==person4); //true

使用原型来实现单例（原型的声明只有一次）

//利用原型来实现单例（利用声明只有一次的特点）
function prototypeSingle(){
    //接收原型上的instance属性
    let instance = prototypeSingle.prototype.instance
    if(!instance){
        //给原型上的属性赋值
        instance =  prototypeSingle.prototype.instance = new Person()
    }
    return  instance
}
//调用
let person5 = prototypeSingle()
let person6 = prototypeSingle()
console.log(person5==person6);

使用静态属性（声明的时候也只声明一次）

//使用静态属性
function createPerson(){
    //Person的构造函数里面的静态属性 是否为空 如果为空就进行赋值
    if(!Person.instance){
        Person.instance = new Person()
    }
    return Person.instance
}
let person7 = createPerson()
let person8 = createPerson()
console.log(person7==person8);

组合模式

将对应的方法（方法名一致）组合在一起调用

function GoBack(){
    this.init = function(){
        console.log('回家')
    }
    this.sayHello = function(){
        console.log('你好  我回家了')
    }
}
function OpenPhone(){
    this.init = function(){
        console.log('打开手机')
    }
    this.sayHello = function(){
        console.log('你好  我正在准备玩手机')
    }
}
function PlayGame(){
    this.init = function(){
        console.log('玩游戏')
    }
}
new GoBack().init()
new OpenPhone().init()
new PlayGame().init()

组合模式实现

// 组合模式
class Combiner{
    //当你没传参数的时候 准备空数组
    constructor(){
        this.args = [] //接收对应的对象
    }
    add(obj){ //将对应的里面的对象存入
        this.args.push(obj)
    }
    excuted(fnName){//将对应的对象数组的fnName方法执行
        this.args.forEach(item => {
            //当前具备这个方法 就执行
            if(item[fnName]){
                item[fnName]()
            }
        });
    }
}
let combiner = new Combiner()
combiner.add(new GoBack())
combiner.add(new  OpenPhone())
combiner.add(new  PlayGame())
combiner.excuted('init')
combiner.excuted('sayHello')

组合模式在vue中的使用

观察者模式*(发布-订阅模式)

概述:观察者就是有个第三方的东西在帮你观察对应内容的变化

示例:

!今天去商店买包华子

2.老板说没有了

3.我告诉老板说有货了联系我

4.老板告诉我有货了,我买了

5.老板就属于观察者观察的内容华子处理我买了这个模式就被称为观察者

事件监听就是一个观察者

观察者： js引擎

监听的内容：element对应的事件 click

处理：事件处理方法（多个）

element.addEventListener("click",function(){
    console.log('处理了')
})

观察者核心就是对应的监听内容以及处理内容

观察者（vue2底层就是观察者）

主要操作为3个监听的对应的方法执行对应的方法取消对应的方法

//对应的观察者 监听的函数 事件名:多个处理函数   click:[fn1,fn2]  处理的函数  取消的函数
class ObServer{
    constructor(){
        this.message={} //装对应事件及对应的处理函数 click:[fn1,fn2]
    }
    on(type,handler){ //监听的函数 事件名  处理函数

    }
    emit(type,...args){ //执行对应的函数  click,1,21

    }
    off(type,handler){ //取消对应的事件监听 

    }
}

on

//对应的观察者 监听的函数 事件名:多个处理函数   click:[fn1,fn2]  处理的函数  取消的函数
class ObServer{
    constructor(){
        this.message={} //装对应事件及对应的处理函数 click:[fn1,fn2]
    }
    on(type,handler){ //监听的函数 事件名  处理函数
        //判断事件是否存在
        if(!this.message[type]){
            //赋值空数组 再将对应的处理函数填入
            this.message[type] = [handler]
        }else{
            //如果事件已经存在直接加入对应的数组
            this.message[type].push(handler)
        }
    }
    emit(type,...args){ //执行对应的函数  click,1,21

    }
    off(type,handler){ //取消对应的事件监听 

    }
}

emit

//对应的观察者 监听的函数 事件名:多个处理函数   click:[fn1,fn2]  处理的函数  取消的函数
class ObServer{
    constructor(){
        this.message={} //装对应事件及对应的处理函数 click:[fn1,fn2]
    }
    on(type,handler){ //监听的函数 事件名  处理函数
        //判断事件是否存在
        if(!this.message[type]){
            this.message[type] = [handler]
        }else{
            this.message[type].push(handler)
        }
    }
    emit(type,...args){ //执行对应的函数  click,1,21
        //如果这个事件不存在 直接return
        if(!this.message[type]) return
        //构建一个event对象 将事件类型及相关参数传递进去
        let event = {
            type,
            args
        }
        //取出的事件里面的执行方法 执行
        this.message[type].forEach(fn => {
            fn.call(this,event)
        });
    }
    off(type,handler){ //取消对应的事件监听 

    }
}

off

//对应的观察者 监听的函数 事件名:多个处理函数   click:[fn1,fn2]  处理的函数  取消的函数
class ObServer{
    constructor(){
        this.message={} //装对应事件及对应的处理函数 click:[fn1,fn2]
    }
    on(type,handler){ //监听的函数 事件名  处理函数
        //判断事件是否存在
        if(!this.message[type]){
            this.message[type] = [handler]
        }else{
            this.message[type].push(handler)
        }
    }
    emit(type,...args){ //执行对应的函数  click,1,21
        //如果这个事件不存在 直接return
        if(!this.message[type]) return
        //构建一个event对象 将事件类型及相关参数传递进去
        let event = {
            type,
            args
        }
        //取出的事件里面的执行方法 执行
        this.message[type].forEach(fn => {
            fn.call(this,event)
        });
    }
    off(type,handler){ //取消对应的事件监听 
        //如果这个事件不存在 直接return
        if(!this.message[type]) return
        //遍历这个对应事件的数组 找到对应的handler函数 再删除
        this.message[type].forEach((fn,index)=>{
            if(Object.is(handler,fn)){
                this.message[type].splice(index,1)
            }
        })
    }
}

代理模式（vue3的底层）

proxy （es7新增对象）

概述: 找一个作为你的代理执行人然后去做对应的操作在不影响原本类结构的情况下做功能加强

示例

去58同城找一个清洁工去帮我去打扫家里的卫生

1.需要一个58同城

2.需要自己去注册一个账号（传递进去）

3.找清洁工（也在58同城有个账号传递进去）

代理对象清洁工目标对象我自己平台58 （代理对象会改变目标对象）

生成一个代理对象俩个参数一个是对应的目标对象target 对应的代理对象的操作handler

let targetObj = {name:'jack',age:18}//目标对象
//代理对象 new Proxy 目标对象 处理的函数handler
let proxy = new Proxy(targetObj,{
    //处理 get 获取值
    get(target,name,proxy){
        // console.log(target) 得到目标对象
        // console.log(name)//对应的key
        // console.log(proxy) //得到代理对象
        return target[name]+"hello" //获取了a
    },
    //set 设置值的时候
    set(target,name,value,proxy){
        // console.log(target) //目标对象
        // console.log(name) //key
        // console.log(value) //值
        // console.log(proxy) //得到代理对象
        target[name] = value+"岁" //更改了对应的a
    },
    //deleteProperty 删除调用的方法
    deleteProperty(target,name){
        console.log(target);
        console.log(name);
        if(confirm('你确定要删除吗')){
            delete target[name]
        }
    },
    has(target,name){
        console.log(target);
        console.log(name);
        return name in target
    }
})
//调用get方法
console.log(proxy.name);
//调用set方法
proxy.age = 20
//删除 调用deleteProperty
delete proxy.name
console.log(targetObj);
//has调用
console.log('a' in proxy);

装饰者模式

功能加强在不使用继承的情况下做功能加强

示例

我有套房子（买的 new）
找个装修队（装修公司）装修（功能加强）（通过把毛坯传入）
得到就是精装
没有改变原本结构的

function Car(name){
    this.run = function(){
        console.log(name+'车在跑')
    }
}
//加链子 装修
function ChainCar(car){
    this.run = function(){
        console.log("加链子");
        car.run()
    }
}
var car1 = new Car('兰博基尼') //毛坯
var car2 = new Car('劳斯莱斯')
// car1.run()
//精装
var chainCar = new  ChainCar(car1)
var chainCar1 = new  ChainCar(car2)
//加链子
chainCar.run()
chainCar1.run()

posted @ 2022-06-28 11:50 板哥是老几阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

bange-pla