我正在参加「启航方案」

前语

前俩天也是更新了俩篇 JavaScript 的文章,当时由于时刻问题,所以就是想到哪里写到哪里,由于关于技术文章只要三五句,几分钟就阅读完,属实无趣,这次趁着周六日有时刻好好收拾下,尽可量多写一些,下面有详细完成,还有详细注释

核算距离下次生日还有多少天

注意这儿凭借 moment 完成

    getBirthdayFun(){
       // 首要要获取到本年的生日
      let birthdayTime = moment().format('YYYY-') + '12-19'
      // 经过时刻戳  去判别当时的时刻戳是否大于本年生日的时刻戳 
      if (moment().unix() >= moment(birthdayTime).unix()) {
        // 假如大于的话,那么就在本年的生日上再添加一年,已达到获取下次生日的时刻
        birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
      }
      // 这个直接经过核算 (下次生日的时刻戳 - 当时日期的时刻戳) / (60 * 60 * 24) 最终求出来的就是 XX 天
      return parseInt(
        (moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
      )
    }

回到顶部

    // 这儿我把 vue3 的事例拿过来
    const bindTop = () => {
       // 办法一 这样能够完成,可是作用不太行
       window.scrollTo(0, 0)
       document.documentElement.scrollTop = 0;
      // 办法二 经过计时器去翻滚 视觉上会丝滑一些,没有太大的卡顿作用
      const timeTop = setInterval(() => {
        // 去操控他的滑行距离
        document.documentElement.scrollTop = scrollTopH.value -= 50
        // 当滑到顶部的时分记住清除计时器(*) 重点
        if (scrollTopH.value <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    }

仿制文本

    const copyText = (text) => {
        // clipboardData 在页面上将需求的东西仿制到剪贴板上
        const clipboardData = window.clipboardData
        if (clipboardData) {
          clipboardData.clearData()
          clipboardData.setData('Text', text)
          return true
        } else if (document.execCommand) {  // 注意 document.execCommand 已弃用 可是有些浏览器仍旧支撑 用的时分记住看兼容情况
          // 经过创建 dom 元素,去把要仿制的内容拿到 
          const el = document.createElement('textarea')
          el.value = text
          el.setAttribute('readonly', '')
          el.style.position = 'absolute'
          el.style.left = '-9999px'
          document.body.appendChild(el)
          el.select()
          // 复制当时内容到剪贴板
          document.execCommand('copy')
          // 删去 el 节点
          document.body.removeChild(el)
          return true
        }
        return false
      }
      copyText('hello!') // ctrl + v = copyText  | true

防抖/节省

简单介绍

  • 防抖:指定时刻内 频频触发一个事情,以最终一次触发为准
  • 节省:指定时刻内 频频触发一个事情,只会触发一次

应用场景有很多比如:

防抖是: input搜索,用户在不断输入内容的时分,用防抖来削减恳求的次数并且节约恳求资源

节省:场景遍及就是按钮点击,一秒点击 10 下会建议 10 次恳求,节省今后 1 秒点再屡次,都只会触发一次

下面我们来完成

    // 防抖
    // fn 需求防抖的函数,delay 为定时器时刻
    function debounce(fn,delay){
        let timer =  null // 用于保存定时器
        return function () { 
            // 假如timer存在 就清除定时器,重新计时
            if(timer){
                clearTimeout(timeout);
            }
            //设置定时器,规定时刻后履行真实要履行的函数
            timeout = setTimeout(() => {
               fn.apply(this);
            }, delay);
        }
    }
    // 节省
    function throttle(fn) {
      let timer = null; // 首要设定一个变量,没有履行定时器时,默认为 null
      return function () {
        if (timer) return; // 当定时器没有履行的时分timer永远是false,后边无需履行
        timer = setTimeout(() => {
          fn.apply(this, arguments);
           // 最终在setTimeout履行完毕后再把标记设置为true(关键)
           // 表示能够履行下一次循环了。
          timer = null;
        }, 1000);
      };
    }

过滤特殊字符

    function filterCharacter(str){
        // 首要设置一个模式
        let pattern = new RegExp("[`~!@#$^&*()=:”“'。,、?|{}':;'%,\[\].<>/?~!@#¥……&*()&;—|{ }【】‘;]")
        let resultStr = "";
        for (let i = 0; i < str.length; i++) {
            // 首要经过 replace ,pattern 规矩 去把字符替换成空 最终拼接在 resultStr
            resultStr = resultStr + str.substr(i, 1).replace(pattern, '');
        }
        // 当循环完毕的时分回来最终成果 resultStr
        return resultStr;
    }
    // 示例
    filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./[') // 成果:gyaskjdhy123167891123

常用正则判别

    // 校验2-9位文字 不符合为 false  符合为 true
    const validateName = (name) => {
      const reg = /^[u4e00-u9fa5]{2,9}$/;
      return reg.test(name);
    };
    // 校验手机号
    const validatePhoneNum = (mobile) => {
      const reg = /^1[3,4,5,6,7,8,9]d{9}$/;
      return reg.test(mobile);
    };
    // 校验6到18位大小写字母数字下划线组成的密码
    const validatePassword = (password) => {
      const reg = /^[a-zA-Z0-9_]{6,18}$/;
      return reg.test(password);
    };

初始化数组

    // fill()办法 是 es6新增的一个办法 使用指定的元素填充数组,其实就是用默认内容初始化数组
    const arrList = Array(6).fill()
    console.log(arrList)  // 此处打印的是 ['','','','','','']

将 RGB 转换为十六进制

    function getColorFun(r,g,b) {
       return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
    }
    getColorFun(178,232,55) // 这儿输出的是 #b2e837

检测是否是一个函数

    // 检测是否是一个函数  其实写法今后直接 isFunction 就好了,避免重复写判别
    const isFunction = (obj) => {
        return typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";
    };

检测是否为一个安全数组

  // 检测是否为一个安全数组,若不是回来空数组  这儿凭借isArray 办法
  const safeArray = (array) => {
    return Array.isArray(array) ? array : []
  }

检测目标是否为一个安全目标

    // 首要要去判别 当时目标是否为有用目标 
    const isVaildObject = (obj) => {
        return typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length
    }
    // 这儿直接用上面的函数 假如有用就回来本身,无效就回来空目标
    const safeObject = obj => isVaildObject(obj) ? obj : {}

最终

上面事例有些代码都是在我单独的 v3 项目里面,假如有需求能够重视我,然后找我要资料,或者需求面试题什么的也都能够找我,都有哈,上面文章假如有不清楚的地方,费事指出,期望对我们都能有必定程度的协助,谢谢支撑~