JS里一些奇怪的知识

元素变为可编辑

document.body.contentEditable=true

监听屏幕方向 : window.orientation

window.addEventListener("resize", () => {
  if (window.orientation === 180 || window.orientation === 0) {
    // 正常方向或屏幕旋转180度
    // 竖屏
  }
  if (window.orientation === 90 || window.orientation === -90) {
    // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    // 横屏
  }
})

获取平台信息

//运行环境是浏览器
let inBrowser = globalThis === window
//运行环境是微信
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
//浏览器 UA
let UA = inBrowser && window.navigator.userAgent.toLowerCase()
let isIE = UA && /msie|trident/.test(UA)
let isIE9 = UA && UA.indexOf('msie 9.0') > 0
let isEdge = UA && UA.indexOf('edge/') > 0
let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

base64数据导出文件，文件下载

function downloadFile(filename, data) {
  const DownloadLink = document.createElement('a')

  if (DownloadLink) {
    document.body.appendChild(DownloadLink)
    DownloadLink.style = 'display: none'
    DownloadLink.download = filename
    DownloadLink.href = data

    if (document.createEvent) {
      let DownloadEvt = document.createEvent('MouseEvents')

      DownloadEvt.initEvent('click', true, false)
      DownloadLink.dispatchEvent(DownloadEvt)
    }
    else if (document.createEventObject)
      DownloadLink.fireEvent('onclick')
    else if (typeof DownloadLink.onclick == 'function')
      DownloadLink.onclick()

    document.body.removeChild(DownloadLink)
  }
}

全屏

function toFullScreen() {
  const func =
    document.body.webkitRequestFullScreen ||
    document.body.mozRequestFullScreen ||
    document.body.msRequestFullscreen ||
    document.body.requestFullScreen
  func()
}

监听焦点变化

document.addEventListener('visibilitychange', () =>
  document.title = document.hidden ? '不在' : '爪巴'
)

监听全局粘贴

document.addEventListener('paste', event =>
  console.log(event)
)

返回正确的数据类型:

getType(o) {
  return Object.prototype.toString.call(o).match(/\[object (.*?)\]/)[1].toLowerCase()
}

柯里化

function add() {
  // 第一次执行时，定义一个数组专门用来存储所有的参数
  var _args = Array.prototype.slice.call(arguments);
  // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
  var _adder = function () {
    _args.push(...arguments);
    return _adder;
  };
  // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
  _adder.toString = function () {
    return _args.reduce((a, b) => a + b)
  }
  return _adder;
}

操作符

void

void操作符会计算后面给定的表达式，然后返回 undefined
所以，IIFE还可以这么写: void function iife(){}()

逗号运算符

逗号运算符会计算每一个操作数的结果（从左到右），然后返回最后一个操作数的计算结果。

const type = 'man'
const isMale = type === 'man' ? (
  console.log('嗨，先生们！'),
  true
) : (
    console.log('嗨，女士们！'),
    false
  )
console.log(`isMale 的值是 "${isMale}"`)

open 方法

• window.open(url, name, specs, replace)

1. url : 指定打开的链接
2. name : target 属性或窗口名称
   • _blank 加载到一个新的窗口(默认)
   • _parent 加载到父框架
   • _self 替换当前页面
   • _top 替换任何可加载的框架集
   • name 窗口名称
3. replace :
   • true 替换浏览历史中的当前条目。
   • false 在浏览历史中创建新的条目。