Skip to content

Latest commit

 

History

History
244 lines (206 loc) · 6.42 KB

代码段(3).md

File metadata and controls

244 lines (206 loc) · 6.42 KB

async/await 并发执行

async/await并不一定必须单个顺序执行，配合 Promise.all可以并发：

function sleep(timer = 1000) {
  return new Promise(resolve => {
    setTimeout(()=>{ resolve(timer) }, timer)
  })
}
async function fn1() {
  const arr = [1, 2, 3, 4, 5, 6]
  // 并行执行所有的
  const down = await Promise.all(arr.map(i => sleep(i * 1000)))
  console.log('down:', down)
}

fn1()

自定义滚动条相关的七个伪元素

  • ::-webkit-scrollbar：整个滚动条
  • ::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
  • ::-webkit-scrollbar-thumb：滚动条上的滚动滑块
  • ::-webkit-scrollbar-track：滚动条轨道
  • ::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
  • ::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
  • ::-webkit-resizer：某些元素的交汇部分的部分样式（类似 textarea的可拖动按钮）

16进制颜色代码生成

function createColor() {
  return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6)
}

驼峰命名转下划线

function camel2Underline(name) {
  return name.match(/[a-z][0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase()
}

日期格式化

// 版本1
function format1(x, y) {
  var z = {
    y: x.getFullYear(),
    M: x.getMonth() + 1,
    d: x.getDate(),
    h: x.getHours(),
    m: x.getMinutes(),
    s: x.getSeconds()
  }
  return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function(v) {
    return ((v.length > 1 ? '0' : '') + z[v.slice(-1)]).slice(-(v.length > 2 ? v.length : 2))
  })
}
// 版本2
Date.prototype.format2 = function(fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  }
  if (/(y+)/.test(fmt)) {
    // 这里 RegExp的用法挺有意思的
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
    }
  }
  return fmt
}

// 使用
format1(new Date(), 'yy-MM-dd hh:m:ss')  // 18-08-23 11:46:11
new Date().format2('yyyy-M-d h:m:s')  // 2018-8-23 11:46:11

数字四舍五入

// v: 值， p: 精度
function round(v, p) {
  p = Math.pow(10, p >>> 31 ? 0 : p | 0)
  v *= p
  return (v + 0.5 + (v >> 31) | 0) / p
}
// 使用
round(123.456788, 2)  // 123.46

浏览器原生 Base64编码和解码方法

支持度为 IE10+，其他主流浏览器完全支持

编码(btoa):

window.btoa(stringToEncode)

解码(atob)：

// encodedData 代表 base64字符串
window.atob(encodedData)

对中文进行编码会报错，可以先将中文转码，再进行编码，解码同样如此：

window.btoa(window.encodeURIComponent('嘻嘻哈哈'))
window.atob(window.decodeURIComponent('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4'))

如果 IE9-浏览器需要此功能，可使用 polyfill， 然后像下面这样引入即可：

<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->

任意文件也可以使用此 api进行编码和解码，使用 FileReader:

var reader = new FileReader();
reader.onload = function(e) {
  // e.target.result就是该文件的完整Base64 Data-URI
};
reader.readAsDataURL(file);

获取当前时区

可以通过 new Date().getTimezoneOffset()获取到当前时区与 0时区的时间差(单位是分钟) 例如在东八区，值为 -480，也就是 8小时，就是东八区

compose函数的实现

function compose(...funcs) {
  if (funcs.length === 0) return arg => arg
  if (funcs.length === 1) return funcs[0]
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
// 使用
const a = x => x + 1.2
const b = x => x * 10
const c = (x, y) => x + y
// 从右向左执行
compose(a, b, c)(2, 3)  // => 51.2

模拟实现 new关键字

function myNew() {
  const obj = Object.create(null)
  const Con = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototpe
  const result = Con.apply(obj, arguments)
  return typeof result === 'object' ? result : obj
}

JavaScript获取图片的原始尺寸

  • 直接获取宽高属性值

适用于 没有设置宽高样式或标签宽高属性的 img标签

const img = document.querySelector('.imgEle')
console.log(img.width, img.height)
  • 通过中间 img标签

如果 目标img元素设置了宽高样式或标签上设置了宽高属性，则上述方法获取到尺寸就是设置的尺寸，而不一定是原始尺寸：

<img width="100" height="100" src="https://dummyimage.com/200x200/fafff0" />
<img class="imgEle" src="https://dummyimage.com/200x200/fafff0" />
<style>
  .imgEle {
    width: 200px;
    height: 200px;
  }
</style>

这时就需要通过一个新建的中间 img标签来测量目标图片的原始尺寸，直接创建一个新img对象，然后把旧img的src赋值给新的，这时候获取新img的宽度即可：

const img = document.querySelector('imgEle')
const image = new Image()
image.src = img.src
console.log(img.width, img.height)
  • HTML5新增方法

HTML5 提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高：

const img = document.querySelector('imgEle')
img.src = 'https://pic5.zhuanstatic.com/zhuanzh/n_v20a70b48b1e2b4858963e014f42c6e226.png'
img.onload = () => {
  console.log(img.naturalWidth, img.naturalHeight)
}

naturalWidth/naturalHeight的兼容性很好，IE8+即可，完全可以用于实际生产环境

  • 颜色表示，hsl 转 rgb
function hslToRgb(hue, sat, light) {
  if( light <= .5 ) {
    var t2 = light * (sat + 1);
  } else {
    var t2 = light + sat - (light * sat);
  }
  var t1 = light * 2 - t2;
  var r = hueToRgb(t1, t2, hue + 2);
  var g = hueToRgb(t1, t2, hue);
  var b = hueToRgb(t1, t2, hue - 2);
  return [r,g,b];
}

function hueToRgb(t1, t2, hue) {
  if(hue < 0) hue += 6;
  if(hue >= 6) hue -= 6;

  if(hue < 1) return (t2 - t1) * hue + t1;
  else if(hue < 3) return t2;
  else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
  else return t1;
}