master

分支 (1)

管理

管理

master

javascript-design-pattern
/
高阶函数.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="btn">123</div>
  <div id="btn2">btn2</div>
  <script>
    // Function.prototype.uncurrying = function () {
    //   var self = this // 当调用下面的push方法这里的this指向Array下面的push方法
    //   return function () {
    //     var obj = Array.prototype.shift.call(arguments) // [1,2,3]
    //     return self.apply(obj, arguments) // 相当于[1,2,3].push(4)
    //   }
    // }
    Function.prototype.uncurrying = function () {
      var self = this;
      return function () {
        return (Function.prototype.call).apply(self, arguments);
      }
    };

    var push = Array.prototype.push.uncurrying();
    // console.log(push(1, 2));

    (function () {
      push(arguments, 4);// arguments对象原本是[1,2,3],但是在push内部做了Array原型下的push指向，对它push了一个4变成了[1,2,3,4]
      console.log(arguments); // 输出：[1, 2, 3, 4]
    })(1, 2, 3);

    // 函数节流 throttle
    function throttle(callback, interval) {
      let fn = callback
      let timer = null
      return function () {
        if (timer) {
          return
        }
        let _this = this
        timer = setTimeout(() => {
          clearTimeout(timer)
          timer = null
          callback()
          console.log(_this)
        }, interval)
      }
    }
    window.onresize = throttle(() => {
      console.log('执行了')
    }, 2000)
    /*
    // 分时函数 timeChunk
    // 主要解决一次性大批量的操作转为分多个快先后执行。

    var timeChunk = function (ary, fn, count) {
      var obj,
        t;
      var len = ary.length;
      var start = function () {
        for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
          var obj = ary.shift();
          // console.log(ary.length)
          fn(obj);
        }
      };
      return function () {
        t = setInterval(function () {
          if (ary.length === 0) { // 如果全部节点都已经被创建好
            return clearInterval(t);
          }
          start();
        }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
      };
    };

    var ary = [];
    for (var i = 1; i <= 100; i++) {
      ary.push(i);
    };
    var renderFriendList = timeChunk(ary, function (n) {
      var div = document.createElement('div');
      div.innerHTML = n;
      document.body.appendChild(div);
    }, 8);
    renderFriendList();
    */
    // 惰性加载函数
    // 解决在每个环境中判断当前支持的方法，这实际上是多余的
    // 思路：第一次进入方法，根据当前的环境，去重写这个方法，后续每次调用这个方法边不会再次去验证判断，而是每次调用都会使用兼容当前环境的方法。

    var addEvent = function(elem,type,handle){
      if(window.addEventListener){
        addEvent = function(elem,type,handle){
           elem.addEventListener(type,handle)
           console.log('11111')
        }
      }else if(window.attachEvent){
        addEvent = function(elem,type,handle){
           elem.attachEvent('on'+type,handle)
        }
      }
      addEvent(elem,type,handle)
    }
    var btn = document.getElementById( 'btn' );
    var btn2 = document.getElementById( 'btn2' );
    // console.log(document.getElementById('btn'))
    addEvent(btn,'click',()=>{
      console.log('点击了')
    })
    // console.log(document.getElementById('btn2'))
    addEvent(btn2,'click',()=>{
      console.log('点击了2')
    })
  </script>
</body>

</html>