JS 手札记

1. addEventListener中的事件如果移除(removeEventListener)的话不能在事件中执行bind(this)否则会移除无效！

2. // selectCurrent()
   // copy("example...")
   
   // function sleep (ms) {
   //     return new Promise((resolve) => {
   //         setTimeout(() => {
   //             resolve('sleep for ' + ms + ' ms');
   //         }, ms);
   //     });
   // }
   // async function selectCurrent () {
   //     var reselectPrevious
   
   //     await sleep(2000)
   //     reselectPrevious = deselectCurrent();
   //     console.log("first")
   
   //     await sleep(2000)
   //     reselectPrevious()
   //     console.log("last")
   // }
   
   var defaultMessage = "Copy to clipboard: #{key}, Enter";
   
   function format(message) {
       var copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
       return message.replace(/#{\s*key\s*}/g, copyKey);
   }
   
   /**
       * interface Options {
       *   debug?: boolean;
       *   message?: string;
       * }
       * @param {string} text
       * @param {Options} options
       */
   function copy(text, options) {
       var debug,
           message,
           reselectPrevious,
           range,
           selection,
           mark,
           success = false;
       if (!options) {
           options = {};
       }
       debug = options.debug || false;
   
       try {
           reselectPrevious = deselectCurrent();
   
           range = document.createRange();
           selection = document.getSelection();
   
           mark = document.createElement("span");
           mark.textContent = text;
           // reset user styles for span element
           mark.style.all = "unset";
           // prevents scrolling to the end of the page
           mark.style.position = "fixed";
           mark.style.top = 0;
           mark.style.clip = "rect(0, 0, 0, 0)";
           // used to preserve spaces and line breaks
           mark.style.whiteSpace = "pre";
           // do not inherit user-select (it may be `none`)
           mark.style.webkitUserSelect = "text";
           mark.style.MozUserSelect = "text";
           mark.style.msUserSelect = "text";
           mark.style.userSelect = "text";
           mark.addEventListener("copy", function (e) {
               e.stopPropagation();
           });
   
           document.body.appendChild(mark);
   
           range.selectNodeContents(mark);
           selection.addRange(range);
   
           var successful = document.execCommand("copy");
           if (!successful) {
               throw new Error("copy command was unsuccessful");
           }
           success = true;
       } catch (err) {
           debug && console.error("unable to copy using execCommand: ", err);
           debug && console.warn("trying IE specific stuff");
           try {
               window.clipboardData.setData("text", text);
               success = true;
           } catch (err) {
               debug && console.error("unable to copy using clipboardData: ", err);
               debug && console.error("falling back to prompt");
               message = format("message" in options ? options.message : defaultMessage);
               window.prompt(message, text);
           }
       } finally {
           if (selection) {
               if (typeof selection.removeRange == "function") {
                   selection.removeRange(range);
               } else {
                   selection.removeAllRanges();
               }
           }
   
           if (mark) {
               document.body.removeChild(mark);
           }
           reselectPrevious();
       }
   
       return success;
   }
   
   // 取消选择当前浏览器选择并返回恢复选择的功能。 toggleSelection
   function deselectCurrent () {
       // 返回一个Selection对象，该对象表示用户选择的文本范围或插入符的当前位置。
       var selection = document.getSelection();
       if (!selection.rangeCount) {
           return function () {};
       }
       var active = document.activeElement;
   
       var ranges = [];
       for (var i=0; i<selection.rangeCount; i++) {
           ranges.push(selection.getRangeAt(i));
       }
   
       switch (active.tagName.toUpperCase()) { // .toUpperCase handles XHTML
           case 'INPUT':
           case 'TEXTAREA':
               active.blur();
               break;
           default:
               active = null;
               break;
       }
   
       selection.removeAllRanges();
       return function () {
           selection.type === 'Caret' && selection.removeAllRanges()
   
           if (!selection.rangeCount) {
               ranges.forEach(function(range) {
                   selection.addRange(range);
               });
           }
   
           active && active.focus();
       }
   }

   点击复制事件封装代码：

3. document.body.addEventListener(
   'touchmove',
   function(e) {
       if (e._isScroller) return
       // 阻止默认事件
       e.preventDefault()
   },
   {
       passive: false
   }
   )

   iOS上拉边界下拉出现空白解决方案：

4. window.addEventListener('resize', function() {
   if (
       document.activeElement.tagName === 'INPUT' ||
       document.activeElement.tagName === 'TEXTAREA'
   ) {
       window.setTimeout(function() {
       if ('scrollIntoView' in document.activeElement) {
           document.activeElement.scrollIntoView(false)
       } else {
           document.activeElement.scrollIntoViewIfNeeded(false)
       }
       }, 0)
   }
   })

   IOS 键盘弹起挡住原来的视图：

5. FastClick.prototype.focus = function(targetElement) {
   var length
   if (
       deviceIsIOS &&
       targetElement.setSelectionRange &&
       targetElement.type.indexOf('date') !== 0 &&
       targetElement.type !== 'time' &&
       targetElement.type !== 'month'
   ) {
       length = targetElement.value.length
       targetElement.setSelectionRange(length, length)
       targetElement.focus()
   } else {
       targetElement.focus()
   }
   }

   IOS12 输入框难以点击获取焦点，弹不出软键盘（fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改）：