防抖-节流-深拷贝-事件总线

一、防抖与节流

1.认识防抖与节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中

  • 而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
  • 而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。

但是很多前端开发者面对这两个功能，有点摸不着头脑：

  • 某些开发者根本无法区分防抖和节流有什么区别（面试经常会被问到）；
  • 某些开发者可以区分，但是不知道如何应用；
  • 某些开发者会通过一些第三方库来使用，但是不知道内部原理，更不会编写；

接下来我们会一起来学习防抖和节流函数：

  • 我们不仅仅要区分清楚防抖和节流两者的区别，也要明白在实际工作中哪些场景会用到；
  • 并且我会带着大家一点点来编写一个自己的防抖和节流的函数，不仅理解原理，也学会自己来编写；

2.认识防抖debounce函数

我们用一副图来理解一下它的过程：

  • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
  • 当事件密集触发时，函数的触发会被频繁的推迟；
  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

在这里插入图片描述

防抖的应用场景很多：

  • 输入框中频繁的输入内容，搜索或者提交信息；

  • 频繁的点击按钮，触发某个事件；

  • 监听浏览器滚动事件，完成某些特定操作；

  • 用户缩放浏览器的resize事件；

3.防抖函数的案例

我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：

比如想要搜索一个MacBook：

  • 当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
  • 当继续输入ma时，再次发送网络请求；
  • 那么macbook一共需要发送7次网络请求；
  • 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

但是我们需要这么多次的网络请求吗？

  • 不需要，正确的做法应该是在合适的情况下再发送网络请求；
  • 比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
  • 比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
  • 也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

4.认识节流throttle函数

我们用一副图来理解一下节流的过程

  • 当事件触发时，会执行这个事件的响应函数；
  • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
  • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

在这里插入图片描述

节流的应用场景：

  • 监听页面的滚动事件；
  • 鼠标移动事件；
  • 用户频繁点击按钮操作；
  • 游戏中的一些设计；

5.节流函数的应用场景

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中，我们按下空格会发射一个子弹：

  • 很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
  • 比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
  • 但是事件是触发了10次的，响应的函数只触发了一次；

二、Underscore库

1.Underscore库的介绍

事实上我们可以通过一些第三方库来实现防抖操作：

  • lodash
  • underscore

这里使用underscore

  • 我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；
  • 但是目前我看到underscore还在维护，lodash已经很久没有更新了；

Underscore的官网： https://underscorejs.org/

Underscore的安装有很多种方式：

  • 下载Underscore，本地引入；
  • 通过CDN直接引入；
  • 通过包管理工具（npm）管理安装；

这里我们直接通过CDN：

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

2.Underscore实现防抖和节流

<!-- CDN引入: 网络的js文件 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js"></script> -->
<!-- 本地引入: 下载js文件, 并且本地引入 -->
<script src="./js/underscore.js"></script>
<script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

// 2.监听input元素的输入
// let counter = 1
// inputEl.oninput = function() {
//   console.log(`发送网络请求${counter++}:`, this.value)
// }

// 3.防抖处理代码
let counter = 1
inputEl.oninput = _.debounce(function() {
    console.log(`发送网络请求${counter++}:`, this.value)
}, 3000)
// 4.节流处理
inputEl.oninput = _.throttle(function() {
    console.log(`发送网络请求${counter++}:`, this.value)
}, 3000)
</script>

三、自定义防抖和节流函数

1.自定义防抖函数

我们按照如下思路来实现：

  • 防抖基本功能实现：可以实现防抖效果
  • 优化一：优化参数和this指向
  • 优化二：优化取消操作（增加取消功能）
  • 优化三：优化立即执行效果（第一次立即执行）
  • 优化四：优化返回值

防抖功能基本实现

function debounce(fn, delay) {
    // 1.用于记录上一次事件触发的timer
    let timer = null

    // 2.触发事件时执行的函数
    const _debounce = () => {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
            fn()
            timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
    }

    // 返回一个新的函数
    return _debounce
}

this和参数绑定

function debounce(fn, delay) {
    // 1.用于记录上一次事件触发的timer
    let timer = null

    // 2.触发事件时执行的函数
    const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
    }

    // 返回一个新的函数
    return _debounce
}

3.取消功能实现

