ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

数据结构与设计模式

2022-06-27 21:35:52  阅读：271  来源： 互联网

标签：function 数据结构 console log 模式 new 设计模式 对应


大厂需求:

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

  • 数组
  • 链表
  • 栈  (先进后出,后进先出)
  • 队列 (先进先出 后进后出)
  • 串 (字符串 hash)
  • 图 (散链表)
  • 数 (平衡树(红黑树 二叉树) 完全二叉树)

2.计算机组成原理

  冯诺依曼:冯诺依曼计算机的基本原理是指：程序与数据一样存取，按程序编排的顺序，一步一步地取出指令，自动地完成指令规定的操作是计算机最基本的工作原理。

3.操作系统

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

4.计算机网络

   对应的网络组成及向相关网络协议

 

数据结构及算法:

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

    数组,链表,队列,栈,图,串,数......

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

  • 递归算法(BFS (广度优先搜索), DFS (深度优先搜索) )
  • 动态规划 (思想 寻宝 迷宫这类的问题)
  • 关于树的算法  ( 完全二叉树里面最小路径问题 ) 狄克斯特拉算法
  • 马拉车算法
  • 贪心算法
  • 字符串匹配算法(hash算法)
  • 数组排序算法(快速排序(数据量较少) 希尔排序(插入数据) 归并排序 (数据量大的时候))
  • .......

设计模式:

概述:

  设计模式是固定的套路,他是用来快速设计和创建的对象(类的)模式,共23总模式

创建型模式:(关注于对象的创建,同时隐藏创建逻辑)

  • 工厂模式
  • 抽象工厂模式
  • 单例模式
  • 建造者模式
  • 原型模式

结构型模式:(关注对象之间的组合)

  • 适配器模式
  • 过滤器模式
  • 装饰模式
  • 亨元模式
  • 代理模式
  • 外观模式
  • 组合模式
  • 桥接模式

行为型模式:(关注对象之前的通信)

  • 责任链模式
  • 命令模式
  • 中介者模式
  • 观察者模式
  • 状态模式
  • 策源模式
  • 模板模式
  • 空对象模式
  • 备忘录模式
  • 迭代器模式
  • 解释器模式
  • 访问者模式

 

工厂模式:

   顾名思义是一个工厂里面生产对应的对象,需要这个对象的时候就调用对应的工厂

案例如下:

 <script>
        function factory(name,age) {
            // 先穿件一个空对象
            var obj = new Object()
            // 设置属性和方法
            obj.name = name
            obj.age = age   

            // 再返回这个对象
            return obj
        }

        // 调用
        var Prson = factory("jack",2000)
        let lon = Prson
        let lon0 = Prson
        console.log(lon); // {name: 'jack', age: 2000}
        console.log(lon==lon0); //true
    </script>

单例模式:

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

案例如下:

 1.使用闭包来实现
  

// 闭包实现
        function Single() {
            // 创建一个空对象
            var inter = null
            return function () {
                // 判断inter是否穿在
                if (inter == null) {
                    // 如果是空的话,就重新new一个
                    let inter = new Person()
                }
                // 如果不为空的话就直接输出
                return inter
            }
        }
        // 调用
        var Persons = Single()
        let prea = Persons;
        let preb = Persons;
        // 比较
        console.log(prea == preb) // true

2.通过原型来实现(原型的声明只有一次)

代码如下:

  // 原型方式实现
        function prototypesingle() {
            // 接收原型中的方法
            itance = prototypesingle.prototype.itance
            // 判断是否存在
            if (!itance) {
                // 重新赋值
                let itance = prototypesingle.prototype.itance = new Object()
            }
            return itance

        }
        let ponse = prototypesingle()
        let prec = prototypesingle();
        let pred = prototypesingle();
        // 对比
        console.log(prec == pred)

3.通过静态方法实现:(声明的时候也只能声明一次)

代码如下:

