问题描述

某些浏览器嗅探（根据浏览器是否存在某方法，再进行调用）工作，每次调用函数时的重复分支判断，只需要判断一次即可确定。

解决方案

可以利用高阶函数返回封装后的函数。为防止IIFE的方式调用实际没有使用的函数，在第一次进入的时候重写这个函数，并调用，下一次进入的时候就不存在条件分支语句

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   <div id="div1">点我绑定事件</div>
  11.   <script>
  12.       let addEvent = function(elem, type, handler) {
  13.         if (window.addEventListener) {
  14.           addEvent = function(elem, type, handler) {
  15.             elem.addEventListener(type, handler, false);
  16.           }
  17.         }
  18.         if(window.attachEvent) {
  19.           addEvent = function(elem, type, handler) {
  20.             elem.attachEvent('on'+type, handler);
  21.           }
  22.         }
  24.         addEvent(elem, type, handler);
  25.       }
  27.       const div1 = document.getElementById('div1');
  29.       addEvent(div1, 'click', function(){
  30.         alert('click1');
  31.       });
  33.       addEvent(div1, 'click', function(){
  34.         alert('click2');
  35.       });
  37.     </script>
  38. </body>
  39. </html>