JavaScript设计模式与开发实践-读书笔记1

1. 函数节流

也许不太懂这个名词,不过他提到的东西还是我熟悉的那个.他要解决的问题就是,在会高频率触发一个事件处理程序的情况下,为了避免大量重复计算带来的性能问题,而引入的一个限制触发频率的机制.典型的问题就是window.onresize.虽然之前我解决过这种问题,但是看了设计模式之后,我发现我采用的方法是很挫的.
以前,我大概会使用这样的方法来解决这个问题

function test() {
    test._time_id =  setTimeout(function(){
      if (test._time_id === -1 || typeof test._time_id  === 'undefined') {
        test._time_id = -1;
        // 大量的计算
      }  
    },300)
}

这个问题的方法在于,我的函数里面混进了限制执行次数的逻辑,很明显,里面不再只是纯粹的业务逻辑了.
看了书之后,我会使用这种方法了.

function throttle(fn, interval) {
  let time_id;
  let first_time = true;
  return function(...args) {
      if (first_time) {
        time_id = -1;
        first_time = false;
        fn.apply(this,args);
      }
      if (time_id === -1) {
          time_id = setTimeout(() => {
            time_id = -1;
            fn.apply(this,args);
          }, interval || 300)
      }
    }
}
function test() {
  // 大量的计算
}
window.onresize = throttle(test,500);

这个实现的思路确实很棒,以前的确没有想到过这种解决方法.

2. 分时函数

其实我感觉这个和函数节流挺像的,但是它有一个关键点,就是他的处理的数据会依赖上一次处理的结果,而不像函数节流里面提到的例子.
这个模式处理的情况是一次性大量插入dom节点时带来的性能问题.在如今的开发模式,使用了vue或则是react,基本上就不需要考虑这个问题了,不过,如果需要需要才做dom来实现的特效的话,也许能帮得上忙吧(额,虽然我暂时考虑不出具体是什么情况).

function timeChunk(fn,each,data,interval) {
  let _arr = [];
  let _start = function(){
      for(let i = 0; i < Math.min(each || data.length); i ++) {
        fn(data.shift())
      }
  }
  let time_id = -1;
  let _func = function () {
    if (time_id === -1) {
        time_id = setTimeout(function(){
          time_id = -1;
          if (data.length !== 0) {
            _start();
            _func();
          }
        }, interval || 300)
      }
    }
    return _func;
}

3. 惰性加载函数

他的用法之一就是在给dom元素添加事件处理程序的时候,因为ie浏览器和其他现代浏览器用了不同的语法,所以,我们需要考虑这个特殊的情况.虽然在如今的浏览器的环境下,不需要考虑这个问题了,不过了解一下里面的原理还是很有意思的.
具体分为两种情况吧.

1. 在加载脚本的时候,就完成函数的切换
2. 在第一次运行函数的时候,进行切换
   这两种方法各有各自的好处,比较没啥意思,还是看一下代码吧.

let browser = (function(){
  if ( version === 'ie') {
    browser = function () {
      console.log('ie')
    }
  } else {
    browser = function ()  {
      console.log('not ie')
    }
  }
})()

let browser = function () {
  if (version === 'ie') {
    browser = function() {
      console.log('ie')
    }
  } else {
    browser = function() {
      console.log('not ie');
    }
  }
  browser();
}

4.其他

除了这些意外,还有一些别的有意思的模式,比如单例模式就很不错,还有科currying和uncurrying,面向切面编程等,这里就不一一总结了.