// 静态方式实现
        function stateSingle() {
            // 用person中的今天静态方法
            if (!Object.itance) {
                Object.itance = new Object()
            }
            return Object.itance
        }
        let sonse = stateSingle();
        let songin = stateSingle();
        console.log(sonse == songin);
        console.log(sonse == pred);

 

组合模式:(将对应的方法名一致的方法 组合在一起使用)

代码如下:

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')

 

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

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

 

事件监听就是一个观察者:

观察者 :js引擎

监听的内容:element对应的时间click

处理: 事件处理方法

代码:

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

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

 

观察者(vue2的底层就是观察者)

  主要操作为三个:

  监听的方法:on

  执行对应的方法:emit

  取消对应的方法:off

代码:

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

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

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

    }
}

案例代码:

<button>点击加载</button>
    <script>
        var oBtn = document.querySelector("button")
        oBtn.addEventListener('click', function () {
            console.log("处理了");
        })
        class ObServer {
            constructor() {
                this.message = {}//装对应的事件   
            }
            // 监听的函数 事件名 处理函数
            on(type, hander) {
                // 判断事件是否存在
                if (!this.message[type]) {
                    this.message[type] = [hander]
                } else {
                    this.message[type].push(hander)
                }
            }
            // 执行对应的函数 
            emit(type, ...args) {
                //判断事件是否存在
                if (!this.message[type]) return
                // 存在时
                // 构造一个新的event对象 将事件类型及相关的参数传递进去
                let event = {
                    type,
                    args
                }
                // 遍历 取出事件里面的执行方法后执行
                this.message[type].forEach((fn) => {
                    fn.call(this, event)
                })
            }
            // 取消对应的事件监听
            off(type, hander) {
                //判断事件是否存在
                if (!this.message[type]) return
                // 遍历这个对应事件的数组,找到对应的hander函数 再删除
                this.message[type].forEach((fn, index) => {
                    //   如果相等,则删除
                    if (Object.is(hander, fn)) {
                        this.message[type].splice(index, 1)
                    }
                })

            }
        }


        // 调用
        var obs = new ObServer()
        function fn() {
            console.log("hellow");
        }
        function fn1(e) {
            console.log('你好' + e.args);
        }
        obs.on("click", fn)
        obs.on("click", fn1)
        obs.off("click", fn1)
        obs.emit("click", 1)
    </script>

 

代理模式:(vue3的底层)

proxy(ES7新增对象)

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

 

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

代码:

 let obj = { name: "jack", ages: 18 }//目标元素
        let proxy = new Proxy(obj, {
            // grt 获取目标值
            get(target, name, value, proxy) {
                return target[name] + "hollow"
            },
            set(target, anme, value, proxy) {
                target[name] = value + "岁"
            },
            // 删除调用方法
            deleteProperty(target, name) {
                // 判断是否要删除
                if (confirm("你确定要删除咩")) {
                    delete target[name]
                }
            },
            // 判断是否已经被删除
            has(target, name) {
                return name in target
            }
        })


        // 调用 get
        console.log(proxy.name);
        // 调用set方法
        proxy.ages = 20;
        console.log(obj);
        // 调用 deleteProperty
        delete proxy.name;
        console.log(obj);
        // 调用has
        console.log(obj in proxy);

 

装饰者模式(不改变原来结构的同时,加强代码)

代码:

 <script>
        function Car(name) {
            this.run = function () {
                console.log(name + "车在跑");
            }
        }

        // 给车加链子
        function ChinCar(Car) {
            this.run = function () {
                console.log("快加油");
                Car.run()
            }
        }
        var ChinCar1 = new Car('小牛');
        var ChinCar2 = new Car("大牛");

        ChinCar1.run()
        ChinCar2.run()
    </script>

 

标签：function,数据结构,console,log,模式,new,设计模式,对应
来源： https://www.cnblogs.com/chang-yi/p/16417566.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有