JS-实现的各类函数工具库

作者: coderhzc | 来源:发表于2022-04-12 14:06 被阅读0次

一.函数的防抖:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        没有防抖: <input type="text" class="cur">
    </p>

    <p>
        有防抖: <input type="text" class="debounce">
    </p>
    <script>
        // 函数防抖和节流

        // 函数防抖: 在开发当中 经常会遇到一些事件频繁的触发 比如说: 鼠标事件,scroll,resize,input 等等
        // 在事件触发N秒后执行一次
        // 不防抖
        var input = document.querySelector(".cur")
        input.addEventListener('keyup', function() {
            console.log("拉取服务器的数据");
        })


        // 防抖函数 (闭包)
        // 这个就就叫做闭包
        var input1 = document.querySelector('.debounce');

        function debounce(callBack, time) {
            // 声明一个变量,统计延期个数
            let timer;
            return function() {
                if (timer) clearInterval(timer)
                timer = setTimeout(callBack, time)
            }
        }
        // N秒后执行的函数
        function handler() {
            console.log(121321313);

        }
        // 绑定事件
        input1.addEventListener('keyup', debounce(handler, 1000))
    </script>
</body>

</html>

二. 节流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
   应用场景: 比如当你点击按钮按钮100次的时候,你只希望提交一次 那么就可以用一下的代码
 -->

<body>
    <button>单击按钮</button>
    <script>
        // 节流: 在N秒内函数执行一次
        var btn = document.querySelector('button')

        function throttle(callBack, time) {
            // 锁头
            var lock = true;
            return function() {
                if (lock) {
                    lock = false
                    setTimeout(() => {
                        lock = true
                        callBack()
                    }, time)
                }
            }
        }

        function handler() {
            console.log("提交数据");
        }
        btn.addEventListener("click", throttle(handler, 1000))
    </script>
</body>

</html>

三. 对象的深拷贝

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /**
     *  forEach
     *  map
     *  filter
     *  reduce
     *  reduceRight
     *  every
     *  some
     *  deepClone
     * **/

    对象的深拷贝
    const obj = {
      name: "huzhenchu",
      age: 28,
      job: "前端开发",
      say:function() {
        console.log("我会说话");
      },
      info: {
        field: ['JS', "CSS", "JavaScript"],
        frameWork: ["React", "Vue", "Angular"],
        student: [
          {
            name: "zhangsan",
            age: 18
          },
          {
            name: "lisi",
            age: 20
          },
        ]
      },
      hobby: ["pinao", "trenen"]
    }
    
    // 数组的拷贝
    const obj = [
      {
        name: "zhangsan",
        age: 18
      },
      {
        name: "lisi",
        age: 20
      },
    ]

    function deepClone(origin, target) {
      var tar = target || {};
      var toStr = Object.prototype.toString;
      for (var k in origin) {
        if (origin.hasOwnProperty(k)) {
          if (typeof origin[k] === 'object' && origin[k] !== null) {
            tar[k] = toStr.call(origin[k]) === '[object Array]' ? [] : {}
            deepClone(origin[k], tar[k]); // 递归函数
          } else {
            tar[k] = origin[k];
          }
        }
      }
      return tar
    }

    var newObj = deepClone(obj)
    console.log(newObj);



  </script>
</body>

</html>

对象的实际截图:

image.png

数组的实际截图:

image.png

四. JS 获取当前时间格式化和倒计时

        //时间案例
        function getNewYear() {
            var date = new Date();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
            var year = date.getFullYear(); //获取到的是当年的年份
            var month = date.getMonth()+1; //获取到的是几月
            var dates = date.getDate();// 获取到的的是几号
            var day = date.getDay();  //获取到的是 星期几
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return year +  '年/' + month + '月/' + dates + '日/'+arr[day] +'现在时间：'+ h + ':' + m + ':' + s

        }

        console.log(getNewYear())   //获取到当前面的年月日



      //倒计时案例
    //核心思维   用结束时间的总秒数 - 现在的时间的总秒数  = 剩余时间的总秒数
    function get(time) {
      //求结束时间的总毫秒数
      //Date.now() 这个是获取到现在的毫秒数  如果把用户输入的时间写在里面的话就会得到结束时间的毫秒数
      var endTime = +new Date(time)    //大的
      // console.log(endTime);


      //现在时间总的毫秒数   获取到当前的毫秒数
      var newTime = +new Date()    //小的
      // console.log(newTime);


      //3.求现在剩下的时间  已经转换为秒数了
      var shengxia = (endTime - newTime) / 1000;
      //4.转换为时分秒
      //1.时
      d = parseInt(shengxia / 60 / 60 / 24); //得到的是总的天数
      d = d < 10 ? '0' + d : d;
      h = parseInt(shengxia / 60 / 60 % 24); //计算小时
      h = h < 10 ? '0' + h : h;
      m = parseInt(shengxia / 60 % 60);   //计算分钟
      m = m < 10 ? '0' + m : m;
      s = parseInt(shengxia % 60);   //计算当前的秒数
      d = s < 10 ? '0' + s : s;

      return '剩余的时间' + d + '天 ' + h + '时' + m + '分' + s + ' 秒';


    }

    console.log(get('2019-9-3 08:08:08'))



    //时分秒案例
    function getTime() {
      var date = new Date();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      h = h < 10 ? '0' + h : h;
      m = m < 10 ? '0' + m : m;
      s = s < 10 ? '0' + s : s;
      return h + ':' + m + ':' + s
    }
    console.log(getTime());