function debounce(fn, delay) {
    // 1.用于记录上一次事件触发的timer
    let timer = null

    // 2.触发事件时执行的函数
    const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
    }

    // 3.给_debounce绑定一个取消的函数
    _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
    }

    // 返回一个新的函数
    return _debounce
}

立即执行功能

// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态

function debounce(fn, delay, immediate = false) {
    // 1.用于记录上一次事件触发的timer
    let timer = null
    let isInvoke = false

    // 2.触发事件时执行的函数
    const _debounce = function(...args) {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 第一次操作是不需要延迟
        if (immediate && !isInvoke) {
            fn.apply(this, args)
            isInvoke = true
            return
        }

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null // 执行过函数之后, 将timer重新置null
            isInvoke = false
        }, delay);
    }

    // 3.给_debounce绑定一个取消的函数
    _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
    }

    // 返回一个新的函数
    return _debounce
}

获取返回值

// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态

function debounce(fn, delay, immediate = false, resultCallback) {
    // 1.用于记录上一次事件触发的timer
    let timer = null
    let isInvoke = false

    // 2.触发事件时执行的函数
    const _debounce = function(...args) {
        return new Promise((resolve, reject) => {
            try {
                // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
                if (timer) clearTimeout(timer)

                // 第一次操作是不需要延迟
                let res = undefined
                if (immediate && !isInvoke) {
                    res = fn.apply(this, args)
                    if (resultCallback) resultCallback(res)
                    resolve(res)
                    isInvoke = true
                    return
                }

                // 2.2.延迟去执行对应的fn函数(传入的回调函数)
                timer = setTimeout(() => {
                    res = fn.apply(this, args)
                    if (resultCallback) resultCallback(res)
                    resolve(res)
                    timer = null // 执行过函数之后, 将timer重新置null
                    isInvoke = false
                }, delay);
            } catch (error) {
                reject(error)
            }
        })
    }

    // 3.给_debounce绑定一个取消的函数
    _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
    }

    // 返回一个新的函数
    return _debounce
}

2.自定义节流函数

我们按照如下思路来实现：

  • 节流函数的基本实现：可以实现节流效果
  • 优化一：节流最后一次也可以执行
  • 优化二：优化添加取消功能
  • 优化三：优化返回值问题

节流函数的基本实现

function throttle(fn, interval) {
    let startTime = 0

    const _throttle = function() {
        const nowTime = new Date().getTime()
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
            fn()
            startTime = nowTime
        }
    }

    return _throttle
}

this和参数绑定

function throttle(fn, interval) {
    let startTime = 0

    const _throttle = function(...args) {
        const nowTime = new Date().getTime()
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
            fn.apply(this, args)
            startTime = nowTime
        }
    }

    return _throttle
}

立即执行控制

function throttle(fn, interval, leading = true) {
    let startTime = 0

    const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
            startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
            fn.apply(this, args)
            startTime = nowTime
        }
    }

    return _throttle
}

尾部执行控制

function throttle(fn, interval, { leading = true, trailing = false } = {}) {
    let startTime = 0
    let timer = null

    const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
            startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
            // console.log("执行操作fn")
            if (timer) clearTimeout(timer)
            fn.apply(this, args)
            startTime = nowTime
            timer = null
            return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
            timer = setTimeout(() => {
                // console.log("执行timer")
                fn.apply(this, args)
                startTime = new Date().getTime()
                timer = null
            }, waitTime);
        }
    }

    return _throttle
}

取消功能实现

function throttle(fn, interval, { leading = true, trailing = false } = {}) {
    let startTime = 0
    let timer = null

    const _throttle = function(...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 对立即执行进行控制
        if (!leading && startTime === 0) {
            startTime = nowTime
        }

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
            // console.log("执行操作fn")
            if (timer) clearTimeout(timer)
            fn.apply(this, args)
            startTime = nowTime
            timer = null
            return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
            timer = setTimeout(() => {
                // console.log("执行timer")
                fn.apply(this, args)
                startTime = new Date().getTime()
                timer = null
            }, waitTime);
        }
    }

    _throttle.cancel = function() {
        if (timer) clearTimeout(timer)
        startTime = 0
        timer = null
    }

    return _throttle
}

获取返回值

