高效库+js工具函数

Guoyeting020
76 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

超高效的10个库

学习视频来源

Ant Design

--- react,企业级中后台系统

Ant Design of vue

--- 针对vue的ant ui库

uni-app

--- 跨端框架；只写一套代码能代用到所有框架里，很强大

imgcook

--- 由设计稿智能生成代码

animate.css

--- css动画库

vue.draggable

--- vue拖拽（可以看官网也可以参考别人的学习文章）

lodash

--- js 关于数据类型处理的封装函数 英文文档

swiper

--- 移动端的触摸滑动插件

day.js

--- 关于时间操作的js库

axios

--- 网络请求库

常用的js工具函数

防抖

防抖，简而言之，防止用户手‘帕金逊’，例如用户一直点击登录/搜索，一直发送请求，那么就会造成性能大打折扣，防抖作用就是在一定时间内只会执行一次请求。本质就是优化用户高频率事件。

<body>
    <!-- 防抖:在规定时间内每次触发都删除之前的定时器，建立新的定时器，只承认最后的一次触发 -->
    <input type="text">
    <button>搜索</button>
</body>
<script>
    const ipt = document.querySelector('input')
    const btn = document.querySelector('button')
    // 定义防抖函数
    let debounce = (() => {
        let timer = null;
        return (callback, time = 3000) => {
            // &&语法：第一个真才执行第二个
            timer && clearTimeout(timer)  // 在规定时间内重新触发事件：清除旧计时器建立新计时器
            timer = setTimeout(callback, time);
        }
    }
    )()   // debounce自执行，返回一个函数
    // 点击按钮触发事件
    btn.addEventListener('click', () => {
        // 用户点击搜索发送请求
        debounce(()=>{
            console.log(ipt.value)
        },2000)
    })
</script>

使用场景：

  • 登录，搜索等用户可能着急一直点击或点击过快，发送多次请求
  • 调整浏览器窗口，resize频繁，计算过多，则可以使用防抖
  • 搜索时候不用每输入一个字都发送请求，等最后输入完成再发送请求

节流

跟防抖不同就是：在规定时间内无论你发送多少次请求，我就是不理你，到点我就执行你最后一次的请求（像公交车到点才发车，不管你中间有多少人上车）

<body>
    <!-- 节流 -->
    <input type="text">
</body>
<script>
    const ipt = document.querySelector('input')
    // 定义节流方法
    const thorttle = (() => {
        let last = 0;  // 上次触发时间
        return (callback, time = 2000) => {
            let now = new Date()  // 现在时间
            if (now - last > time) {
                // 如果间隔时间 > 规定时间，触发callback，并设置last = now 
                callback()
                last = now
            }
        }
    })()
    // 输入框事件：不会实时输入发送请求（等输入完或一定间隔后才发送请求
    ipt.addEventListener('input', () => {
        thorttle(()=>{
            if(ipt.value == '') return
            console.log(ipt.value)
        },3000)
    })
</script>

使用场景：

  • scroll事件，如果一直滚动滚动条，利用节流，间隔一定时间才计算位置信息
  • input实时搜索发送请求显示下拉下单

大小写转换

<body>
    <h2></h2>
    <button>大写</button>
    <button>小写</button>
    <button>首字母大写</button>
</body>
<script>
    let str = 'Come on! You need to study!'
    document.querySelector('h2').innerHTML = str;
    const btns = document.querySelectorAll('button')
    // 定义大小写方法
    const toggleCase = (str, type) => {
        switch (type) {
            case 0:
                return str.toUpperCase()
            case 1:
                return str.toLowerCase()
            case 2:
                // substr(a,b)函数--a：start，b:end substr(1)-从下标1往后截取
                return str[0].toUpperCase() + str.substr(1).toLowerCase()
            default:
                return str
        }
    }
    btns.forEach((item, index) => {
        item.addEventListener('click', () => {
            str = toggleCase(str, index)
            document.querySelector('h2').innerHTML = str;

        })
    });
</script>

数组对象根据字段去重

主要针对对象数组的去重，根据唯一字段判断去重

<script>
    // 利用唯一值key来判断
    let uniqueArr = function (arr = [], key = 'id') {
        if (arr.length === 0) return;
        let result = []
        let map = {}  // 利用唯一值作为对象的属性存储，来判断是否重复
        arr.forEach(item => {
            // 如果当前 item 的 key 没有存在于map对象里的话就作为属性值加入进去
            // map = {1:{xxx},2:{xxx},3:{xxx}....}
            if (!map[item[key]]) {
                map[item[key]] = item
            }
        });
        // 把map对象转化为数组并返回
        result = Object.values(map)
        return result
    }
    let list = [
        { id: 1, name: '张三' },
        { id: 2, name: '李四', sex: '男' },
        { id: 3, name: '王六', age: 26 },
        { id: 1, name: '张三' },
        { id: 4, name: '李四', sex: '女' },
        { id: 2, name: '李四', sex: '男' },
        { id: 5, name: '赵三' },
        { id: 5, name: '赵三' }
    ]
    console.log(uniqueArr(list,'id'))
