js 高级技巧

惰性载入函数

    function createXHR(){
        if(typeof XMLHttpRequest != 'undefined'){
        
            createXHR = function(){
                return new XMLHttpRequest();
            }
        }else if(typeof ActiveXObject != 'undefined'){
            createXHR = function(){
                return new ActiveXObject();
            }
        }else{
        
            createXHR = function(){
              throw new Error('no xhr object available')
            }
        }
        
        return createXHR();
    }

函数绑定 bind函数简单实现（还有更高级的封装，这里不多做介绍，只写最核心的几句）

    function bind(fn, context){
        return  function(){
            return fn.apply(context, anguments)
        }
    }
    var handler = {
        message: 'event handled',
        handleClick: function(event){
            console.log(this.message, event.type)
        }
    }
    
    var btn = document.querySelector('.btn');
    
    btn.addEventListener('click', bind(handler.handleClick, handler))

函数柯里化
// 定义 柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。
这里因为比较多，不写重复了，大家参考https://www.codementor.io/michelre/currying-in-javascript-g6212s8qv

防篡改对象

1. 不可拓展对象
var p = {name: 'xm'}

判断是否不可拓展 Object.preventExtensions()
Object.isExtensible(p);    //true
Object.preventExtensions(p);
p.age = 29;
console.log(p.age)   // undefined

Object.isExtensible(p);    //false

2. 密封对象

var p = {name: 'xm'}

判断对象是否为密封对象
Object.isSealed(p)   //   false
Object.seal(p)
p.age = 18       //静默失败
delete p.name  //静默失败 

Object.isExtensible(p);    //false
Object.isSealed(p)   // true

3. 冻结的对象

var p = {name: 'xm'}

判断对象是否为冻结对象
Object.isForzen(p)    // false
Object.freeze(p)     
p.age =  17         //静默失败
delete p.name       //静默失败
p.name = 'xh'       //静默失败

Object.isExtensible(p);    //false
Object.isSealed(p)   // true
Object.isForzen(p)    // true

总结： 不可拓展对象不能为对象添加属性，但是能删除和修改属性
        密封对象不能为对象添加属性也不能删除属性，但是能修改属性值
         冻结对象不能为对象添加和删除属性，也不能修改属性值

高级定时器

1.重复定时器，用setTimeout 接连调用代替setInterval
setTimeout( () => {
    // do something
    setTimeout(() => {
        // do something
    })
})

2. 函数节流,主要运用在快速输入搜索，或者resize事件等频繁调用场景
function throttle(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout( () => {
    method.call(context);
  })
}

本文作者原创，仅供学习交流使用，转载需注明出处。

最后编辑于：2019.12.04 18:03:57