function throttle(fn, interval, { leading = true, trailing = false } = {}) {
    let startTime = 0
    let timer = null

    const _throttle = function(...args) {
        return new Promise((resolve, reject) => {
            try {
                // 1.获取当前时间
                const nowTime = new Date().getTime()

                // 对立即执行进行控制
                if (!leading && startTime === 0) {
                    startTime = nowTime
                }

                // 2.计算需要等待的时间执行函数
                const waitTime = interval - (nowTime - startTime)
                if (waitTime <= 0) {
                    // console.log("执行操作fn")
                    if (timer) clearTimeout(timer)
                    const res = fn.apply(this, args)
                    resolve(res)
                    startTime = nowTime
                    timer = null
                    return
                } 

                // 3.判断是否需要执行尾部
                if (trailing && !timer) {
                    timer = setTimeout(() => {
                        // console.log("执行timer")
                        const res = fn.apply(this, args)
                        resolve(res)
                        startTime = new Date().getTime()
                        timer = null
                    }, waitTime);
                }
            } catch (error) {
                reject(error)
            }
        })
    }

    _throttle.cancel = function() {
        if (timer) clearTimeout(timer)
        startTime = 0
        timer = null
    }

    return _throttle
}

四、自定义深浅拷贝函数

前面我们已经学习了对象相互赋值的一些关系，分别包括：

  • 引入的赋值：指向同一个对象，相互之间会影响；
  • 对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响；
  • 对象的深拷贝：两个对象不再有任何关系，不会相互影响；

前面我们已经可以通过一种方法来实现深拷贝了：JSON.parse

  • 这种深拷贝的方式其实对于函数、Symbol等是无法处理的；
  • 并且如果存在对象的循环引用，也会报错的；

自定义深拷贝函数：

  1. 自定义深拷贝的基本功能；

  2. 对Symbol的key进行处理；

  3. 其他数据类型的值进程处理：数组、函数、Symbol、Set、Map；

  4. 对循环引用的处理；

引用赋值关系

console.log(window.window === window)

const info = {
    name: "why",
    age: 18,
    friend: {
        name: "kobe"
    },
    running: function() {},
    [Symbol()]: "abc",
    // obj: info
}
info.obj = info

// 1.操作一: 引用赋值
// const obj1 = info

// 2.操作二: 浅拷贝
// const obj2 = { ...info }
// // obj2.name = "james"
// // obj2.friend.name = "james"
// // console.log(info.friend.name)

// const obj3 = Object.assign({}, info)
// // obj3.name = "curry"
// obj3.friend.name = "curry"
// console.log(info.friend.name)

// 3.操作三: 深拷贝
// 3.1.JSON方法
// const obj4 = JSON.parse(JSON.stringify(info))
// info.friend.name = "curry"
// console.log(obj4.friend.name)
// console.log(obj4)

// 3.2.自己编写一个深拷贝函数(第三方库)

深拷贝函数基本功能

 // 深拷贝函数
function deepCopy(originValue) {
    // 1.如果是原始类型, 直接返回
    if (!isObject(originValue)) {
        return originValue
    }

    // 2.如果是对象类型, 才需要创建对象
    const newObj = {}
    for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
    }
    return newObj
}
// 需求: 判断一个标识符是否是对象类型
function isObject(value) {
  // null,object,function,array
  // null -> object
  // function -> function -> true
  // object/array -> object -> true
  const valueType = typeof value
  return (value !== null) && ( valueType === "object" || valueType === "function" )
}

数组拷贝

// 深拷贝函数
function deepCopy(originValue) {
    // 1.如果是原始类型, 直接返回
    if (!isObject(originValue)) {
        return originValue
    }

    // 2.如果是对象类型, 才需要创建对象
    const newObj = Array.isArray(originValue) ? []: {}
    for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
    }
    return newObj
}

其它类型

// 深拷贝函数
function deepCopy(originValue) {
    // 0.如果值是Symbol的类型
    if (typeof originValue === "symbol") {
        return Symbol(originValue.description)
    }

    // 1.如果是原始类型, 直接返回
    if (!isObject(originValue)) {
        return originValue
    }

    // 2.如果是set类型
    if (originValue instanceof Set) {
        const newSet = new Set()
        for (const setItem of originValue) {
            newSet.add(deepCopy(setItem))
        }
        return newSet
    }

    // 3.如果是函数function类型, 不需要进行深拷贝
    if (typeof originValue === "function") {
        return originValue
    }

    // 2.如果是对象类型, 才需要创建对象
    const newObj = Array.isArray(originValue) ? []: {}
    // 遍历普通的key
    for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key]);
    }
    // 单独遍历symbol
    const symbolKeys = Object.getOwnPropertySymbols(originValue)
    for (const symbolKey of symbolKeys) {
        newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey])
    }

    return newObj
}

