前端小知识

一浮南木
427 阅读5分钟

1、如何改变this的指向

我们可以通过调用函数的call apply bind来改变this的指向。

  • 相同点：

    • 三者都能够改变this的指向问题，且第一个传递的参数都是this指向的对象。
    • 三者都是采用后续传参的形式。

  • 不同点：

    • call的传参是单个传递，而apply的传参都是以数组的形式进行传递，同时bind的传参形式和call相同
    • call和apply的执行都是直接执行，而bind的执行方式是返回一个函数，如何调用这个函数才能执行。

  • call： 屏幕截图 call.png

  • apply: 屏幕截图 apply.png

  • bind: 返回的是一个函数
    屏幕截图 bind.png

2、闭包

  • 什么是闭包：
    • 内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数，但是在函数外部则不能访问函数的内部变量和嵌套函数，此时可以使用“闭包”来实现。 屏幕截图 闭包概念.png
  • 正常来说，当info1函数执行完毕之后，其作用域是会被销毁的，然后垃圾回收器会释放那段内存空间。而闭包却很神奇的将info1的作用域存活了下来，info2依然持有该作用域的引用，这个引用就是闭包。
  • for循环中使用定时器延迟打印的问题 屏幕截图 for循环.png
  • 在这段代码中，我们对其的预期是输出1~10，但却输出10次11。这是因为setTimeout中的匿名函数执行的时候，for循环都已经结束了，for循环结束的条件是i大于10，所以当然是输出10次11。
  • 究其原因：i是声明在全局作用中的，定时器中的匿名函数也是执行在全局作用域中，那当然是每次都输出11。
  • 因此，我们可以让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值。 屏幕截图 for循环 迭代.png

3、Ajax基础

  • 什么是Ajax
    • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • 原理详解
    • Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。
    • 并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就感觉更加流畅了
  • 特点
    • 不是编程语言，而是一种使用现有标准的新方法
    • 无需加载整个界面，可与服务器交换数据，更新部分网页
    • 不需要浏览器插件，但需要用户允许js在浏览器上运行
  • 发送Ajax请求步骤
    • 1.创建XMLHttpRequest类型的对象
    • 2.准备发送，打开与一个网址之间的连接
    • 3.执行发送动作
    • 4.指定xhr状态变化事件处理函数
  • 优点
    • 无刷新更新数据
    • 异步与服务器通信
    • 前端和后端负载平衡
    • 基于标准被广泛支持
    • 界面与应用分离
  • 缺点
    • AJAX干掉了Back和History功能，即对浏览器机制的破坏
    • AJAX的安全问题
    • 对搜索引擎支持较弱
    • 破坏程序的异常处理机制
    • 违背URL和资源定位的初衷
    • AJAX不能很好支持移动设备
    • 客户端过肥，太多客户端代码造成开发上的成本
  • 原生js实现步骤
    • 第一步，创建XMLHttpRequest对象（浏览器兼容性）
    • 第二步，注册回调函数
    • 第三步，创建请求，指定请求类型、地址、异步/同步
    • 第四步，发送请求
    • 第五步，异步获取响应数据
    • 第六步，利用js与DOM进行页面局部刷新
  • 方法
    • open() 作用： 初始化请求
      • xhr.open(method,url,async,user,password)
      • method 请求方式：如 get，post
      • url 请求路径，可以为相对路径也可以为绝对路径
      • async 是否为异步请求 传布尔值 默认为true
      • user 用户名 为可选参数，默认参数为空string
      • password 密码，为可选参数，默认参数为空string
    • send() 作用: 发送请求。参数为发送的请求体，不传请求体的话最好传个null
    • setRequestHeader() 作用：设置请求头。参数两个，第一个请求体名称header，第二个要赋的值value
    • abort() 作用：取消当前响应，关闭连接并且结束任何未决的网络活动。
    • getResponseHeader() 作用：返回指定响应头的值。参数：响应头的名称。
    • getAllResponseHeaders() 作用：返回所有头部信息的字符串。
  • json字符串与json对象的相互转化
    • 字符串转对象 JSON.parse(str)
    • 对象转字符串 JSON.stringify(obj)
  • JQuery中的Ajax请求 屏幕截图 AJax.png

4、vue插槽

  • 默认插槽
    • 所谓默认插槽，就是这个插槽里，没有声明任何名称，使用者放进来的东西，都扔进这个插槽中。
      屏幕截图 默认插槽.png
  • 具名插槽
    • 所谓具名插槽，就是这个插槽里，这个插槽被命了名，使用者放进来的东西，声明了插槽的名称，会被分发进这个具名插槽中。
      屏幕截图 具名插槽1.png 屏幕截图 具名插槽2.png
  • 作用域插槽
    • 一种能够将子组件可用的内容暴露给父组件的插槽。 屏幕截图 作用域插槽.png

屏幕截图 作用域插槽1.png

5、函数的防抖和节流

  • 函数防抖
    • 概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
    • 应用场景：
      • 给按钮加函数防抖防止表单多次提交。
      • 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
      • 判断scroll是否滑到底部，滚动事件+函数防抖 屏幕截图 函数防抖.png
  • 函数节流
    • 概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
    • 应用场景：
      • 游戏中的刷新率
      • DOM元素拖拽
      • Canvas画笔功能 屏幕截图 事件节流.png
avatar
文章
阅读
粉丝