js不常用api

浏览器

实现全屏

当你需要将当前屏幕显示为全屏

function fullScreen() {  
    const el = document.documentElement
    const rfs = 
    el.requestFullScreen || 
    el.webkitRequestFullScreen || 
    el.mozRequestFullScreen || 
    el.msRequestFullscreen
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el)
    }
}
fullScreen()

退出全屏

当你需要退出全屏

function exitScreen() {
    if (document.exitFullscreen) { 
        document.exitFullscreen()
    } 
    else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen()
    } 
    else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen()
    } 
    else if (document.msExitFullscreen) { 
        document.msExitFullscreen()
    } 
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el)
    }
}
exitScreen()

页面打印

当你需要将当前页面打印出来

window.print()

打印内容样式更改

当你需要将当前页面打印出来，但是需要修改一下当前排版

<style>
/* 使用@media print可以调整你需要的打印样式 */
@media print {
    .noprint {
        display: none;
    }
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>

阻止关闭事件

当你需要防止用户刷新或者关闭浏览器，你可以选择触发beforeunload事件，部分浏览器不能自定义文本内容

window.onbeforeunload = function(){
    return '您确定要离开haorooms博客吗？';
};

屏幕录制

当你需要将录制当前屏幕，并将录屏上传或下载

const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
    var recordedChunks = [];// 录制的视频数据

    var options = { mimeType: "video/webm; codecs=vp9" };// 设置编码格式
    var mediaRecorder = new MediaRecorder(stream, options);// 初始化MediaRecorder实例

    mediaRecorder.ondataavailable = handleDataAvailable;// 设置数据可用（录屏结束）时的回调
    mediaRecorder.start();

    // 视频碎片合并
    function handleDataAvailable(event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);// 添加数据，event.data是一个BLOB对象
            download();// 封装成BLOB对象并下载
        }
    }

    // 文件下载
    function download() {
        var blob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        // 此处可将视频上传到后端
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        a.href = url;
        a.download = "test.webm";
        a.click();
        window.URL.revokeObjectURL(url);
    }
})

判断横竖屏

当你需要对手机进行横屏或者竖屏的状态判断

function hengshuping(){
    if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")
    }
    if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")
    }
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

横竖屏样式变更

当你需要在横屏和竖屏的时候设置不同的样式时

<style>
@media all and (orientation : landscape) {
    body {
        background-color: #ff0000;
    }
}

@media all and (orientation : portrait) {
    body {
        background-color: #00ff00;
    }
}
</style>

标签页显隐

当你需要对标签页显示隐藏进行事件监听时

const {hidden, visibilityChange} = (() => {
    let hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
      // Opera 12.10 and Firefox 18 and later support
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }
    return {
      hidden,
      visibilityChange
    }
})();

const handleVisibilityChange = () => {
    console.log("当前被隐藏", document[hidden]);
};

document.addEventListener(
    visibilityChange,
    handleVisibilityChange,
    false
);

图片

本地图片预览

当你从客户端获取到一张图片但不能立刻上传到服务器，却需要预览的时候

<div class="test">
    <input type="file" name="" id="">
    <img src="" alt="">
</div>
<script>
const getObjectURL = (file) => {
    let url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // webkit or chrome
        url = window.URL.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    }
    return url;
}
document.querySelector('input').addEventListener('change', (event) => {
    document.querySelector('img').src = getObjectURL(event.target.files[0])
})
</script>

图片预加载

当你有大量图片的时候，你需要将图片进行预加载以免出现白屏的情况

const images = []
function preloader(args) {
    for (let i = 0, len = args.length; i < len; i++) {  
        images[i] = new Image()  
        images[i].src = args[i]
    } 
}  

preloader(['1.png', '2.jpg'])

js

字符串脚本化

当你需要将一串字符串转换成一个js脚本，该方法有xss漏洞，慎用

const obj = eval('({ name: "jack" })')
// obj会被转换为对象{ name: "jack" }
const v = eval('obj')
// v会变成obj这个变量

递归函数名解耦

当你需要写一个递归函数的时候，你声明了一个函数名，但是每次修改函数名的时候总会忘记修改内部的函数名。argument为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名。

// 这是一个最基础的斐波那契数列
function fibonacci (n) {
    const fn = arguments.callee
    if (n <= 1) return 1
    return fn(n - 1) + fn(n - 2)
}

DOM元素

隐显判断

当你需要对一个dom元素进行判断当前是否出现在页面视图内，你可以尝试用IntersectionObserver进行判断