循环引用

// 深拷贝函数
// let map = new WeakMap()
function deepCopy(originValue, map = new WeakMap()) {
    // const map = new WeakMap()

    // 0.如果值是Symbol的类型
    if (typeof originValue === "symbol") {
        return Symbol(originValue.description)
    }

    // 1.如果是原始类型, 直接返回
    if (!isObject(originValue)) {
        return originValue
    }

    // 2.如果是set类型
    if (originValue instanceof Set) {
        const newSet = new Set()
        for (const setItem of originValue) {
            newSet.add(deepCopy(setItem))
        }
        return newSet
    }

    // 3.如果是函数function类型, 不需要进行深拷贝
    if (typeof originValue === "function") {
        return originValue
    }

    // 4.如果是对象类型, 才需要创建对象
    if (map.get(originValue)) {
        return map.get(originValue)
    }
    const newObj = Array.isArray(originValue) ? []: {}
    map.set(originValue, newObj)
    // 遍历普通的key
    for (const key in originValue) {
        newObj[key] = deepCopy(originValue[key], map);
    }
    // 单独遍历symbol
    const symbolKeys = Object.getOwnPropertySymbols(originValue)
    for (const symbolKey of symbolKeys) {
        newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map)
    }

    return newObj
}

五、自定义事件总线

自定义事件总线属于一种观察者模式，其中包括三个角色：

  • 发布者（Publisher）：发出事件（Event）；
  • 订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；
  • 事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；

当然我们可以选择一些第三方的库：

  • Vue2默认是带有事件总线的功能；
  • Vue3中推荐一些第三方库，比如mitt；

当然我们也可以实现自己的事件总线：

  • 事件的监听方法on；
  • 事件的发射方法emit；
  • 事件的取消监听off；
// 类EventBus -> 事件总线对象
class HYEventBus {
    constructor() {
        this.eventMap = {}
    }

    on(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) {
            eventFns = []
            this.eventMap[eventName] = eventFns
        }
        eventFns.push(eventFn)
    }

    off(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        for (let i = 0; i < eventFns.length; i++) {
            const fn = eventFns[i]
            if (fn === eventFn) {
                eventFns.splice(i, 1)
                break
            }
        }

        // 如果eventFns已经清空了
        if (eventFns.length === 0) {
            delete this.eventMap[eventName]
        }
    }

    emit(eventName, ...args) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        eventFns.forEach(fn => {
            fn(...args)
        })
    }
}


// 使用过程
const eventBus = new HYEventBus()

// aside.vue组件中监听事件
eventBus.on("navclick", (name, age, height) => {
    console.log("navclick listener 01", name, age, height)
})

const click =  () => {
    console.log("navclick listener 02")
}
eventBus.on("navclick", click)

setTimeout(() => {
    eventBus.off("navclick", click)
}, 5000);

eventBus.on("asideclick", () => {
    console.log("asideclick listener")
})


