学习axios的防抖节流和开启webpack的学习（Day：17）

任务；学习axios和webpack

1、本地实现防抖

防抖节流参考链接： https://juejin.cn/post/7270532002733228068

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖test</title>
</head>
<body>
    <div class="box">
        输入事件进行防抖处理：<input type="text" id="demo" name="demo">
    </div>

    <script>
        // //模拟请求
        // function req(value){
        //     console.warn("request:" + value + ", time:" + new Date());
        // }
        //  const inputBox = document.getElementById("demo");
        //     inputBox.addEventListener("keyup", e => {
        //         req(e.target.value);
        //     })
         // 模拟请求
            function req(value) {
                console.warn("request: " + value + ", time: " + new Date());
            }

            const inputBox = document.getElementById("demo");
            inputBox.addEventListener("keyup", e => {
                debounce(() => req(e.target.value), 500);
            })

            /**
     * @desc 防抖函数：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
     * @param {Function} func 函数
     * @param {Number} wait 延迟执行毫秒数
     * @param {Boolean} immediate true 表示立即执行，false 表示非立即执行
     */
            let timeout

            function debounce(func, wait = 500, immediate = false) {
                    // 清除定时器
                    if (timeout) clearTimeout(timeout)
                    // 立即执行，此类情况一般用不到
                    if (immediate) {
                        let callNow = !timeout
                        timeout = setTimeout(() => {
                            timeout = null
                        }, wait)
                        if (callNow) typeof func === 'function' && func()
                    } else {
                        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
                        timeout = setTimeout(() => {
                            typeof func === 'function' && func()
                        }, wait)
                    }
                }
    </script>
</body>
</html>

2、节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>
<button id="demo" style="margin: 50px;">点击按钮</button></button>
<body>
    <script>
        //未优化前的节流函数
        // let value = 1
        // // 模拟请求
        // function req() {
        //     console.warn("request: " + value++ + ", time: " + new Date());
        // }
        // const ele = document.getElementById("demo");
        // ele.addEventListener("click", (e) => {
        //     req()
        // });
        let value = 1
            // 模拟请求
            function req() {
                console.warn("request: " + value++ + ", time: " + new Date());
            }
            const ele = document.getElementById("demo");
            ele.addEventListener("click", (e) => {
                throttle(() => req(), 1000)
            });
        /**
     * @desc 节流函数：在一定时间内，只能触发一次
     * @param {Function} func 函数
     * @param {Number} wait 延迟执行毫秒数
     */
            let previous = 0
            function throttle(func, wait = 500) {
                let now = Date.now()
                if (now - previous > wait) {
                    typeof func === 'function' && func()
                    previous = now
                }
            }  

    </script>

</body>
</html>

3、学些webpack，目前把管理资源部分看完了

安装官网一步一步模拟练习 index.js

import _ from 'lodash';
import './style.css'
import Icon from './xzq.JPG';
import Data from './data.xml';
import Notes from './data.csv';

function component() {
    const element = document.createElement('div');

   //lodash 现在使用 import 引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    // 将图像添加到已经存在的 div 中。
    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    console.log(Data);
    console.log(Notes);

    return element;
}

document.body.appendChild(component());

css部分

@font-face {
    font-family: 'MyFont';
    src: url('./my-font.woff2') format('woff2'),
        url('./my-font.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
.hello {
    color: red;
    font-family: 'MyFont';
    background: url('./xzq.JPG');
}

这里是做的按照他官网的方式实现管理资源

明天会继续学习这个webpack的部分

XJQ124 / Some-notes

学习axios的防抖节流和开启webpack的学习（Day：17） #21

任务；学习axios和webpack

1、本地实现防抖

2、节流

3、学些webpack，目前把管理资源部分看完了