通用函数方法

最新推荐文章于 2022-03-16 08:20:00 发布

原创最新推荐文章于 2022-03-16 08:20:00 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#通用函数

js 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨JavaScript中对象冻结的方法，包括使用Object.freeze及自定义函数实现彻底冻结。同时，介绍了防抖(debounce)与节流(throttle)函数的实现原理及应用场景，如按钮提交、服务端验证、拖拽及动画控制。

对象冻结

想将对象冻结，应该使用**Object.freeze()**方法

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数：

let constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

防抖函数

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fn, delay) {

  // 定时器，用来 setTimeout
  let timer

  // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    let context = this
    let args = arguments

    // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

适用场景：
按钮提交场景：防止多次提交按钮，只执行最后提交的一次
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

节流函数

防抖函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

// 节流函数
const throttle = (fn, delay = 500) => {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

适用场景：

拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题

手机号码验证

function isPhone(tel) {
    var regx = /^1[34578]\d{9}$/;
    return regx.test(tel);
}

邮箱验证

function isEmail(email) {
    var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
    return regx.test(email);
}

身份证号码验证

function isCardNo(number) {
    var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return regx.test(number);
}