高级函数(函数节流&自定义事件)

高级函数

安全类型检测

• typeof
• instanceof
• Object.prototype.toString.call(value) == "[object Array]"toString() 方法只能检测原生对象

惰性载入函数

函数执行的分支只会加载一次

//方法一:
function fun(){
  if(tureOrFalse){
    fun = function(){
      return obj
    }
  }else if(tureOrFalse){
    fun = function(){
      return obj
    }
  }else {
    fun = function(){
      return obj
    }
  }
  return fun()
}
//方法二:
// 首次加载会损失一点性能,调用时不会
var fun = (function(){
  if(tureOrFalse){
    return function(){
      return obj
    }
  }else if(tureOrFalse){
    return function(){
      return obj
    }
  }else {
    return function(){
      return obj
    }
  }
})()

函数绑定

 //保证函数在上下文中执行
 function bind(fn, context){
    return function(){
      return fn.apply(context, arguments)
    }
 }

函数柯里化

是将多参数的函数转换成单参数的形式

function curry(fn){
   var args = Array.prototype.slice.call(arguments, 1)
   return function(){
     var innerArgs = Array.prototype.slice.call(arguments)
     var finalArgs = args.concat(innerArgs)
     return fn.apply(null, finalArgs)
   }
 }
 function add(num1, num2){
   return num1 + num2
 }
 var curriedAdd = curry(add, 10)
 console.log(curriedAdd(3))

不可扩展对象 Object.preventExtensions(obj)不能给obj添加属性和方法了

密封的对象Object.seal(obj) 不能删除和添加 但是可以修改

冻结的Object.freeze(obj) 不能添加/删除/修改

数组分块

可以将多个项目的处理在执行队列上分开,在每个项目处理之后,给予其它任务的处理机会这样就能避免长时间运行脚本的错误

// array 本质上是一个待办列表 传入时 使用array.concat()制作副本保证原数组不会被更改
// 要处理的项目数组,用于处理项目的函数,上下文(运行函数的环境)
function chunk(array, process, context){
  setTimeout(() => {
    var item = array.shift()
    process.call(context, item)
    if (array.length > 0){
      setTimeout(arguments.callee, 100)
    }
  }, 100);
 }

函数节流

只要代码是周期性执行,都应该使用节流

// 100ms内调用多少次 都只执行一次
function throttle(method, context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context)
  }, 100)
}

自定义事件

function EventTarget() {
  //用来存储事件
  this.handlers = {}
}

EventTarget.prototype = {
  constructor: EventTarget,
  // 注册事件 type 事件类型 handler 事件处理函数
  addHandler: function(type, handler) {
    if (typeof this.handlers[type] == 'undefined') {
      this.handlers[type] = []
    }
    this.handlers[type].push(handler)
  },
  // 触发事件 event至少包含type
  fire: function(event) {
    if(!event.target){
      event.target = this
    }
    if(this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type]
      for(var i=0; i<handlers.length; i++){
        handlers[i](event)
      }
    }
  },
  // 移除事件
  removeHandler: function(type, handler) {
    if(this.handlers[type] instanceof Array){
      var handlers = this.handlers[type]
      for(var i=0; i<handlers.length; i++){
        if(handlers[i] == handler){
          handlers.splice(i, 1)
        }
      }
    }
  }
}

function handleMessage(event){
  console.log(event)
}
var target = new EventTarget()
target.addHandler("message", handleMessage)
target.fire({type:"message", message:"hello world"})

更多内容尽在我的博客 持续更新更多内容