<style>
.item {
    height: 350px;
}
</style>

<div class="container">
  <div class="item" data-id="1">不可见</div>
  <div class="item" data-id="2">不可见</div>
  <div class="item" data-id="3">不可见</div>
</div>

<script>
  if (window?.IntersectionObserver) {
    let items = [...document.getElementsByClassName("item")]; // 解析为真数组，也可用 Array.prototype.slice.call()

    let io = new IntersectionObserver(
      (entries) => {
        entries.forEach((item) => {
          item.target.innerHTML =
            item.intersectionRatio === 1 // 元素显示比例，为1时完全可见，为0时完全不可见
              ? `元素完全可见`
              : `元素部分不可见`;
        });
      },
      {
        root: null,
        rootMargin: "0px 0px",
        threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
      }
    );

    items.forEach((item) => io.observe(item));
  }
</script>

元素可编辑

当你需要在某个dom元素进行编辑，让它点击的时候就像一个textarea

<div contenteditable="true">这里是可编辑的内容</div>

元素属性监听

<div id="test">test</div>
<button onclick="handleClick()">OK</button>

<script>
  const el = document.getElementById("test");
  let n = 1;
  const observe = new MutationObserver((mutations) => {
    console.log("属性发生变化了", mutations);
  })
  observe.observe(el, {
    attributes: true
  });

  function handleClick() {
    el.setAttribute("style", "color: red");
    el.setAttribute("data-name", n++);
  }

  setTimeout(() => {
    observe.disconnect(); // 停止监听
  }, 5000);
</script>

打印dom元素

当你需要在开发过程中打印dom元素时，使用console.log往往只会打印出整个dom元素，而无法查看该dom元素的内部属性。你可以尝试使用console.dir

console.dir(document.body)

其他

激活应用

当你在移动端开发时，需要打开其他应用。以下方法也可以通过location.href赋值操作

  <a href="tel:12345678910">电话</a>

  <a href="sms:12345678910,12345678911?body=你好">android短信</a> 
  <a href="sms:/open?addresses=12345678910,12345678911&body=你好">ios短信</a>
  
  <a href="wx://">ios短信</a>

数组去重

当你需要将数组中的所有重复的元素只保留一个

const removeList = list => [...new Set(list)]
removeList([0, 0, 2, 4, 5]) // [0,2,4,5]

表单校验 && 一些格式校验的方法

获取表单校验值

export function $getValidate (formName) {
  return new Promise((resolve, reject) => { this.$refs[formName].validate((valid) => {
       if (valid) {
       resolve(true)
       } else {
       resolve(false)
       }
     })
  })
}

/**
 * 校验身份证是否合法
 * @param code
 * @returns
 */

// 身份证证件号码的校验
export const isIdCardNumberValid = (code) => {
  code = code.toUpperCase()
  const city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外'
  }
  let pass = true

  if (code && code.length === 15) {
    pass = true
  } else if (
    !code ||
    !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/i.test(code)
  ) {
    pass = false
  } else if (!city[code.substr(0, 2)]) {
    pass = false
  } else {
    // 18位身份证需要验证最后一位校验位
    // eslint-disable-next-line no-lonely-if
    if (code.length === 18) {
      const codeArray = code.split('')
      // ∑(ai×Wi)(mod 11)
      // 加权因子
      const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      // 校验位
      const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      let sum = 0
      let ai = 0
      let wi = 0
      for (let i = 0; i < 17; i += 1) {
        ai = Number(codeArray[i])
        wi = factor[i]
        sum += ai * wi
      }
      const last = parity[sum % 11]
      if (last !== codeArray[17]) {
        pass = false
      }
    }
  }
  return pass
}

// 联系电话的正则
export const contPhoneReg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/

// 固定电话的正则
export const phoneNoReg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/

// 邮政编码的正则
export const zipCodeReg = /^[1-9][0-9]{5}$/

// 手机号码的正则
export const mobileNoReg = /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/

// 传真号码的正则
export const faxNoReg = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/

// 判断是否包含空格或者特殊字符串
export const regExpString = (str) => {
  var pattern = new RegExp("[\\[\\]`~!！#$￥%^……&+?:：【】{}'=]")
  if (str) {
    const ifSpace= str.includes(' ') // 判断是否有空格
    if(ifSpace){
      return true
    }
    if (pattern.test(str)) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}
// 是否在0-1之间
export const zero_oneReg = /^(0(\.\d+)?|(1((\.0+)?)))$/