// nav.vue
const navBtnEl = document.querySelector(".nav-btn")
navBtnEl.onclick = function() {
    console.log("自己监听到")
    eventBus.emit("navclick", "why", 18, 1.88)
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/157958.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL使用Xtrabackup恢复全量备份

MySQL使用Xtrabackup恢复全量备份

1、下载之前的备份的全量压缩包 我使用的是备份到AWS存储桶,实验删数数据之前&#xff0c;我做了一次全量备份。 1.1 解压加密的压缩包到指定的目录 由于备份使用的是加密压缩包&#xff0c;现在解压也要用密码解压 解压格式&#xff1a; openssl enc -aes-256-cbc -d -p…
阅读更多...
免费！IDEA插件推荐：Apipost-Helper

免费！IDEA插件推荐：Apipost-Helper

今天给大家推荐一款IDEA插件&#xff1a;Apipost-Helper-2.0&#xff0c;写完代码IDEA内一键生成API文档&#xff0c;无需安装、打开任何其他软件&#xff1b;写完代码IDEA内一键调试&#xff0c;无需安装、打开任何其他软件&#xff1b;生成API目录树&#xff0c;双击即可快速…
阅读更多...
15项基本SCADA技术技能

15项基本SCADA技术技能

1. 人机界面 人机界面是将操作员连接到设备、系统或机器的仪表板或用户界面。 以下是 hmi 在 scada 技术人员简历中的使用方式&#xff1a; 完成了查尔斯湖废水处理厂和提升站的完整 HMI 图形界面。对加油系统、加油车、PLC、HMI、触摸屏进行故障排除和维修。对 Horner HMI …
阅读更多...
初识Scrapy：Python中的网页抓取神器

初识Scrapy：Python中的网页抓取神器

Scrapy是一个基于Python的快速、高层次的屏幕抓取和web抓取框架&#xff0c;用于抓取web站点并从页面中提取结构化的数据。它广泛应用于数据挖掘、监测和自动化测试等领域。Scrapy的强大之处在于它是一个框架&#xff0c;可以根据实际需求进行修改和扩展。 Scrapy的主要特点 …
阅读更多...
1.rk3588的yolov5运行：pt_onnx_rknn转换及rknn在rk3588系统python运行

1.rk3588的yolov5运行：pt_onnx_rknn转换及rknn在rk3588系统python运行

自己有点笨&#xff0c;查资料查了一周才完美的实现了yolov5在rk3588环境下的运行&#xff0c;在这里写具体步骤希望大家少走弯路。具体步骤如下&#xff1a; 一、yolov5的原代码下载及pt文件转换为onnx文件 1.yolov5的原代码下载及环境搭建 在这里一定要下载正确版本的源代码…
阅读更多...
国家药品价格查询官网-在线网站查询方法

国家药品价格查询官网-在线网站查询方法

查询药品上市价格对于个人和机构来说都是非常有必要的&#xff0c;对个人可以很好的验证该药品是否存在虚高的情况&#xff0c;对药企来说可以根据同类药品市场价格指导自产药品的定价&#xff0c;对其它机构来说了解药品价格可以帮助选择价格合理的药品供应商&#xff0c;降低…
阅读更多...
upload-labs关卡10(点和空格绕过)通关思路

upload-labs关卡10(点和空格绕过)通关思路

文章目录 前言一、回顾前几关知识点二、靶场第十关通关思路1、看源代码2、bp抓包绕过3、检查文件是否成功上传 总结 前言 此文章只用于学习和反思巩固文件上传漏洞知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随意去尚未授权的网站做渗透测…
阅读更多...
轻松搭建短域名短链接服务系统，可选权限认证，并自动生成证书认证把nginx的http访问转换为https加密访问，完整步骤和代码

轻松搭建短域名短链接服务系统，可选权限认证，并自动生成证书认证把nginx的http访问转换为https加密访问，完整步骤和代码

轻松搭建短域名短链接服务系统&#xff0c;可选权限认证&#xff0c;并自动生成证书认证把nginx的http访问转换为https加密访问&#xff0c;完整步骤和代码。 在互联网信息爆炸的时代&#xff0c;网址复杂而冗长&#xff0c;很难在口头告知他人&#xff0c;也难以分享到社交媒体…
阅读更多...
快速搭建本地的chatgpt

快速搭建本地的chatgpt

快速搭建本地的chatgpt 参考&#xff1a;一篇文章教你使用Docker本地化部署Chatgpt&#xff08;非api&#xff0c;速度非常快&#xff01;&#xff01;&#xff01;&#xff09;及裸连GPT的方式&#xff08;告别镜像GPT&#xff09;-CSDN博客 前提是linux下 已安装docker 命…
阅读更多...
基于SpringBoot的SSMP整合案例（消息一致性处理与表现层开发）

基于SpringBoot的SSMP整合案例（消息一致性处理与表现层开发）

消息一致性处理 在后端执行完相应的操作后&#xff0c;我们需要将执行操作后的结果与数据返回前端&#xff0c;前端 调用我们传回去的数据&#xff0c;前端是如何知道我们传回去的数据名称的&#xff1f; 答&#xff1a;前后端遵循了同一个"协议"。这个协议就是定义…
阅读更多...
深度学习_14_单层|多层感知机及代码实现

深度学习_14_单层|多层感知机及代码实现

单层感知机&#xff1a; 功能&#xff1a; 能完成二分类问题 问题&#xff1a; 模型训练采用X*W b训练出模型&#xff0c;对数据只进行了一层处理&#xff0c;也就是说训练出来的模型仅是个线性模型&#xff0c;它无法解决XOR问题&#xff0c;所以模型在训练效果上&#xf…
阅读更多...
竞赛 题目：基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

竞赛 题目：基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

文章目录 1 简介2 传统机器视觉的手势检测2.1 轮廓检测法2.2 算法结果2.3 整体代码实现2.3.1 算法流程 3 深度学习方法做手势识别3.1 经典的卷积神经网络3.2 YOLO系列3.3 SSD3.4 实现步骤3.4.1 数据集3.4.2 图像预处理3.4.3 构建卷积神经网络结构3.4.4 实验训练过程及结果 3.5 …
阅读更多...
torch - 张量Tensor常见的形式

torch - 张量Tensor常见的形式

1.Scalar 通常就是一个数值 x tensor(42.) 输出x&#xff1a; 2.Vector 特征向量 例如&#xff1a;[-5., 2., 0.]在深度学习中通常表示特征&#xff0c;如词向量特征&#xff0c;某一维度特征等 3.Matrix 一般计算的都是矩阵&#xff0c;通常都是多维的。 可以做矩阵的…
阅读更多...
MySQL优化的底层逻辑

MySQL优化的底层逻辑

文章目录 前言索引的底层结构数据与索引的关系聚簇索引的数据存储普通索引的数据存储 索引的命中逻辑怎么理解索引失效总结 前言 去年刚开始写博客的时候写了一篇《MySQL性能调优参考》&#xff0c;文章中提到优化的几个技巧&#xff0c;比如数据类型的使用、范式和反范式的合…
阅读更多...
CI/CD --git版本控制系统

CI/CD --git版本控制系统

目录 一、git简介 二、git使用 三、github远程代码仓库 一、git简介 Git特点&#xff1a; 速度简单的设计对非线性开发模式的强力支持&#xff08;允许成千上万个并行开发的分支&#xff09;完全分布式有能力高效管理类似 Linux 内核一样的超大规模项目&#xff08;速度和数…
阅读更多...
【C++学习手札】模拟实现vector

【C++学习手札】模拟实现vector

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;くちなしの言葉—みゆな 0:37━━━━━━️&#x1f49f;──────── 5:28 &#x1f504; ◀️ ⏸ ▶️ ☰…
阅读更多...
微信小程序Error: ENOENT: no such file

微信小程序Error: ENOENT: no such file

问题描述 当编译的时候 会提示找不到这个文件&#xff08;index&#xff09;&#xff0c;但是确信项目目录里已经删除了该页面路径&#xff0c;并且app.json的pages列表中也 导致这个问题应该是&#xff1a;新添加了文件&#xff0c;后面删除了或者修改了文件名&#xff0c;导…
阅读更多...
MySQL初始化报错。VCRUNTIME140_1.dll缺失

MySQL初始化报错。VCRUNTIME140_1.dll缺失

从自己电脑内搜索此dll&#xff0c;粘贴到服务器的以下位置即可。
阅读更多...
电路综合-基于简化实频的集总参数电路匹配3-将任意阻抗用集总参数匹配至归一化阻抗

电路综合-基于简化实频的集总参数电路匹配3-将任意阻抗用集总参数匹配至归一化阻抗

电路综合-基于简化实频的集总参数电路匹配3-将任意阻抗用集总参数匹配至归一化阻抗 前面的相关理论&#xff1a; 电路综合-基于简化实频的集总参数电路匹配1 电路综合-基于简化实频的集总参数电路匹配2-得出解析解并综合 理论这两个已经介绍过了&#xff0c;直接给出案例 代码…
阅读更多...
「Verilog学习笔记」实现3-8译码器①

「Verilog学习笔记」实现3-8译码器①

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 ① 本题要求根据38译码器的功能表实现该电路&#xff0c;同时要求采用基础逻辑门实现&#xff0c;那么就需要将功能表转换为逻辑表达式。 timescale 1ns/1nsmodule d…
阅读更多...
最新文章

Copyright @ 2022~2023