常用代码段

ChilanYeoh
123 阅读3分钟

--转自 常用代码段 | 不懂先生的博客 (zbztb.cn)

判断有没有这个属性

function hasPrototypeProperty(obj, pro) {
    //  hasOwnProperty   in
    if (!obj.hasOwnProperty(pro) && (pro in obj)) {
        return true;
    }
    return false;
}

获取url上的键值对


function getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
}

去除空格

function returnNoSpace(str) {
    return str.replace(/\s+/g, ' ');
}

兼容性滚动条

document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

bootstrap 屏幕宽度种类

function whatScreen() {
   let width = window.screen.width;
   let title = document.querySelector("title");
   if (width <= 768) {
       title.innerHTML = "极小屏幕-" + width;
   } else if (width > 768 && width <= 992) {
       title.innerHTML = "小屏幕-" + width;
   } else if (width > 992 && width <= 1200) {
       title.innerHTML = "普通屏幕-" + width;
   } else if (width > 1200) {
       title.innerHTML = "大屏幕-" + width;
   }
}

将超出行数的部分 变成 ...(省略号)

.line2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

常用正则表达式

// 检查手机号码
function checkPhone(phone) {
    if (!(/^1[34578]\d{9}$/.test(phone))) {
        return false;
    } else {
        return true;
    }
}

// 检查邮箱
function checkEmail(myemail) {　　
    var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+.)+(com|cn|net|org)$/;
    if (myReg.test(myemail)) {　　　　
        return true;　　
    } else {　　　　
        return false;
    }
}

自定义dom事件

 let evt = document.createEvent("HTMLEvents");
  // 初始化，事件类型，是否冒泡，是否阻止浏览器的默认行为
  evt.initEvent("tap", false, false);
  // 触发
  div.dispatchEvent(evt);

设置rem (面试题屏幕适配)

function setHTML() {
    // 基础值
    let baseVal = 100;
    // 设计稿的宽度
    let pageWidth = 375;
    // 要适配的屏幕的宽度?
    let screenWidth = document.querySelector("html").offsetWidth;
    // 要设置的fontsize
    let fontsize = screenWidth * baseVal / pageWidth;
    // 设置到html标签的中
    document.querySelector("html").style.fontSize = fontsize + "px";
  }

zepto设置拦截器

beforeSend会在发送请求之前被调用

 $.ajaxSettings.beforeSend = function (xhr, obj) {
    obj.url = baseUrl  + obj.url;
  }

complete 会在请求结束后被调用

$.ajaxSettings.complete = function () {
	
  }

扩展zepto方法

为  **∗∗ 对象增加自定义方法如可以这样使用 ‘**  对象增加自定义方法 如 可以这样使用 `.show();`

 $.extend($, {
    show: function () {
      $("body").addClass("waitting");
    }
  });

页面开启摄像头

<!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>
</head>

<body>
  <video src="" width="600" height="600" autoplay controls></video>
  <script>
    var video = document.querySelector("video");

    navigator.getUserMedia({
      video: true
    }, success, error);
    function success(stream) {
      video.src = window.URL.createObjectURL(stream);
    }
    function error(err) {
      console.log(err);

    }
  </script>
</body>

</html>

使用node删除typora中多余的图片

// process.argv
const path = require("path");
const fs = require("fs");

dImgs();
/* 
默认是当前路径的 meidas文件夹
默认是当前路径的所有的md 文件
 */
