柯里化、原生bind、防抖节流函数、实现promise - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


柯里化、原生bind、防抖节流函数、实现promise

2019-7-26 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

多参数柯里
原生bind
实现promise
防抖节流函数
多参数柯里化

参数fn可以是function(a,b,c){},也可以是function(a,b,c,d,f){}

// 支持多参数传递
function progressCurrying(fn, args) {

    var _this = this
    var len = fn.length;
    var args = args || [];
    return function() {
        var _args = Array.prototype.slice.call(arguments).concat(args);
        // 如果参数个数小于最初的fn.length,则递归调用,继续收集参数
        if (_args.length < len) {
            return progressCurrying.call(_this, fn, _args);
        }

        // 参数收集完毕,则执行fn
        return fn.apply(this, _args);
    }
}

原生js实现bind

Function.prototype.myBind = function(Othis){
  if(typeof this !== "function"){
    return new TypeError("not a function");
  }
  let _this = this;
  let args = [...arguments].slice(1);
  let func = function(){};
  let fBound = function () {
    return _this.apply(this instanceof func ?this:Othis,[...arguments].concat(args));
  }
  func.prototype = _this.prototype;
  fBound.prototype = new func();
  return fBound;
}

防抖函数

//每wait时间内执行一次,若期间被触发,则重新执行
function debounce(func,wait) {
  var timeout ;
  return function(){
    let args = [...arguments];
    let _this = this;
    if(timeout){
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      func.apply(_this,args);
    }, wait);
  }
}

节流函数

//每wait时间执行一次
function throttle(func,wait){
  var timeStart = 0 ;
  return function(){
    let _this = this;
    let args = [...arguments];
    let now = Date().now();
    if(now - timeStart >wait){
      func.apply(_this,args);
      timeStart = now;
    }
  }
}

实现一个promise

    function _Promise(func){
        this.status = 'pending'
        this.result = '' ;
        func(this.resolve.bind(this),this.reject.bind(this));
    }
    _Promise.prototype.resolve = function(result){
        if(this.status == 'pending'){
            this.status = 'fullfilled';
            this.result = result;
        }
    }
    _Promise.prototype.reject = function(error){
        if(this.status == 'pending'){
            this.status = 'rejected';
            this.result = error;
        }
    }
    _Promise.prototype.then = function(preResolve,preReject){
        let _isPromise ;
        if(this.status == 'fullfilled'){
            _isPromise = preResolve(this.result);
        }else if(this.status == 'rejected' && arguments[1]){
             _isPromise = preReject(this.result);
        }
        return _isPromise instanceof _Promise ? _isPromise:this;
    }

实现一个promise.all()

 function promiseAll(promiseArray){
        //首先参数一定是一个数组
        //然后此函数返回的是一个promise,如果全部成功,则返回结果的数组,只要有一个失败,则返回失败的结果
        return new Promise(function (resolve,reject){
            if(!Array.isArray(promiseArray)){
                return reject(new TypeError("not a function"));
            }
            let resolveNum = 0;
            let arrNum = promiseArray.length;
            let resolveResult = [];
            for(let i=0; i<arrNum ;i++){
                (function (i){
                    Promise.resolve(promiseArray[i]).then(function(result){
                        resolveNum ++;
                        resolveResult.push(result);
                        if(resolveNum == arrNum){
                            return resolve(resolveResult);
                        }
                    },function(error){
                        return reject(error);
                    })
                })(i);
            }
        }) //返回的promise结束
        
    }
蓝蓝设计www.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 柯里化、原生bind、防抖节流函数、实现promise « 围观Twitter 网页版重磅更新 | 前端性能优化»


订阅Rss
秒速赛车官网 北京两步彩 安徽快3走势 秒速赛车官网 秒速赛车官网 K8彩票开户 秒速赛车官网 秒速赛车官网 幸运飞艇直播链接 四柱彩票开户