API前端之路

Peco
195 阅读4分钟

复习之前所有API

  • 查看是否有哪些知识点有所遗漏，这篇文章稍微有些杂，等我总结差不多会整体的梳理一遍
  • 下面是数组和字符串的记忆脑图便于记忆，有时候有些api会极易混淆

数组方法

字符串方法

对象的方法

  1. Object.assign(target, ...sources):将目标对象拷贝到源对象中，如有相同键值，目标对象覆盖源对象属性。属于浅拷贝。
  2. Object.create(proto, [propertiesObject]):create经典用法：类式继承。能达到(class My extends Person)一样的效果。
  3. Object.getPrototypeOf(object):该方法返回对象的原型对象，如果没有的话，则返回null。需要指出的是，对于函数对象，其返回的并不是显式原型（prototype），而是隐式原型（proto），该方法兼容IE9及以上的浏览器。
  4. Object.defineProperty(obj,prop,descriptor) 方法在obj对象上对prop属性进行定义或修改，其中descriptor为被定义或修改的属性符。其中对于descriptor属性符可以设置的值如下显示：
    • 【value】表示属性的值，默认为undefined
    • 【writable】该属性是否为可写，如果直接在对象上定义属性，则默认为true。如果设置为false，则属性仅为可读。
    • 【configurable】 如果为false的话，则不能修改（writabel,configurable,enumerable），如果直接在对象上定义属性，则默认为true
    • 【enumerable】是否能够被枚举，如果直接在对象上定义属性，则默认为true。
    • 【get】当对象访问prop属性的实话，会调用这个方法，并返回结果。默认为undefined
    • 【set】当对象设置该属性的时候，会调用这个方法，默认为undefined。
  5. Object.getOwnPropertyDescriptor(obj, prop):该方法返回obj上所有自身可枚举和不可枚举的属性(不包括原型链上的属性)，如果传入的obj不是数组，则会报错。该方法的兼容IE9及以上的浏览器。
  6. Object.is(val1,val2): 功能与‘===’相同，但修复了‘===’运算符0与-0相等，NaN与NaN不等的bug。
  7. Object.keys(obj): 返回遍历对象可枚举属性的键值数组，（原型链中属性无法遍历）
  8. Object.entries(obj):返回遍历对象可枚举属性的键值对数组，（原型链中属性无法遍历）
  9. Object.preventExtensions():该方法可以让一个对象永远不能添加新的属性，在严格模式下，如果强行为对象添加属性，会报错.
  10. Object.seal(obj):其对一个对象进行密封，并返回被密封的对象，这些对象都是不能够添加属性，不能删除已有属性，以及不能够修改已有属性的可枚举型、可配置型、可写性。
  11. Object.freeze(obj):该方法将obj对象冻结，其任何属性都是不可以被修改的。现在我们演示下这个用法。

DOM事件

DOM事件级别

  • DOM0：element.onclick = function(){}
  • DOM2：element.addEventListener('click', function(){}, false)
  • DOM3：element.addEventListener('keyup', function(){}, false)

DOM2中布尔值，指定事件是否 在捕获或冒泡阶段执行。 可能值：true - 事件句柄在捕获阶段执行，false- 默认。事件句柄在冒泡阶段执行

DOM3中相比DOM2新增了一些事件类型

事件捕获与事件冒泡

  • 事件捕获：window->document->html -> body -> ... -> 目标元素。（从外往内触发）
  • 事件冒泡：目标元素 -> ... -> body -> html -> document -> window。（从内往外触发）

Event 对象常见应用

  • event.preventDefault() ->取消事件的默认动作。

  • event.stopPropagation()->止事件冒泡。

  • event.stopImmediatePropagation()->阻止剩下的事件处理程序被执行。如果一个元素上绑定了三个事件，在其中一个事件上调用了这个方法，那其他 的两个事件将不会被执行。

防抖和节流

  • 防抖：并不是触发事件而是合并事件，触发事件后在一定时间没有继续触发，会执行函数，分为立即执行和非立即执行
/**
 * @desc 函数防抖
 * @param fn 函数
 * @param delay 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
var debounce = (fn, delay = 500, immediate = false, ...arg)=>{
    var timeOut
    return ()=>{
        var ctx = this
        if(timeOut) clearTimeOut(timeout)
        var callOn = !timeOut
        if(immediate){
            timeOut=setTimeOut(()=>{
                timeOu=null
            },dalay)
            if(callOn)fn.apply(ctx,arg)
        }else{
            timeOut = setTimeOut(()=>{
                fn.apply(ctx,arg)
            },delay)
        }
    }
}
  • Hook
  • 节流：会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。如果一直触发会在规定时间有规律的执行。
var throttle = (fn, wait = 500, type = 1, ...arg){
       if(type == 1){
              var preTime = 0 
       }else{
              var timeoOut
       }
       return ()=>{
              var ctx = this
              if(type == 1){
                     var nowTime = Date.now()
                     if(nowTime-preTime > wait){
                            fn.apply(ctx,arg)
                     }
              }else{
                     timeOut = setTimeOut(()=>{
                            timeOut = null
                            fn.apply(ctx,arg)
                     },wait)
              }
       }
}

原型、构造函数、实例、原型链

  • 创建对象的4种方法
  1. var obj1 = new Object()
  2. var obj2 = {}
  3. var obj3 = object.create()
  4. function Obj4(){}; var obj4 = new obj4()
  • 原型链

new obj4() === obj4

obj4.proto === Obj4.prototype

Obj4.prototype.constructor === Obj4

avatar
文章
阅读
粉丝