zoukankan      html  css  js  c++  java
  • es6 知识点总结(模块化 异步)

    问题:

    什么是单线程和异步有什么关系?

    什么是 event-loop

    是否用过 jquery的deferred

    promise的基本使用和原理

    介绍一下 async/await(和Promise 的区别 联系)

     1 ES6 模块化如何使用,开发环境如何打包?
      1.1 模块化的基本语法
          (1) export 语法

        /* util1.js*/
          export default {
              a:100
          }
          /* util2.js*/
          export function fn1() {
              alert('fn1');
          }
          export function fn2() {
              alert('fn2');
          }


          (2)引用方法: import 语法

        /* index.js */
          import util1 from './util1.js'
          import {fn1, fn2} from './util1.js'
    
          console.log(util1);
          fn1();
          fn2();

      1.2 开发环境配置

    1.3 关于JS众多模块化标准

    2 Class和普通JS构造函数有何区别?

     2.1 JS构造函数

    2.2 Class语法

    class 其实是一个语法糖

    m.__proto__ === MathHandle.prototype //true

    JS 的继承

    Class的继承

    对class做typeof判断是 function,和constructor相等 说明是其语法糖。

    Class 在语法上更加贴切面向对象的写法;

    class 实现继承更加易读和理解;


    3。Promise 的基本使用和原理?

    callback hell(Promise解决异步操作 callback hell)

    callback异步回调函数所有的复杂操作 要写在 console.log(img.width) 这里。

     promise的用法:

    调用方式:

    比callback hell 方便的是 一个 result.then 中干一件事 否则的话 所有的获取高度 宽度都要在callback的第一个函数中执行。


    ES6 的其他常用功能

    1. let / const
    2. 多行字符串/模版变量
    3. 结构赋值
    4. 块级作用域
    5. 函数默认参数
    6. 箭头函数
       

    多行字符串/模版变量

     结构赋值

     数组那个定义的三个变量 x y z 分别表示数组arr的前三项;

     块级作用域

     

    es6中 在块级作用域中定义的item 在作用域外无法访问到的;

    函数默认参数:

    箭头函数

    fn.call({a:100})    call表示 fn执行的时候 强制把this指向了参数 {a:100}

     箭头函数的this指向了 函数体外离得最近的 一个this,而不是像原来的 es5 中的默认指向了 window

     二  异步问题

    什么是单线程,和异步有什么关系?

    什么事event-loop

    是否用过 Jquery 的 Deferred

    Promise的基本使用和原理

    介绍一下 async/await(和Promise的区别,联系)

    总结一下当前的 JS解决异步方案

    2.1。什么是单线程,和异步有什么关系?

    单线程:只有一个线程,一个时间只能做一个事情;

    原因: 避免 DOM 渲染的冲突

    解决方案: 异步

    为啥使用的是单线程:原因 避免 DOM 渲染冲突

    解决方案:异步:

    console.log('start');
    setTimeout(function(){
        console.log('延时');  //即便是写的 延时0ms 也是在执行所有的代码之后 在去执行延时的代码
    },0)
    for(var i=0;i<1000;i++){
        console.log(i);
    }
    console.log('end');

    2.2 什么事event-loop

    事件轮询,JS 实现异步的具体解决方案;

    同步代码,直接执行。

    异步代码先放在异步队列中

    待同步函数执行完毕后,轮询执行异步队列的函数

    实例2:

    事件轮询,一直循环监听异步队列中的事件,一旦监听到,就放在主进程中,执行

    是否用过 Jquery 的 Deferred

    示例(1)

     示例(2)

     

    示例(3)

    设计模式之一:开放封闭原则

    例如 在示例(1)中,如果想打印 4。只能在原来的success代码中进行修改,也就是改动了原来的代码;

    而示例(2)(3)中,只需要新增一个 done()或 then()函数,也就是和原来的代码没啥影响;

    因此,这个设计模式就是说,要留下可以增加的入口,而不是改动之前的代码。

    对比代码: 使用deferred之前:

    使用deferred:

    dta为deferred对象,它在wait函数中作为参数传入,然后在wait函数中 最后return(为了链式操作),中间在 task函数中 dta.resolve 执行完成任务,dtd.reject执行任务失败方法。

    promise 捕获异常:

    throw new Error 模拟的是程序中的语法等错误,如果是图片确实没有加载进来(类似于ajax中返回的信息有误)这种错误就会进到 reject()

    如果有错误,则执行 reject 函数,reject('错误信息'), 则在catch 中的 ex参数中显示出来。

    then只接受一个参数,最后统一用 catch 捕获异常,这样then中不用写两个参数了

     ==============================

    多个promise串联操作,比如获取到第一个接口信息之后,再请求第二个接口:

     

    async / await

    promise 中的 then 只是将 callback 拆分了
    async / await 是最直接的同步写法

     

    其中 loadImg 还是和上面用 promise定义的,完整用法如下:

    生成器Generator:

    function *foo(x) {
      let y = 2 * (yield (x + 1))
      let z = yield (y / 3)
      return (x + y + z)
    }
    let it = foo(5)
    console.log(it.next())   // => {value: 6, done: false}
    console.log(it.next(12)) // => {value: 8, done: false}
    console.log(it.next(13)) // => {value: 42, done: true}
    解析:
    let it = foo(5) 并不会执行 yield,会返回一个Iterator实例, 然后再执行Iterator实例的next()方法
    如果给next方法传参数, 那么这个参数将会作为上一次yield语句的返回值
    所以 it.next() 时,会返回在 let y = 2 * (yield (x + 1))这句话的,yield (x + 1), foo传进来的参数 5 ,则
    返回 5+1 = 6;
    第二次执行 it.next(12);会从上一次暂停的位置开始 let y = 2 * (yield (x + 1))
    且 传参12 等于yield (x + 1),所以 y = 2* 12 = 24;且返回第二个 yield处
    yield (y / 3) == 24/3 == 8;
    第三次 it.next(13) 会从上一次yield处开始let z = yield (y / 3);传入的参数等于 let z = yield (y / 3) =13;
    综上所述 x=5;y=24;z=13;
  • 相关阅读:
    进程
    并发编程
    操作系统的发展史
    __init__、__new__、__call__ 方法
    MongoDB文档操作
    MongoDB集合操作
    MongoDB数据库操作
    MongoDB连接
    MongoDB的文档存储结构
    MongoDB 概念
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/10888576.html
Copyright © 2011-2022 走看看