奇葩代码合集

---

1. 使用正则表达式格式化时间

   const getTime = (format = 'FullYear-Month-Date Hours:Minutes:Seconds', date = new Date(), isAddZero = true) => format.replace(/[a-zA-Z]+/g, match => (date['get' + match]() + (match === 'Month')).toString().padStart(isAddZero ? 2 : 1, '0'))

   一行代码完成时间格式化。利用正则匹配依次单词，每个单词前加上get拼成获取时间的相应方法，当匹配到的值是Month进行判断，此时为true，Number + True = Number+1，其他情况下为Number+False=Number+0没有影响，解决了月份时需要加1的尴尬，再通过padStart对不足2位的进行补0，最终输出格式为YYYY-MM-dd mm:ss。

2. 监听键盘事件，根据key值进行相应操作

   document.addEventListener('keydown', e => keydownEvent[e.key]?.())
   // 策略模式
   const keydownEvent = {
     ArrowUp: upHandle,
     ArrowLeft: leftHandle,
     ArrowRight: rightHandle,
     ArrowDown: downHandle
   }
   
   const upHandle = () => {}
   const leftHandle = () => {}
   const rightHandle = () => {}
   const downHandle = () => {}

   当键盘按下时，获取键盘对应的key值，通过策略模式找到相应的操作，如果该key不在策略列表中，则不执行任何操作，使用ES6的?.对变量进行判断。这个代码片段应该比较常用，比之前各种判断或者swtich更加优雅。

3. 监听键盘事件，自动点击全屏按钮

   document.addEventListener('keydown', e => e.key === 'a' && document.querySelector('#full-screen')?.click())

4. 判断是否在点击范围内

   // 判断坐标是否在矩形（按钮）范围之内
   const isPointInRange = (x, y, [left, top, right, bottom]) => x >= left && x <= right && y >= top && y <= bottom
   
   // 监听点击事件，若点击到成功按钮，执行成功回调；若点击到取消按钮，执行取消回调。（只要点击到按钮都会关闭模态窗）
   canvas.onclick = e => [onSuccess, onCancel][[successBtnRange, cancelBtnRange].findIndex(range => isPointInRange(e.offsetX, e.offsetY, range) && (this.close(), true))]?.()