五. js 前端实现时间实时更新效果

image.png

## 简单原理就是：
- 封装一个时间格式的方法，加一个定时器，每秒去刷新一次，模拟成为时间更新效果
## 1. 封装公共方法

export function timeNow() {
    let vWeek, vWeek_s, year, month, day, hours, minutes, seconds;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    let date = new Date();
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hours = date.getHours();
    hours = hours > 9 ? hours : "0" + hours;
    minutes = date.getMinutes();
    minutes = minutes > 9 ? minutes : "0" + minutes;
    seconds = date.getSeconds();
    seconds = seconds > 9 ? seconds : "0" + seconds;
    vWeek_s = date.getDay();
    let time = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
    return time
}
## 可以根据需求更改展现格式
### 2. 使用
引入：
import {  timeNow } from "../../utils/getMaininfo";

从页面加载起，开始执行：

getAll() {
   this.tiemEq = setInterval(() => {
      /* 时间 */
      this.nowTime = timeNow();
   }, 1000);
 }

[注：这里给定时器生成定义，以便后续销毁]

## 3. 销毁
由于定时器的特殊性，在关闭页面时，及时销毁，避免造成资源浪费甚至内存溢出

// vue生命周期
beforeDestroy() {
   /* 关闭页面销毁所有定时器 */
   clearInterval(this.tiemEq);
}

六.柯里化的代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function add1(x, y, z) {
      return x + y + z
    }

    function add2(x, y, z) {
      x = x + 2;
      y = y * 2;
      z = z * z;

      return x + y + z
    }

    function makeAdder(count) {
      return function (num) {
        return count + num;
      }
    }

    function log(date, type, message) {
      console.log(`[${date.getHours()}:${date.getMinutes()}]:[${type}]:[${message}]`);
    }

    // 柯里化函数的实现
    function hyCurrying(fn) {
      console.log('fn:=>', fn);
      function curried(...args) {
        console.log("...args:=>", ...args);
        console.log("args:=>", args);
        // 判断当前已经接收的参数的个数,可以参数本身需要接收的参数是否已经一致了
        console.log("args.length是可以拿到函数参数的长度的:=>", args.length); // args.length是可以拿到函数参数的长度的
        // 1.当已经传入的参数, 大于等于 需要的参数时,就执行函数
        if (args.length >= fn.length) {
          console.log('this:=>', this);
          return fn.apply(this, args)
        } else {
          // 没有 达到个数时,需要返回一个新的函数,继续来接收参数
          function curried2(...args2) {
            // 接收到参数后, 需要递归调用curried 来检查函数的个数时候达到
            return curried.apply(this, [...args, ...args2])
          }
          return curried2
        }
      }

      return curried;

    }
    var curryAdd = hyCurrying(add1);
    console.log(curryAdd(10, 20, 30));
    // console.log(curryAdd(10, 20)(30));
    // console.log(curryAdd(10)(20)(30));
  </script>
</body>

</html>

七.JS 实现全屏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            border: 10px solid #999;
        }
    </style>
</head>

