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 的其他常用功能
- let / const
- 多行字符串/模版变量
- 结构赋值
- 块级作用域
- 函数默认参数
- 箭头函数
多行字符串/模版变量
结构赋值
数组那个定义的三个变量 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;
es6 知识点总结(模块化 异步)的更多相关文章
- es6中的模块化
在之前的javascript中是没有模块化概念的.如果要进行模块化操作,需要引入第三方的类库.随着技术的发展,前后端分离,前端的业务变的越来越复杂化.直至ES6带来了模块化,才让javascript第 ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- es6常用功能与异步详解(JS高级面试题)
callback hell方法的使用 可读性不友好 function loadImg(src,callback,fail){ var img = document.createElement('img ...
- 【前端开发】ES6知识点系统化梳理笔记
>ES6扩展: #Map和Set是es6标准新增的数据类型 ##Map是key-value(关键字-值),Map允许修改value,不允许修改key,Map支持下标操作 var m = new ...
- ES6知识点大汇总
1 //1.搭建ES6的开发环境: 2 let a=1; 3 console.log(a); 4 //2.var 声明的是全局变量 全局变量会污染外部的区块 5 //let 局部变量 6 //cons ...
- ES2015也就是ES6知识点持续更新
ES6,全名:ECMAScript2015,先扯点其他的,ECMA是一个国际标准化组织,它最重要最重要的作用就是让ECMAScript这门语言标准化,什么意思呢?我们知道,js这门脚本语言是运行在浏览 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- 【ES6】Generator+Promise异步编程
一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...
- es6 generator函数的异步编程
es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数 将函数 ...
随机推荐
- luoguP1463:反素数ant(打表心得☆)
题目描述 对于任何正整数x,其约数的个数记作g(x).例如g()=.g()=. 如果某个正整数x满足:g(x)>g(i) <i<x,则称x为反质数.例如,整数1,,,6等都是反质数. ...
- mysql 数据库批量刷新表字段数据
UPDATE a,bSET b.studentno = a.studentnumber WHERE b.studentno IS NULL AND a.p_id = b.p_id
- shell将txt转换为csv
cat aa.txt | tr -s '[:blank:]' ',' > bb.csv
- Java面试 - 什么是单例设计模式,为什么要使用单例设计模式,如何实现单例设计模式(饿汉式和懒汉式)?
什么是单例设计模式? 单例设计模式就是一种控制实例化对象个数的设计模式. 为什么要使用单例设计模式? 使用单例设计模式可以节省内存空间,提高性能.因为很多情况下,有些类是不需要重复产生对象的. 如果重 ...
- [CF788B]Weird journey_欧拉回路
Weird journey 题目链接:http://codeforces.com/contest/788/problem/B 数据范围:略. 题解: 我们发现就是要求,把每条无向边拆成两条无向边,其中 ...
- 系统集成Facebook授权发布帖子以及获取帖子评论等功能
公司的业务和海外贸易紧密连接,项目中需要对接Facebook.Google.Twitter相关API,下面详细描述一下我们对接Facebook中遇到的问题 1,注册Facebook账户,Faceboo ...
- docker部署mysql,nginx,php,并上传镜像到私有仓库
前言 最近公司准备把现有环境全部搞成容器化,所以笔者就先了解了一下docker,并搞了一搞,并把自己搞的过程记录下来.话不多说直接开干 环境说明 Centos7 Docker version 18.0 ...
- Elasticsearch 介绍及应用
Elasticsearch简单介绍 Elasticsearch (ES)是一个基于Lucene构建的开源.分布式.RESTful 接口全文搜索引擎.Elasticsearch 还是一个分布式文档数据库 ...
- hdu 1285 拓扑
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 使用ef core自动生成mysql表和数据编码的问题
mysql默认的编码是不支持中文的,需要改成utf8编码格式. 而我使用的Pomelo.EntityFrameworkCore.MySql组件生成mysql库和表,他是使用默认编码的. 网上大多说修改 ...