function dImgs() {
  /* 
  1 获取medias里面所有的图片 =>[]
  2 将图片数组和md中的图片引用对比，发现循环后不存在的数组，再开始循环删除
   */

  let dirName = "medias";

  //  图片文件名称数组 =  要删除的图片的数组
  let imgArrNames = fs.readdirSync(dirName);
  // console.log(imgArrNames22);
  // 获取目录下的所有md文件名称
  let mdNames = fs.readdirSync("./").filter(v => {
    return v.includes(".md")
  });


  console.log("源图片的长度：" + imgArrNames.length);
  mdNames.forEach(v => {
    // v 是每一个md文件的名称  
    // 获取md文件字符串
    let mdContent = fs.readFileSync(v).toString("utf8");
    // 循环里面不要修改源数组的长度
    // 要保留的图片名数组
    let saveImgs = [];
    imgArrNames.forEach((vImg, iImg) => {
      if (mdContent.includes(vImg)) {
        // vImg 为不需要删除的文件
        saveImgs.push(vImg);
      }
    });
    saveImgs.forEach((v) => {
      // 修改上一个要循环的图片
      let deI = imgArrNames.indexOf(v);
      if (deI != -1) {
        imgArrNames.splice(deI, 1);
      }
    });

  });

  // 循环删除
  let deIndex = 0;
  imgArrNames.forEach(v => {
    fs.unlinkSync(path.join(dirName, v));
    console.log("删除的图片的名称" + v);
    deIndex++;
  });
  console.log("删除成功" + deIndex);
}

将类数组对象转为真正的数组

 // 方式 一 展开运算符
	let obj = {
      "0": "00",
      "1": "11",
      "2": "22"
    }
    
    let newArr=Array.of(...Object.values(obj));
             
    // 方式二 new一个数组
    let obj = {
      "0": "00",
      "1": "11",
      "2": "22",
      length:3
    }
    let newArr = Array.from(obj)

快速生成 对应顺序的数组

Object.keys(String(Array(100))); 
Object.keys(Array(101).toString());

数组内 改变元素的位置

 // copyWithin(要插入的位置，被复制数组的开始，被复制数组的结尾)
    // ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
    let arr = Object.keys(String(Array(10)));

    // ["3", "4", "2", "3", "4", "5", "6", "7", "8"]
    console.log(arr.copyWithin(0, 3, 5))

数组填入元素

// fill(要填充的值，填充到数组的开始下边，填充到数组的结尾坐标)
    let arr = [1, 2, 3, 4, 5, 7];
    arr.fill(8, 1, 5);
    console.log(arr);
    //  [1, 8, 8, 8, 8, 7]

数组 寻找某个复合添加的元素

let arr = [1, 2, 3, 4, 5, 7];

    let item = arr.find((v, i) => {
      if (v >= 5)
        return true;
    });
    console.log(item);

数组 寻找复合添加的元素的索引

 let arr = [1, 2, 3, 4, 5, 7];

    let index = arr.findIndex((v, i) => {
      if (v >= 5)
        return true;
    });
    console.log(index);

防抖和节流

防抖

用下一次的执行，来终止上一次的 ‘准备执行 ’

案例 输入框 值改变 发送异步请求 搜索关键字

节流

上一次执行还没有完毕，不开始下一次的执行

案例 滚动条执行加载下一页

防抖和节流代码

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 3000px;
    }

    h2 {
      position: fixed;
      top: 300px;

    }
  </style>
</head>

<body>
  <input type="text">
  <h1></h1>
  <h2></h2>
  <script>
    let h1 = document.querySelector("h1");
    let h2 = document.querySelector("h2");
    let inp = document.querySelector("input");
    let time = -1;

    // 防抖 在一定的时间内，重复触发多次时，之后触发最后一次 
    inp.oninput = function () {
      clearTimeout(time);
      time = setTimeout(() => {
        h1.innerText = this.value;
      }, 1000);
    }


    // 节流
    // 上一个行为还没有结束，无法开展下一个行为
    let isScroll = false;
    let index = 0;
    document.body.onscroll = function () {
      if (isScroll) return;
      isScroll = true;
      setTimeout(() => {
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        console.count("执行");
        for (let i = 0; i < 30; i++) {
          index++;
          let div = document.createElement("div");
          div.innerText = index;
          document.body.appendChild(div);
        }
        isScroll = false;
      }, 1000);

    }

  </script>

</body>

</html>

对象深拷贝

// target为新的对象  source为要被拷贝的对象
    let deepClone = function (target, source) {
      for (const key in source) {
        if (Object.prototype.toString.call(source[key]) === '[object Object]') {
          target[key] = {};
          deepClone(target[key], source[key]);
        } else if (Object.prototype.toString.call(source[key]) === '[object Array]') {
          target[key] = [...source[key]]
        } else {
          target[key] = source[key];
        }
      }
    }
avatar
文章
阅读
粉丝