P5 basic front-end should master code implementation

prospect

Epidemic no mercy, after last year's experience of the Internet a series of storm, I believe we have a lot of small partners wants to find a little better company for their own future in an interview this year season in four gold and three silver. Well, today we have to explain some of the principles as P5 and engineers need to know how to personally hand out its implementation process, it is possible to develop our daily business, when these methods do not have access to write their own, but we have our principles of a free know, then it might root out once they step away from their own mind of the company during the interview.

Mode call

• The first parameter is null or undefined, this window global object point, point to change the original value of the target value of automatic packaging the original value, such as a String, number, boolean
• In order to avoid the function name and asked down (context) of property conflict, use Symbol type as a unique value
• As a function of the incoming context (context) properties to perform
• Delete function is completed properties change
• Return the execution result

Function.prototype.myCall = function(context,...args){
    context = (context ?? window) || new Object(context);
    const key = Symbol();
    context[key] = this;
    const result = context[key](...args);
    delete context[key];
    return result;
}

Mode apply

• As part of the call before
• The second parameter may not pass, but must be an array type or array-

Function.prototype.myApply = function(context) {
    context =  (context ?? window) || new Object(context)
    const key = Symbol()
    const args = arguments[1]
    context[key] = this
    let result
    if(args) {
        result = context[key](...args)
    } else {
        result = context[key]
    }
    delete context[key]
    return result
}

Mode bind

• Use call / apply specified this
• Return a binding function
• When the return as a function of binding constructor is called new, context-bound instance of an object point
• Set the binding function prototype for the original function prototype

Function.prototype.myBind = function(context, ...args) {
    const fn = this
    const bindFn = function (...newFnArgs) {
        fn.call(
            this instanceof bindFn ? this : context,
            ...args, ...newFnArgs
        )
    }
    bindFn.prototype = Object.create(fn.prototype)
    return bindFn
}

Deep copy

• Determining whether the type is a primitive type, and if so, returns directly copied without
• To avoid circular references, when the copy of the object to determine whether there is storage space in the current object, if there is return directly
• Open a storage space to store the current object and the copy object corresponding relationship
• Reference to the type attribute is recursively until the original copy type

const deepClone = (target, cache = new WeakMap()) => {
    if(target === null || typeof target !== 'object') {
        return target
    }
    if(cache.get(target)) {
        return target
    }
    const copy = Array.isArray(target) ? [] : {}
    cache.set(target, copy)
    Object.keys(target).forEach(key => copy[key] = deepClone(obj[key], cache))
    return copy
}

Anti-shake function

• this inherited from the parent context, pointing to the target element that triggered the event
• When the event is triggered, the event object passed
• Incoming leading parameter to determine whether the callback function can be executed immediately, stop unnecessary to wait until the event is triggered after the start of execution
• The callback function can return a value, the results need to return

const debounce = (fn, wait = 300, leading = true) => {
    let timerId, result
    return function(...args) {
        timerId && clearTimeout(timerId)
        if (leading) {
            if (!timerId) result = fn.apply(this, args)
            timerId = setTimeout(() => timerId = null, wait)
        } else {
            timerId = setTimeout(() => result = fn.apply(this, args), wait)
        }
        return result
    }
}

Throttling function (timer)

函数停止触发后 n妙后开始执行，停止触发后继续执行一次事件
const throttle = (fn, wait = 300) => {
    let timerId
    return function(...args) {
        if(!timerId) {
            timerId = setTimeout(() => {
                timerId = null
                return result = fn.apply(this, ...args)
            }, wait)
        }
    }
}

Throttling function (time stamp)

Immediately after the execution, after the stop trigger function triggers an event is not executed

const throttle = (fn, wait = 300) => {
    let prev = 0
    let result
    return function(...args) {
        let now =  new Date()
        if(now - prev > wait) {
            prev = now
            return result = fn.apply(this, ...args)
        }
    }
}

Version ES6 inheritance

ES5 inheritance, in essence, is the first instance of an object to create a sub-class, and then add the parent class method and then to this. ES6 succession, the first instance of an object to create the parent class (so you must call the super method, and then use the constructor subclass modify this.

class Super {    constructor(foo) {      this.foo = foo    }    printFoo() {      console.log(this.foo)    }  }       class Sub extends Super {    constructor(foo, bar) {      super(foo)      this.bar = bar    }  }js

Above all as a part of P5 should have the basic skills, and I will continue to update this side face a series of questions for the call, apply, bind something is unclear difficult to understand can see my previous article, let your article completely clear here that the ES6 subsequent inheritance so I will combine object-oriented programming and design patterns were you on, attention tu teacher said front-end with your whole stack Fun