<body>
    <div>
        <img src="https://img2.baidu.com/it/u=3437217665,1564280326&fm=26&fmt=auto" alt="">
        <input type="button" id="full" value="全屏">
        <input type="button" id="cancelfull" value="退出全屏">
        <input type="button" id="isFull" value="是否全屏">
    </div>

    <script>

        /*
        
           全屏接口的使用
        
        
        */


        var div = document.querySelector('div');
        var img = document.querySelector('img');


        /*
            1.requestFullScreen():开启全屏显示
            不同浏览器需要加不同的前缀
            Chrome:webkit firefox: moz  ie:ms  opera:o
            2.cancelfullScreen():退出全屏显示
            Chrome:webkit firefox: moz  ie:ms  opera:o
            3.fullScreenElement:是否是全屏状态 
            Chrome:webkit firefox: moz  ie:ms  opera:o
        
        */
        //第一个为按钮  全屏操作 
        document.querySelector('#full').onclick = function () {
            //开启全屏显示  webkit :处理兼容性的问题    requestFullScreen:开启全屏显示
            img.webkitRequestFullScreen();

        }


        //退出全屏
        document.querySelector('#cancelfull').onclick = function () {
            //开启全屏显示  webkit :处理兼容性的问题    CancelfullScreen:开启全屏显示
            //这个就不是div来调用了  这个是退出整个文档了  所以是document来调用
            document.webkitCancelFullScreen();

        }

        document.querySelector('#isFull').onclick = function () {
            //开启全屏显示  webkit :处理兼容性的问题    CancelfullScreen:开启全屏显示
            document.webkitFullScreenElement();

        }


        /*
            ononline:网络连通的时候触发这个事件
            onoffline:网络断开时触发
        
        */
        //连通
        window.addEventListener('online', function () {
            alert('网络连通了')
        })

        //断开
        window.addEventListener('offline', function () {
            alert('网络断开了')
        });
    </script>
</body>

</html>

八. 格式化大数字:

//  格式化大数字:
function formatCount(count) {
  var counter = parseInt(count)
  if (counter > 100000000) {
    return (counter / 100000000).toFixed(1) + "亿"
  } else if (counter > 10000) {
    return (counter / 10000).toFixed(1) + "万"
  } else {
    return counter + ""
  }
}


// 2. 格式化时长:
function padLeftZero(time) {
  time = time + ""
  return ("00" + time).slice(time.length)
}

function formatDuration(duration) {
  duration = duration / 1000
  // 488s / 60 = 8.12
  var minute = Math.floor(duration / 60)
  // 488s % 60
  var second = Math.floor(duration) % 60

  return padLeftZero(minute) + ":" + padLeftZero(second)
}

image.png

九. JS 如何处理双引号,反斜杠,中括号这种问题

遇到一下问题怎么处理呢?

image.png

 let code1 = '"A03"' // 需求: 让 "\"A03\"" 变为: A03, 在网页上显示A03
 let code2 = '["A03"]' // 需求: 让 "[\"A03\"]" 变为: A03 在网页上显示A03
 let code3 = '[]' // 空 在网页上显示空
 let code4 = '"\\"A0201-停机时伴有火花\\""' // 让 "\"\\\"A0201-停机时伴有火花\\\"\"" 变为: A0201-停机时伴有火花 在网页上显示A03 // 统一写一个正则处理所有的问题?
// 1. 使用JS来处理:
// 格式化斜杠 中括号, 双引号
export function getTxt(code) {
  if (code === '[]' ||code === "[]") {
    return "";
  }
  if (code) {
    var txt = (code + "").replace(/\\|"|""/g, "");
    txt = txt.replace("[", "");
    txt = txt.replace("]", "");
    return txt;
  }
}

// 2. 方式二正则:
function getValue(value){
      return value.match(/[-\u4e00-\u9fa5a-zA-Z0-9]{0,1}/gm).join(' ')
}

JS-实现的各类函数工具库

一.函数的防抖:

二. 节流

三. 对象的深拷贝

四. JS 获取当前时间格式化和倒计时

五. js 前端实现时间实时更新效果

六.柯里化的代码实现:

七.JS 实现全屏

八. 格式化大数字:

九. JS 如何处理双引号,反斜杠,中括号这种问题

遇到一下问题怎么处理呢?

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

需要近期研究的项目

JavaScript

JS-实现的各类函数工具库

一.函数的防抖:

二. 节流

三. 对象的深拷贝

四. JS 获取当前时间格式化 和 倒计时

五. js 前端实现时间实时更新效果

六.柯里化的代码实现:

七.JS 实现全屏

八. 格式化大数字:

九. JS 如何处理双引号,反斜杠,中括号这种问题

遇到一下问题怎么处理呢?

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

需要近期研究的项目

JavaScript

四. JS 获取当前时间格式化和倒计时