</script>

image.png

检验数据类型

主要针对object 具体类型检验

<script>
    const checkType = function (obj) {
        let result = typeof (obj)   // 检验不了引用数据类型，Null
        if (result !== 'object') return result

        // 如果是object，利用tostring方法，截取后面具体类型并返回
        return Object.prototype.toString.call(obj).slice(8, -1)
    }
    console.log(checkType([]))
    console.log(checkType({}))
    console.log(checkType(123))
    console.log(checkType('123'))
    console.log(checkType(null))
    console.log(checkType(undefined))
    console.log(checkType(checkType))
    console.log(checkType(false))

    console.log(typeof(null))  // object

</script>

image.png

参考文章

回到顶部

<body>
    <div class="box">
        我是内容
    </div>
    <button>回到顶部吧</button>
</body>
<script>
    // 获取按钮
    let btn = document.querySelector('button')

    // 定义方法
    const rollToTop = () => {
        // 获取滚动条高度
        let h = document.documentElement.scrollTop || document.boby.scrollTop
        if (h >= 30) {
            // 每次页面重绘重新触发rollToTop方法
            window.requestAnimationFrame(rollToTop)
            // 滚动到对应坐标
            // window.scrollTop(0,0)  // 回到顶部
            window.scrollTo(0, h - h / 2)  // 一点点往上滚动回到顶部，使过渡有动画效果
        }
    }

    // 添加事件
    btn.addEventListener('click',rollToTop)

滚动到对应位置

关于 scrollIntoView 学习

<body>
    <div class="box">内容1</div>
    <h2>TITLE</h2>
    <div class="box">内容2</div>
    <button>回到标题</button>
</body>
<script>
    const scrollEle = (ele) => {
        /*获取对应元素，调用scrollIntoView
        scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域;behavior:过渡动画平滑
        */
        document.querySelector(ele).scrollIntoView({ behavior: 'smooth' })
    }
    document.querySelector('button').addEventListener('click', () => {
        // 按钮点击事件：回到对应位置
        scrollEle('h2')
    })
</script>

获取当前时间

很棒的参考文献

<script>
    function getDate(date = new Date()) {
        // 获取年\月\日
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        // 如果月份是1-9，前面加'0'
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        // 如果日期是1-9，前面加'0'
        d = d < 10 ? '0' + d : d
        let h = date.getHours()
        let min = date.getMinutes()
        let s = date.getSeconds()

        let week = ['日', '一', '二', '三', '四', '五', '六'];  // gatday() --- 0 代表周日
        let mm = date.getMonth()
        // 获取第一天，最后一天详细信息
        let firstDay = new Date(y, mm, 1)
        // 反推法 mm + 1 = 下个月，0 代表往前走一天，例如：当月是11月，那么12\1往前一天就是11月最后一天了
        let lastDay = new Date(y, mm + 1, 0)
        console.log(firstDay, lastDay)  // Thu Dec 01 2022 00:00:00 GMT+0800 (中国标准时间) Sat Dec 31 2022 00:00:00 GMT+0800 (中国标准时间)

        return `现在时间是${y}\\${m}\\${d} ${h}:${min}:${s},本月有${lastDay.getDate()}天，第一天是星期${week[firstDay.getDay()]}，最后一天是星期${week[lastDay.getDay()]}`

    }
    console.log(getDate())
    // 现在时间是2022\12\08 15:13:20,本月有31天，第一天是星期四，最后一天是星期六
</script>

模糊查询

<body>
    <input type="text">
    <button>search</button>

</body>
<script>
    const list = [
        { id: 1, name: '张三' },
        { id: 1, name: '李四' },
        { id: 1, name: '王六', age: 26 },
        { id: 1, name: '张三封' },
        { id: 1, name: '张三五' },
        { id: 1, name: '赵三' },
        { id: 1, name: '李白', sex: '男' },
    ]
    const txt = document.querySelector('input')
    const btn = document.querySelector('button')

    // 模糊搜索
    const fuzzySearch = (list, keyword, attr = "name") => {
        // 定义正则匹配
        const reg = new RegExp(keyword)
        // 定义空数组放结果
        let resultArr = []
        // 列表循环查找
        list.forEach(item => {
            if (reg.test(item[attr])) {
                // 列表指定字段里有关键词则添加到结果数组里
                resultArr.push(item)
            }
        });
        return resultArr ? resultArr : '没有搜索内容喔！'

    }
    // 点击搜索
    btn.addEventListener('click', () => {
        console.log(fuzzySearch(list, txt.value, 'name'))
    })
</script>
avatar
文章
阅读
粉丝