asahi/rikako-note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

daily commit

Browse Source
This commit is contained in:
Rikako Wu
2022-06-23 00:13:20 +08:00
parent 353e5c3ae6
commit 2256f01792
11 changed files with 2201 additions and 1924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
javascript/dom.md
View File

@@ -1,61 +1,61 @@
# dom
- ## js中dom模型的简介
- js的dom中常用对象：
- window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
- 返回窗口大小
- 操作导入window中的document
- 存储特定页面的数据
- 在当前document中添加handler
- navigator：可以通过该对象来检索浏览器的状态和身份信息
- document：代表载入window的html文档
- dom树形结构：
- root node：在dom树结构中，根节点总是html节点
- 子节点：直接位于另一个节点内的节点
- 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
- 父节点：如果一个节点直接包含另一个节点
- 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
- ## document api查找节点元素
- querySelector：
- document.querySelector()会返回第一个匹配的元素
```javascript
document.querySelector("p")
```
- querySelector:
- 返回所有满足条件的元素，按照NodeList的形式返回
```javascript
document.querySelectorAll("p")
```
- ## document api创建新元素
- document.createElement:
```javascript
let node=document.createElement('p')
let p_node=document.querySelector('p')
p_node.apendChild(node)
```
- node.appendChild:通过该方法可以为节点插入新的子元素
- document.createTextNode：创建新的文本节点（类似与#text的子节点）
- ## document api 移除元素
- parentNode.removeChild：移除子元素
```javascript
let par_node=document.querySelector("div")
let child_node=document.querySelector("div > p")
par_node.removeChild(child_node)
```
- childNode.remove:对子元素可以直接调用remove
```javascript
let child_node=document.querySelector("div > p")
child_node
```
- ## js修改css样式
- 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
```javascript
let node=document.querySelector("p")
node.style.background="grey"
```
- 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
```javascript
let node=document.querySelector("p")
node.setAttribute('class','white-style')
```
# dom
- ## js中dom模型的简介
- js的dom中常用对象：
- window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
- 返回窗口大小
- 操作导入window中的document
- 存储特定页面的数据
- 在当前document中添加handler
- navigator：可以通过该对象来检索浏览器的状态和身份信息
- document：代表载入window的html文档
- dom树形结构：
- root node：在dom树结构中，根节点总是html节点
- 子节点：直接位于另一个节点内的节点
- 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
- 父节点：如果一个节点直接包含另一个节点
- 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
- ## document api查找节点元素
- querySelector：
- document.querySelector()会返回第一个匹配的元素
```javascript
document.querySelector("p")
```
- querySelector:
- 返回所有满足条件的元素，按照NodeList的形式返回
```javascript
document.querySelectorAll("p")
```
- ## document api创建新元素
- document.createElement:
```javascript
let node=document.createElement('p')
let p_node=document.querySelector('p')
p_node.apendChild(node)
```
- node.appendChild:通过该方法可以为节点插入新的子元素
- document.createTextNode：创建新的文本节点（类似与#text的子节点）
- ## document api 移除元素
- parentNode.removeChild：移除子元素
```javascript
let par_node=document.querySelector("div")
let child_node=document.querySelector("div > p")
par_node.removeChild(child_node)
```
- childNode.remove:对子元素可以直接调用remove
```javascript
let child_node=document.querySelector("div > p")
child_node
```
- ## js修改css样式
- 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
```javascript
let node=document.querySelector("p")
node.style.background="grey"
```
- 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
```javascript
let node=document.querySelector("p")
node.setAttribute('class','white-style')
```

110
javascript/export和import.md
View File

@@ -1,55 +1,55 @@
# js中的import和export
* ## export
* js中的导出方式可以分为两类
* named export： 同一个文件中可以导出多个named export
```javascript
// 导出预先定义的变量，按列表的形式
export {myFunction,myVariable}
// 导出重命名的变量，以列表形式
export {var1 as name1,var2 as name2...}
```
* default export：每一个module只允许有一个default export
```javascript
export {var as default}
export default function () {}
export default class
```
* export from 语法：
```javascript
export {default as name1,name2} from './other_modules.js'
// 等效于
import {default as name1,name2} from './other_modules.js'
export {name1,name2}
```
* ## import
* import特性：
* import用来导入被其他module导出的read-only绑定值
* import无法在嵌入的脚本（script标签中）使用，除非其script标签的type属性为module
* import语法
```javascript
// 导入default export
import defaultExport from './other_module.js'
// 导入module中所有输出到命名空间
import * as other_module from './other_module.js'
// 引用时可以将other_module视为引用导入module中导出元素的命名空间
other_module.exportFunction()
// 导入单个元素
import {myExport} from './other_module.js'
// 导入时进行重命名
import {myLongVariableName as shortName} from './other_module.js'
// 导入default export
import defaultExport from './other_module.js'
```
- ## dynamic import
- 动态加载：
- 静态加载会在启动时加载大量不会马上被用到的module，这回花费大量的时间
- 有些module在启动时可能并不存在
- 动态加载相比与静态加载，其可以通过import()函数在需要的时候才对module进行加载
- import函数详情
- import函数是一个异步函数，其接收一个module路径字符串并且返回一个promise，并且，该方法支持await关键字
# js中的import和export
* ## export
* js中的导出方式可以分为两类
* named export： 同一个文件中可以导出多个named export
```javascript
// 导出预先定义的变量，按列表的形式
export {myFunction,myVariable}
// 导出重命名的变量，以列表形式
export {var1 as name1,var2 as name2...}
```
* default export：每一个module只允许有一个default export
```javascript
export {var as default}
export default function () {}
export default class
```
* export from 语法：
```javascript
export {default as name1,name2} from './other_modules.js'
// 等效于
import {default as name1,name2} from './other_modules.js'
export {name1,name2}
```
* ## import
* import特性：
* import用来导入被其他module导出的read-only绑定值
* import无法在嵌入的脚本（script标签中）使用，除非其script标签的type属性为module
* import语法
```javascript
// 导入default export
import defaultExport from './other_module.js'
// 导入module中所有输出到命名空间
import * as other_module from './other_module.js'
// 引用时可以将other_module视为引用导入module中导出元素的命名空间
other_module.exportFunction()
// 导入单个元素
import {myExport} from './other_module.js'
// 导入时进行重命名
import {myLongVariableName as shortName} from './other_module.js'
// 导入default export
import defaultExport from './other_module.js'
```
- ## dynamic import
- 动态加载：
- 静态加载会在启动时加载大量不会马上被用到的module，这回花费大量的时间
- 有些module在启动时可能并不存在
- 动态加载相比与静态加载，其可以通过import()函数在需要的时候才对module进行加载
- import函数详情
- import函数是一个异步函数，其接收一个module路径字符串并且返回一个promise，并且，该方法支持await关键字

148
javascript/js canvas.md
View File

@@ -1,74 +1,74 @@
# js canvas
- ## canvas api
- 获取canvas元素：
```javascript
let canvas=document.querySelector(canvas_name)
```
- 获取canvas上下文：
```javascript
// 获取2d上下文，之后可以通过ctx操作canvas元素
let ctx=canvas.getContext("2d")
```
- 填充矩形：
```javascript
ctx.fillStyle='rgb(255,0,0)'
ctx.fillRect(0,0,100,100)
```
- 如果画了多个图形，那么按照画的顺序，后画的元素将会覆盖在先画的图形之上
- 通过为ctx.fillStyle指定rgba，可以画半透明的元素，alpha的值为0～1,值越接近0越透明
- 只画矩形轮廓
```javascript
ctx.strokeStyle='rgb(255,0,0)';
ctx.strokeRect(x,y,width,height);
// 默认情况下轮廓宽度是1px，但是可以通过ctx.lienWidth来调整宽度
ctx.lineWidth=5
```
- 画Path：画Path主要可以通过如下api
- ctx.beginPath：在当前所处的位置开始path
- ctx.moveTo：移动当前位置到指定位置，而不记录移动的线条
- ctx.lineTo：在path中记录线条
- ctx.fill：通过先前的path创建fill图形
- ctx.stroke：通过先前的path创建stroke图形
- 画圆形：通过ctx.arc画圆形
```javascript
// arc有6个参数，分别如下
// 1～2： 圆心的x和y坐标
// 3：半径的像素
// 4～5：开始的角度和结束的角度（弧度制）
// 6：是否按逆时针画
// arc的0度是水平向右
ctx.arc(100,100,100,0,2*Math.Pi,true)
// 默认情况下0度位于水平向右，但是角度增长默认是顺时针方向，在没有指定第六个参数时其默认也是顺时针方向绘制（第六个参数为false）。但是可以指定第六个参数为true，指定为true会逆时针方向绘制
// 当path不是封闭图形时，调用fill时会将开始位置和结束位置连接后填充
```
- 在canvas中绘制text文本
- 可以通过ctx.fillText来绘制填充文本
- 可以通过ctx.strokeText来绘制文本边框
- 可以通过ctx.font来修改字体的种类和大小
```javascript
// fillText接受3个参数
// 1.想要绘制的文本
// 2.绘制文本的开始x位置
// 3.绘制文本的开始y位置
// 绘制文本的开始位置是左下角位置，并不是左上角
ctx.fillText(str,x,y)
```
- 在canvas中绘制图片
- 可以通过ctx.drawImage在canvas中绘制图片，其接受如下参数：
- 一个image对象的引用
- 想要绘制的图片的裁剪部分左上角的x坐标和y坐标
- 想要绘制的图片的裁剪部分的width和height
- 想要将裁剪部分绘制在canvas上的位置，相对于（0,0）的x和y坐标
- 指定想要绘制裁剪部分的width和height，可以与裁剪部分的width和height相同，也可以将裁剪部分resize
```javascript
ctx.drawImage(image,image_x,image_y,image_width,image_height,0,0,image_x,image_y)
```
- 在canvas中创建动画：
- 常用的api：
- ctx.translate: 移动canvas和其origin point，水平方向移动x像素，垂直方向移动y单位
- ctx.rotate：旋转整个canvas，以origin point为中心
- 创建动画的api：
- window.requestAnimationFrame(func)来令动画以特定的帧率刷新（60帧/s）
- 通过向requestAnimationFrame来传递一个函数刷新canvas，并且func中继续调用requestAnimationFrame来获取下一帧
- 当不想继续动画时，可以不再在func中调用requestAnimationFrame，或者可以调用cancelAnimationFrame来停止获取下一帧动画
# js canvas
- ## canvas api
- 获取canvas元素：
```javascript
let canvas=document.querySelector(canvas_name)
```
- 获取canvas上下文：
```javascript
// 获取2d上下文，之后可以通过ctx操作canvas元素
let ctx=canvas.getContext("2d")
```
- 填充矩形：
```javascript
ctx.fillStyle='rgb(255,0,0)'
ctx.fillRect(0,0,100,100)
```
- 如果画了多个图形，那么按照画的顺序，后画的元素将会覆盖在先画的图形之上
- 通过为ctx.fillStyle指定rgba，可以画半透明的元素，alpha的值为0～1,值越接近0越透明
- 只画矩形轮廓
```javascript
ctx.strokeStyle='rgb(255,0,0)';
ctx.strokeRect(x,y,width,height);
// 默认情况下轮廓宽度是1px，但是可以通过ctx.lienWidth来调整宽度
ctx.lineWidth=5
```
- 画Path：画Path主要可以通过如下api
- ctx.beginPath：在当前所处的位置开始path
- ctx.moveTo：移动当前位置到指定位置，而不记录移动的线条
- ctx.lineTo：在path中记录线条
- ctx.fill：通过先前的path创建fill图形
- ctx.stroke：通过先前的path创建stroke图形
- 画圆形：通过ctx.arc画圆形
```javascript
// arc有6个参数，分别如下
// 1～2： 圆心的x和y坐标
// 3：半径的像素
// 4～5：开始的角度和结束的角度（弧度制）
// 6：是否按逆时针画
// arc的0度是水平向右
ctx.arc(100,100,100,0,2*Math.Pi,true)
// 默认情况下0度位于水平向右，但是角度增长默认是顺时针方向，在没有指定第六个参数时其默认也是顺时针方向绘制（第六个参数为false）。但是可以指定第六个参数为true，指定为true会逆时针方向绘制
// 当path不是封闭图形时，调用fill时会将开始位置和结束位置连接后填充
```
- 在canvas中绘制text文本
- 可以通过ctx.fillText来绘制填充文本
- 可以通过ctx.strokeText来绘制文本边框
- 可以通过ctx.font来修改字体的种类和大小
```javascript
// fillText接受3个参数
// 1.想要绘制的文本
// 2.绘制文本的开始x位置
// 3.绘制文本的开始y位置
// 绘制文本的开始位置是左下角位置，并不是左上角
ctx.fillText(str,x,y)
```
- 在canvas中绘制图片
- 可以通过ctx.drawImage在canvas中绘制图片，其接受如下参数：
- 一个image对象的引用
- 想要绘制的图片的裁剪部分左上角的x坐标和y坐标
- 想要绘制的图片的裁剪部分的width和height
- 想要将裁剪部分绘制在canvas上的位置，相对于（0,0）的x和y坐标
- 指定想要绘制裁剪部分的width和height，可以与裁剪部分的width和height相同，也可以将裁剪部分resize
```javascript
ctx.drawImage(image,image_x,image_y,image_width,image_height,0,0,image_x,image_y)
```
- 在canvas中创建动画：
- 常用的api：
- ctx.translate: 移动canvas和其origin point，水平方向移动x像素，垂直方向移动y单位
- ctx.rotate：旋转整个canvas，以origin point为中心
- 创建动画的api：
- window.requestAnimationFrame(func)来令动画以特定的帧率刷新（60帧/s）
- 通过向requestAnimationFrame来传递一个函数刷新canvas，并且func中继续调用requestAnimationFrame来获取下一帧
- 当不想继续动画时，可以不再在func中调用requestAnimationFrame，或者可以调用cancelAnimationFrame来停止获取下一帧动画

200
javascript/js storage.md
View File

@@ -1,100 +1,100 @@
# js storage
- ## js在客户端存储数据的方式
- Web Storage api：通常用来存储简单的数据，以name-value的形式存储
- ## Web Storage api
- 存储种类：
- localStorage
- 该种方式即使浏览器被关闭，数据仍然不会丢失，下次重新打开浏览器时数据仍然存在
- 无论刷新还是关闭页面，数据仍然不会丢失
- sessionStorage：
- 该种方式只会在浏览器打开时存储数据，一旦浏览器被关闭，存储的数据会消失
- 该方式存储的数据在刷新页面后仍然会存在，但是当页面关闭后，数据会丢失
- 存储信息和删除信息方式：
- localStorage：
```javascript
localStorage.setItem(name,value)
localStorage.getItem(name)
localStorage.removeItem(name)
```
- sessionStorage:
```javascript
sessionStorage.setItem(name,value)
sessionStorage.getItem(name)
session.removeItem(name)
```
- 对于不同的域名，Storage是分别储存的，位于同一域名下的页面可以共享Storage中存储的信息，但是位于不同域名的页面Storage信息无法共享
- ## indexedDB
- 数据库操作（数据库操作都是异步的，不必在数据库操作进行时阻塞，可以为数据库操作请求添加handler来处理完成的请求）
- 打开db：
```javascript
// 该方法会打开name指定的数据库，如果该数据库不存在，
// 会创建一个新的数据库
let db_request=window.indexedDB.open(name,version)
```
- 为数据库操作添加handler：
```javascript
// 可以为数据库操作添加success、error的handler
db_request.addEventHandler('success',handler)
db_request.addEventHandler('error',error_handler)
// 为upgradeneeded事件指定handler
// 如果一个数据库还没有被设置，或者该数据库打开
// 的版本号大于其本身版本号
db_request.addEventHnalder((e)=>{
db=e.target.result
obj_store=db.createObjectStore(name,{keyPath:"id",autoIncrement:true})
obj_store.createIndex(name,value,{unique:false})
})
```
- 如果打开数据库操作完成，会触发success事件，打开的数据库对象可以通过db_request.result来访问
- 如果打开数据库操作失败，会触发error事件
- 数据库如果没有被设置，会抛出upgradeneeded事件，并且upgradeneeded事件在success事件之前
- 向数据库的ObjectStore中添加记录：
- 首先要开启一个事务，通过db.transaction([objectStoreName...],mode:"readwrite")
```javascript
let tr=db.transaction([obj_store...],"readwrite")
```
- 通过事务获取object store对象
```javascript
let obj_store=tr.objectStore(obj_store)
```
- 调用add操作向object store中添加记录，并且为返回的request对象的事件添加监听器
```javascript
let add_request=obj_store.add({
key1:value1,
key2:value2,
...
})
// 为request的success事件添加handler
add_request.addEventHanlder('success',success_handler)
// 为transaction的complete事件添加handler
tr.addEventHandler('complete',handler)
// 为事务的error事件添加handler
tr.addEventHandler('error',err_handler)
```
- 遍历objectStore对象中的记录
```javascript
let object_store=db.transaction(object_store_name).objectStore(obj_store_name)
object_store.openCursor().addEventHandler('success',(e)=>{
// 获取request.result的结果值
const cursor=e.target.result
if(cursor) {
// 操作数据
// 迭代到下一个项目
// 如果还存在下一个记录，那么request的success
// 事件会再次被触发
cursor.continue()
}
})
```
- 删除objectStore中的记录
```javascript
objectStore.delete(primary_key)
tr.addEventHandler('complete',handler)
```
# js storage
- ## js在客户端存储数据的方式
- Web Storage api：通常用来存储简单的数据，以name-value的形式存储
- ## Web Storage api
- 存储种类：
- localStorage
- 该种方式即使浏览器被关闭，数据仍然不会丢失，下次重新打开浏览器时数据仍然存在
- 无论刷新还是关闭页面，数据仍然不会丢失
- sessionStorage：
- 该种方式只会在浏览器打开时存储数据，一旦浏览器被关闭，存储的数据会消失
- 该方式存储的数据在刷新页面后仍然会存在，但是当页面关闭后，数据会丢失
- 存储信息和删除信息方式：
- localStorage：
```javascript
localStorage.setItem(name,value)
localStorage.getItem(name)
localStorage.removeItem(name)
```
- sessionStorage:
```javascript
sessionStorage.setItem(name,value)
sessionStorage.getItem(name)
session.removeItem(name)
```
- 对于不同的域名，Storage是分别储存的，位于同一域名下的页面可以共享Storage中存储的信息，但是位于不同域名的页面Storage信息无法共享
- ## indexedDB
- 数据库操作（数据库操作都是异步的，不必在数据库操作进行时阻塞，可以为数据库操作请求添加handler来处理完成的请求）
- 打开db：
```javascript
// 该方法会打开name指定的数据库，如果该数据库不存在，
// 会创建一个新的数据库
let db_request=window.indexedDB.open(name,version)
```
- 为数据库操作添加handler：
```javascript
// 可以为数据库操作添加success、error的handler
db_request.addEventHandler('success',handler)
db_request.addEventHandler('error',error_handler)
// 为upgradeneeded事件指定handler
// 如果一个数据库还没有被设置，或者该数据库打开
// 的版本号大于其本身版本号
db_request.addEventHnalder((e)=>{
db=e.target.result
obj_store=db.createObjectStore(name,{keyPath:"id",autoIncrement:true})
obj_store.createIndex(name,value,{unique:false})
})
```
- 如果打开数据库操作完成，会触发success事件，打开的数据库对象可以通过db_request.result来访问
- 如果打开数据库操作失败，会触发error事件
- 数据库如果没有被设置，会抛出upgradeneeded事件，并且upgradeneeded事件在success事件之前
- 向数据库的ObjectStore中添加记录：
- 首先要开启一个事务，通过db.transaction([objectStoreName...],mode:"readwrite")
```javascript
let tr=db.transaction([obj_store...],"readwrite")
```
- 通过事务获取object store对象
```javascript
let obj_store=tr.objectStore(obj_store)
```
- 调用add操作向object store中添加记录，并且为返回的request对象的事件添加监听器
```javascript
let add_request=obj_store.add({
key1:value1,
key2:value2,
...
})
// 为request的success事件添加handler
add_request.addEventHanlder('success',success_handler)
// 为transaction的complete事件添加handler
tr.addEventHandler('complete',handler)
// 为事务的error事件添加handler
tr.addEventHandler('error',err_handler)
```
- 遍历objectStore对象中的记录
```javascript
let object_store=db.transaction(object_store_name).objectStore(obj_store_name)
object_store.openCursor().addEventHandler('success',(e)=>{
// 获取request.result的结果值
const cursor=e.target.result
if(cursor) {
// 操作数据
// 迭代到下一个项目
// 如果还存在下一个记录，那么request的success
// 事件会再次被触发
cursor.continue()
}
})
```
- 删除objectStore中的记录
```javascript
objectStore.delete(primary_key)
tr.addEventHandler('complete',handler)
```

404
javascript/js.md
View File

@@ -1,203 +1,203 @@
# JavaScript基础
- ## js特性：
- js是一门动态语言，包含类型、运算符、标准内置对象和方法
- js支持函数是编程
- js通过原型链来实现面向对象编程
- ## js类型
- js中包括如下类型：
- Number：数字
- String：字符串
- Boolean：布尔
- Function：函数
- Object：对象
- Symbol：符号
- 其他类型：
- undefined
- null
- Array
- Date
- RegExp
- ## js变量的声明
- js可通过如下关键字来声明变量：
- let：
- 块级作用域内有效，只能在声明该变量的块中使用
- 在let声明变量之后，变量只能在声明之后被使用
- const：
- 声明一个不可变的变量，该变量在定义域中总是可见的
- const变量也只能在块定义域中被使用，在声明块之外无法访问
- var：
- 通过var关键字声明变量之后，变量在整个函数的范围内都是可见的
- 在定义var变量的方法之外，均无法访问var变量
- 但是在声明var变量的方法中，即使在声明var变量的语句之前，也可以使用var变量，变量值为undefined
- js变量作用域特性：
- 在js语言中，原本是没有块作用域的，变量只有函数范围的作用域。但是，通过引入const和let关键字，js支持声明块作用域的变量。
- ## js运算符
- ==运算符和===运算符
- ==运算符具有类型自适应的功能
```java
# 对于==运算符，如果运算符两边的类型不一致的话，
# 会尝试进行类型转换并比较
123==“123” true
1==true true
```
- ===相对于==，比较前并不会进行强制类型转换
```java
1===‘1’ false
1===true false
```
- 相对应的，对于比较不相等的操作，也存在!=和!==操作，其区别类似于==和===的区别
- ## js流程控制
- js中for循环可以分为如下两种
- for in循环：
- 对于for in循环，会遍历索引项（对数组来说是序号，对map来说是key，set为空）
- for of循环：
- 对于for of循环，会遍历值（value）而不是键（key）
- js中的switch流：
- 相比于c中的switch只支持数字，js中的switch既支持数字又支持字符串，switch和case之间是通过===运算符来判断是否严格相等的
- ## js对象
- js对象类似与map结构，由key和value组成的键值对构成
- js对象的创建有如下两种方式
- 字面量创建
```javascript
let obj={
name:"touma",
id:"A001",
husband:{
name:"haruki",
id:"A002"
}
}
```
- 通过对象原型来创建对象
```javascript
function Person(name,id) {
this.name=name
this.id=id
}
let person=new Person("touma","A001")
```
- 访问对象元素的方式
```javascript
let person={
name:"touma",
id:"A001"
}
// 通过.来访问
cosnole.log(person.name)
// 通过[]来访问
console.log(person["name"])
```
- ## js数组
- js中允许通过下标在超过当前数组长度的位置插入元素，其中，中间未插入元素的部分元素值均为undefined
```javascript
let arr=[1,2];
arr[100]=101;
// 其中，下标位于2～99之间的元素均为undefined，数组长度为101
```
- js中数组可以通过forEach方法对数组中每个值执行调用
```javascript
let arr=[1,2];
// 将数组中的每个元素平方
arr.forEach((value,index,arr)=>{
arr[index]=value*value;
});
```
- ## js中的函数
- 函数在调用结束之后都会返回一个值，如果函数在结束时没有return语句，或是return语句后没有跟随值，都会返回一个undefined
- 在js函数中，可以通过展开运算符...来接受任意个数的参数，并且，对于数组，...也可以将其展开为被逗号分隔的参数列表
```javascript
let arr = [1, 2, 3];
function sum(...arr) {
let result = 0;
for (let ele of arr) {
result+=ele;
}
return result;
}
console.log(sum(...arr));
```
- ## js中的嵌套函数
- 如果在js中，一个函数依赖与其他函数，但是依赖的其他函数并不会在其他地方被使用，那么可以将依赖的函数放在函数内部
```javascript
function outer_func() {
function inner_func() {
// 除了被outer_func调用外不会在其他地方被调用
}
}
```
- 通过嵌套函数，可以有效的减少全局作用域中的函数名称，可以防止污染全局作用域的命名
- ## js中的闭包
- 每当js中调用一次函数时，都会创建一个作用域对象，用来保存在函数中创建的局部变量。
- 当返回值为函数时，返回的函数中将会指向先前被创建的作用域对象，这样作用域对象在函数结束后就不会被回收
- 由于闭包可以保存状态，并且对外部隐藏状态，故而闭包可以代替对象来使用。闭包通过向外部返回一个操作内部局部变量的函数，保证位于内部的局部变量只能通过返回的函数来访问，保证了变量的安全
- ## js继承和原型链
- 和面向对象的编程语言不同，js的继承是通过原型来实现的。每个对象都有一个原型对象，以原型为模板，从原型中继承方法和属性。原型对象也拥有原型，一层一层，以此类推，构成了原型链。
- 每一个对象都有内置的属性，其中，可以通过内置的__proto__属性来访问一个对象的prototype对象
- 原型链中属性的查找规则：
- 如果在一个对象中想要查找的属性不存在，那么将会在当前对象的prototype对象中查找属性
- 如果prototype对象中属性仍然找不到，那么就在prototype对象的prototype对象中查找属性
- 一直向前回溯，直到属性被找到或者回溯到原型链尾部
- 原型链结构：
- 对于所有的对象，默认__proto__指向的原型对象都是Object.prototype
- Obejct.prototype是位于原型链尾端的对象，Object.prototype的原型对象是null
- 为对象指定原型对象：
- 通过Object.create函数指定原型对象,该方法会创建一个新对象并为其指明原型对象
```javascript
let proto_obj={
name: "kazusa",
greeting() {
console.log("hello, "+this.name);
}
};
let child_obj=Object.create(proto_obj);
child_obj.greeting();
```
- 通过构造函数
- 在js中，所有函数都有一个prototype属性，当该函数被作为构造函数调用时，构造函数创建的所有新对象的__proto__属性都会被设置为该函数的prototype属性
- 在将构造函数的protype属性设置为制定的对象后，prototype对象中内置属性constructor发生了变化，需要重新将原型对象的constructor制定为构造函数
- ## 在js中实现类的继承
- js中，有如下关键字可以简化类的继承，其底层仍然使用原型链来实现类的继承关系
- class：用于类的声明
- extends：用于类的继承
- constructor：用于声明构造函数
- super()：调用父类构造函数来实现子类构造函数
- js中，可以通过#字符来将变量或者方法标明为类私有的
- js中继承实现
```javascript
class People {
#name
constructor(name) {
this.#name = name
}
greeting() {
console.log("hello, i am " + this.#name)
}
}
class Student extends People {
#grade
constructor(name, grade) {
super(name)
this.#grade = grade
}
greeting() {
console.log("hi, fucking bitch, miss your dad?")
}
}
let p=new Student("touma",6)
console.log(Object.getPrototypeOf(p))
```
- js通过原型链实现继承的细节：
- js可以首先为父类创建构造函数
- js在子类的构造函数中，可以先调用ParentConstructor.call（this,args)方法来对子类的对象添加父类的成员变量
- 在完成子类对象成员变量的赋值后，可以通过Object.create创建一个以ParentConstructor.prototype为__proto__的新对象，并且将ChildConstructor.prototype设置为新对象
# JavaScript基础
- ## js特性：
- js是一门动态语言，包含类型、运算符、标准内置对象和方法
- js支持函数是编程
- js通过原型链来实现面向对象编程
- ## js类型
- js中包括如下类型：
- Number：数字
- String：字符串
- Boolean：布尔
- Function：函数
- Object：对象
- Symbol：符号
- 其他类型：
- undefined
- null
- Array
- Date
- RegExp
- ## js变量的声明
- js可通过如下关键字来声明变量：
- let：
- 块级作用域内有效，只能在声明该变量的块中使用
- 在let声明变量之后，变量只能在声明之后被使用
- const：
- 声明一个不可变的变量，该变量在定义域中总是可见的
- const变量也只能在块定义域中被使用，在声明块之外无法访问
- var：
- 通过var关键字声明变量之后，变量在整个函数的范围内都是可见的
- 在定义var变量的方法之外，均无法访问var变量
- 但是在声明var变量的方法中，即使在声明var变量的语句之前，也可以使用var变量，变量值为undefined
- js变量作用域特性：
- 在js语言中，原本是没有块作用域的，变量只有函数范围的作用域。但是，通过引入const和let关键字，js支持声明块作用域的变量。
- ## js运算符
- ==运算符和===运算符
- ==运算符具有类型自适应的功能
```java
# 对于==运算符，如果运算符两边的类型不一致的话，
# 会尝试进行类型转换并比较
123==“123” true
1==true true
```
- ===相对于==，比较前并不会进行强制类型转换
```java
1===‘1’ false
1===true false
```
- 相对应的，对于比较不相等的操作，也存在!=和!==操作，其区别类似于==和===的区别
- ## js流程控制
- js中for循环可以分为如下两种
- for in循环：
- 对于for in循环，会遍历索引项（对数组来说是序号，对map来说是key，set为空）
- for of循环：
- 对于for of循环，会遍历值（value）而不是键（key）
- js中的switch流：
- 相比于c中的switch只支持数字，js中的switch既支持数字又支持字符串，switch和case之间是通过===运算符来判断是否严格相等的
- ## js对象
- js对象类似与map结构，由key和value组成的键值对构成
- js对象的创建有如下两种方式
- 字面量创建
```javascript
let obj={
name:"touma",
id:"A001",
husband:{
name:"haruki",
id:"A002"
}
}
```
- 通过对象原型来创建对象
```javascript
function Person(name,id) {
this.name=name
this.id=id
}
let person=new Person("touma","A001")
```
- 访问对象元素的方式
```javascript
let person={
name:"touma",
id:"A001"
}
// 通过.来访问
cosnole.log(person.name)
// 通过[]来访问
console.log(person["name"])
```
- ## js数组
- js中允许通过下标在超过当前数组长度的位置插入元素，其中，中间未插入元素的部分元素值均为undefined
```javascript
let arr=[1,2];
arr[100]=101;
// 其中，下标位于2～99之间的元素均为undefined，数组长度为101
```
- js中数组可以通过forEach方法对数组中每个值执行调用
```javascript
let arr=[1,2];
// 将数组中的每个元素平方
arr.forEach((value,index,arr)=>{
arr[index]=value*value;
});
```
- ## js中的函数
- 函数在调用结束之后都会返回一个值，如果函数在结束时没有return语句，或是return语句后没有跟随值，都会返回一个undefined
- 在js函数中，可以通过展开运算符...来接受任意个数的参数，并且，对于数组，...也可以将其展开为被逗号分隔的参数列表
```javascript
let arr = [1, 2, 3];
function sum(...arr) {
let result = 0;
for (let ele of arr) {
result+=ele;
}
return result;
}
console.log(sum(...arr));
```
- ## js中的嵌套函数
- 如果在js中，一个函数依赖与其他函数，但是依赖的其他函数并不会在其他地方被使用，那么可以将依赖的函数放在函数内部
```javascript
function outer_func() {
function inner_func() {
// 除了被outer_func调用外不会在其他地方被调用
}
}
```
- 通过嵌套函数，可以有效的减少全局作用域中的函数名称，可以防止污染全局作用域的命名
- ## js中的闭包
- 每当js中调用一次函数时，都会创建一个作用域对象，用来保存在函数中创建的局部变量。
- 当返回值为函数时，返回的函数中将会指向先前被创建的作用域对象，这样作用域对象在函数结束后就不会被回收
- 由于闭包可以保存状态，并且对外部隐藏状态，故而闭包可以代替对象来使用。闭包通过向外部返回一个操作内部局部变量的函数，保证位于内部的局部变量只能通过返回的函数来访问，保证了变量的安全
- ## js继承和原型链
- 和面向对象的编程语言不同，js的继承是通过原型来实现的。每个对象都有一个原型对象，以原型为模板，从原型中继承方法和属性。原型对象也拥有原型，一层一层，以此类推，构成了原型链。
- 每一个对象都有内置的属性，其中，可以通过内置的__proto__属性来访问一个对象的prototype对象
- 原型链中属性的查找规则：
- 如果在一个对象中想要查找的属性不存在，那么将会在当前对象的prototype对象中查找属性
- 如果prototype对象中属性仍然找不到，那么就在prototype对象的prototype对象中查找属性
- 一直向前回溯，直到属性被找到或者回溯到原型链尾部
- 原型链结构：
- 对于所有的对象，默认__proto__指向的原型对象都是Object.prototype
- Obejct.prototype是位于原型链尾端的对象，Object.prototype的原型对象是null
- 为对象指定原型对象：
- 通过Object.create函数指定原型对象,该方法会创建一个新对象并为其指明原型对象
```javascript
let proto_obj={
name: "kazusa",
greeting() {
console.log("hello, "+this.name);
}
};
let child_obj=Object.create(proto_obj);
child_obj.greeting();
```
- 通过构造函数
- 在js中，所有函数都有一个prototype属性，当该函数被作为构造函数调用时，构造函数创建的所有新对象的__proto__属性都会被设置为该函数的prototype属性
- 在将构造函数的protype属性设置为制定的对象后，prototype对象中内置属性constructor发生了变化，需要重新将原型对象的constructor制定为构造函数
- ## 在js中实现类的继承
- js中，有如下关键字可以简化类的继承，其底层仍然使用原型链来实现类的继承关系
- class：用于类的声明
- extends：用于类的继承
- constructor：用于声明构造函数
- super()：调用父类构造函数来实现子类构造函数
- js中，可以通过#字符来将变量或者方法标明为类私有的
- js中继承实现
```javascript
class People {
#name
constructor(name) {
this.#name = name
}
greeting() {
console.log("hello, i am " + this.#name)
}
}
class Student extends People {
#grade
constructor(name, grade) {
super(name)
this.#grade = grade
}
greeting() {
console.log("hi, fucking bitch, miss your dad?")
}
}
let p=new Student("touma",6)
console.log(Object.getPrototypeOf(p))
```
- js通过原型链实现继承的细节：
- js可以首先为父类创建构造函数
- js在子类的构造函数中，可以先调用ParentConstructor.call（this,args)方法来对子类的对象添加父类的成员变量
- 在完成子类对象成员变量的赋值后，可以通过Object.create创建一个以ParentConstructor.prototype为__proto__的新对象，并且将ChildConstructor.prototype设置为新对象
- 最后，将新对象的constructor属性设置为ChildConstructor

86
javascript/js事件.md
View File

@@ -1,44 +1,44 @@
# js事件
- ## js event
- 对于可以触发事件的对象，其会有一个addEventListener方法，通过该方法，可以为对象的特定事件注册handler。addEvnetListener接受两个参数：
- event name
- event handler
- 对于js语言，在不同的环境下，event model可能会有所不同，例如在web浏览器环境下和nodejs环境下，event model就不完全相同
- 可以通过removeEventHandler来移除handler，该方法同样接收两个参数，event name和handler
- ## 在js中为事件添加复数个handler
- 通过多次调用addEventHandler，可以为同一个事件添加多个handler，在事件发生后，多个handler都会被调用
- ## Event Handler Properties
- 在js中，如果一个对象能够触发某个事件，通常该对象会有一个onxxx属性，例如onclick、onmouseover等。可以通过为该属性赋值一个函数来为该事件添加handler
```javascript
let p=document.querySelector("#bt")
p.onclick=()=>{
alert("button is clicked")
}
```
- 但是，通过为对象的onclick属性赋值，无法为该对象的同一个事件添加多个handler，对onclick属性的多次赋值，之后的赋值操作会覆盖前面的赋值操作
- ## inline event handler（不推荐）
- 可以在html文件中为标签的onxxx属性指定调用的js方法来为事件添加handler，但是这种方法永远不应该被使用
- 使用inline event handler时，如果多个元素都为相同事件添加相同的handler，那么相同的函数调用代码将会在html文件中重复多次，修改会花费大量时间
- 并且，使用inline event handler会令js代码和html代码糅合在一起，最好将js代码和html代码分开
- ## event对象
- handler的参数中可以含有一个event对象，用来记录触发事件的信息，例如event.target记录了指向触发事件的对象的引用
- 可以通过event.preventDefault()方法来取消浏览器为该事件定义的默认处理。
- 可以通过event.stopProgation()方法阻止该事件的传播
- 通过return false，默认会同时调用event.preventDefault和event.stopProgation
- ## 事件传播的三个阶段
- capturing阶段：
- 捕获阶段首先会检查触发事件元素的最外层元素（html），检查其是否注册了capture阶段的handler，如果注册了就运行handler
- 然后其会移动到html内部元素并做相同的事情，如果元素有注册capture阶段handler就执行，并依次向内移动，直到遇到触发事件元素的直接父元素
- target阶段：
- 首先，target阶段会检查EventTarget是否有为event注册的handler，如果有就运行它
- 如果，event的bubbles为true，其会将event事件传播给EventTarget元素的父元素，并以此向上传播，直到到达html元素；如果bubbles为false，则event不会被向上传播给EventTarget的任何父元素
- bubbling阶段：
- 检查是否EventTarget的直接父元素为bubbling阶段注册了handler，如果有就运行
- 对EventTarget父元素的父元素做同样的事，检查是否为bubbling阶段注册有handler，如果有就执行，依次向上传播，直到到达html元素
- >对于所有的js事件，都会经历capturing阶段和target阶段，但是只有bubbles属性为true的事件才会经历bubbling阶段
- > 对于target阶段，对于EventTarget，无论是为capturing阶段注册的handler还是为bubbling阶段注册的handler都会被执行
- > addEventListener默认情况下注册的阶段是bubbling，可以为其制定useCapture为true(默认为false)来指定注册的listener为capturing阶段
- > 可以在event handler中调用event.stopPropagation来阻止事件在bubbling过程中向上传播
- ## event.target和event.currentTarget
- event.target：触发事件的元素
# js事件
- ## js event
- 对于可以触发事件的对象，其会有一个addEventListener方法，通过该方法，可以为对象的特定事件注册handler。addEvnetListener接受两个参数：
- event name
- event handler
- 对于js语言，在不同的环境下，event model可能会有所不同，例如在web浏览器环境下和nodejs环境下，event model就不完全相同
- 可以通过removeEventHandler来移除handler，该方法同样接收两个参数，event name和handler
- ## 在js中为事件添加复数个handler
- 通过多次调用addEventHandler，可以为同一个事件添加多个handler，在事件发生后，多个handler都会被调用
- ## Event Handler Properties
- 在js中，如果一个对象能够触发某个事件，通常该对象会有一个onxxx属性，例如onclick、onmouseover等。可以通过为该属性赋值一个函数来为该事件添加handler
```javascript
let p=document.querySelector("#bt")
p.onclick=()=>{
alert("button is clicked")
}
```
- 但是，通过为对象的onclick属性赋值，无法为该对象的同一个事件添加多个handler，对onclick属性的多次赋值，之后的赋值操作会覆盖前面的赋值操作
- ## inline event handler（不推荐）
- 可以在html文件中为标签的onxxx属性指定调用的js方法来为事件添加handler，但是这种方法永远不应该被使用
- 使用inline event handler时，如果多个元素都为相同事件添加相同的handler，那么相同的函数调用代码将会在html文件中重复多次，修改会花费大量时间
- 并且，使用inline event handler会令js代码和html代码糅合在一起，最好将js代码和html代码分开
- ## event对象
- handler的参数中可以含有一个event对象，用来记录触发事件的信息，例如event.target记录了指向触发事件的对象的引用
- 可以通过event.preventDefault()方法来取消浏览器为该事件定义的默认处理。
- 可以通过event.stopProgation()方法阻止该事件的传播
- 通过return false，默认会同时调用event.preventDefault和event.stopProgation
- ## 事件传播的三个阶段
- capturing阶段：
- 捕获阶段首先会检查触发事件元素的最外层元素（html），检查其是否注册了capture阶段的handler，如果注册了就运行handler
- 然后其会移动到html内部元素并做相同的事情，如果元素有注册capture阶段handler就执行，并依次向内移动，直到遇到触发事件元素的直接父元素
- target阶段：
- 首先，target阶段会检查EventTarget是否有为event注册的handler，如果有就运行它
- 如果，event的bubbles为true，其会将event事件传播给EventTarget元素的父元素，并以此向上传播，直到到达html元素；如果bubbles为false，则event不会被向上传播给EventTarget的任何父元素
- bubbling阶段：
- 检查是否EventTarget的直接父元素为bubbling阶段注册了handler，如果有就运行
- 对EventTarget父元素的父元素做同样的事，检查是否为bubbling阶段注册有handler，如果有就执行，依次向上传播，直到到达html元素
- >对于所有的js事件，都会经历capturing阶段和target阶段，但是只有bubbles属性为true的事件才会经历bubbling阶段
- > 对于target阶段，对于EventTarget，无论是为capturing阶段注册的handler还是为bubbling阶段注册的handler都会被执行
- > addEventListener默认情况下注册的阶段是bubbling，可以为其制定useCapture为true(默认为false)来指定注册的listener为capturing阶段
- > 可以在event handler中调用event.stopPropagation来阻止事件在bubbling过程中向上传播
- ## event.target和event.currentTarget
- event.target：触发事件的元素
- event.currentTarget：当前handler所附加到的元素（在bubbling阶段时间传播到的上层祖先节点）

168
javascript/js异步.md
View File

@@ -1,85 +1,85 @@
# js异步编程
- ## js异步简介
- 异步是潜在的长时间运行的方法，在调用异步方法时，并不需要阻塞等到长任务运行完成，而是可以在长任务执行时同时执行其他方法，在异步方法执行完后会显示执行结果
- 异步方法的使用场景：
- 当在同步方法中执行长任务时，在同步方法执行完成之前，对界面中元素进行的操作都会被阻塞
- 实现异步操作的方式：
- event handler：
- 通过为事件注册一个函数，可以在异步方法完成后调用
- 早期异步api会通过event handler来实现异步操作，如XMLHttpRequest
- callback：
- 当需要向callback中传入callback时，代码将会十分的难以阅读
- promise：
- 在基于promise实现的异步操作中，可以在调用异步方法后立刻返回promise对象，如果异步方法没有执行完成，此时promise中的status为pending，显示异步方法还在执行。可以为promise指定一个callback，当异步操作调用完成，会执行callback
- ## fetch方法的使用
```javascript
function fetch_baidu() {
let fetch_obj = fetch("https://www.baidu.com")
console.log(fetch_obj)
fetch_obj.then(response => {
console.log('status: '+response.status)
console.log("data: " + response.body)
})
console.log("fetch finished...")
}
```
- ## 链式异步调用和错误处理
- 如果想要为异步方法的handler中添加异步方法，不要在then函数中添加then函数，而是采用promise chain的方式
```javascript
// 例如，response.json()方法也是异步方法，返回promise
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!response.ok) {
throw new Error("return code error")
}
let json_promise=response.json()
json_promise.then(json=>{
console.log(json)
})
})
// 不要在then方法中嵌套then方法，而是将其转化为promise chain
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!resposne.ok) {
throw new Error("return code error")
}
return response.json()
}).then(json=>{
console.log(json)
})
// 通过该方法可以防止then方法中多层嵌套
```
- 如果想要为promise定义错误处理的handler，可以在末尾catch方法中传递handler
```javascript
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!resposne.ok) {
throw new Error("return code error")
}
return response.json()
}).then(json=>{
console.log(json)
}).catch(error=>{
console.log(error)
})
```
- ## Promise
- Promise的状态
- pending：该promise已经被创建并且关联了异步方法，但是该方法还没有执行完成
- fulfilled：该异步方法执行成功，then()被调用
- rejected：异步方法执行失败，catch()被调用
> 此处，promise成功和失败是取决与讨论的api的，例如，对于fetch()方法，即使服务端返回404错误，该promise也会被认为是成功的，但是如果是网络问题导致请求发送失败，该方法会被认为是失败的
- Promise.all和Promise.any
- 如果不想同步的执行异步方法，可以使用Promise.all或者Promise.any来组织promise
- Promise.all接收一个promise数组，只有当数组所有的promise执行成功之后，then()中的方法会被执行，如果其中任何一个promise执行失败，catch()方法被执行
- Promise.any接收一个promise数组，当数组中任何一个promise执行成功之后，then()方法会被执行，如果所有的promise都失败，catch会被执行
- ## async和await关键字
- 在方法开头加上async关键字，可以标识该方法为异步方法，在async方法内部，可以使用awiat关键字。await关键字可以放在一个返回promise方法调用之前，被await标识的方法不再返回promise而是会返回fulfilled value。
- 通过await/async关键字，可以像编写同步代码一样编写异步代码。
- async标识的方法会返回promise
- ## Promsie构造函数
- Promise构造函数接受一个函数(resolve,reject)=>{},该函数被作为Promise对象的执行器，resolve和reject都是只接受一个参数的函数
- ## Worker
- 默认情况下，整个window是单线程的，如果在同步执行一个长任务的情况下，其他所有的操作都会被阻塞，可以开启多线程来来实现并行执行
- async/await和promise并不是通过多线程来实现异步操作的，通过async和await并不会创建一个新的线程，故而想要通过多线程提高性能，不能通过简单使用await/promise来实现
# js异步编程
- ## js异步简介
- 异步是潜在的长时间运行的方法，在调用异步方法时，并不需要阻塞等到长任务运行完成，而是可以在长任务执行时同时执行其他方法，在异步方法执行完后会显示执行结果
- 异步方法的使用场景：
- 当在同步方法中执行长任务时，在同步方法执行完成之前，对界面中元素进行的操作都会被阻塞
- 实现异步操作的方式：
- event handler：
- 通过为事件注册一个函数，可以在异步方法完成后调用
- 早期异步api会通过event handler来实现异步操作，如XMLHttpRequest
- callback：
- 当需要向callback中传入callback时，代码将会十分的难以阅读
- promise：
- 在基于promise实现的异步操作中，可以在调用异步方法后立刻返回promise对象，如果异步方法没有执行完成，此时promise中的status为pending，显示异步方法还在执行。可以为promise指定一个callback，当异步操作调用完成，会执行callback
- ## fetch方法的使用
```javascript
function fetch_baidu() {
let fetch_obj = fetch("https://www.baidu.com")
console.log(fetch_obj)
fetch_obj.then(response => {
console.log('status: '+response.status)
console.log("data: " + response.body)
})
console.log("fetch finished...")
}
```
- ## 链式异步调用和错误处理
- 如果想要为异步方法的handler中添加异步方法，不要在then函数中添加then函数，而是采用promise chain的方式
```javascript
// 例如，response.json()方法也是异步方法，返回promise
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!response.ok) {
throw new Error("return code error")
}
let json_promise=response.json()
json_promise.then(json=>{
console.log(json)
})
})
// 不要在then方法中嵌套then方法，而是将其转化为promise chain
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!resposne.ok) {
throw new Error("return code error")
}
return response.json()
}).then(json=>{
console.log(json)
})
// 通过该方法可以防止then方法中多层嵌套
```
- 如果想要为promise定义错误处理的handler，可以在末尾catch方法中传递handler
```javascript
let http_promise=fetch("https://baidu.com")
http_promise.then(response=>{
if(!resposne.ok) {
throw new Error("return code error")
}
return response.json()
}).then(json=>{
console.log(json)
}).catch(error=>{
console.log(error)
})
```
- ## Promise
- Promise的状态
- pending：该promise已经被创建并且关联了异步方法，但是该方法还没有执行完成
- fulfilled：该异步方法执行成功，then()被调用
- rejected：异步方法执行失败，catch()被调用
> 此处，promise成功和失败是取决与讨论的api的，例如，对于fetch()方法，即使服务端返回404错误，该promise也会被认为是成功的，但是如果是网络问题导致请求发送失败，该方法会被认为是失败的
- Promise.all和Promise.any
- 如果不想同步的执行异步方法，可以使用Promise.all或者Promise.any来组织promise
- Promise.all接收一个promise数组，只有当数组所有的promise执行成功之后，then()中的方法会被执行，如果其中任何一个promise执行失败，catch()方法被执行
- Promise.any接收一个promise数组，当数组中任何一个promise执行成功之后，then()方法会被执行，如果所有的promise都失败，catch会被执行
- ## async和await关键字
- 在方法开头加上async关键字，可以标识该方法为异步方法，在async方法内部，可以使用awiat关键字。await关键字可以放在一个返回promise方法调用之前，被await标识的方法不再返回promise而是会返回fulfilled value。
- 通过await/async关键字，可以像编写同步代码一样编写异步代码。
- async标识的方法会返回promise
- ## Promsie构造函数
- Promise构造函数接受一个函数(resolve,reject)=>{},该函数被作为Promise对象的执行器，resolve和reject都是只接受一个参数的函数
- ## Worker
- 默认情况下，整个window是单线程的，如果在同步执行一个长任务的情况下，其他所有的操作都会被阻塞，可以开启多线程来来实现并行执行
- async/await和promise并不是通过多线程来实现异步操作的，通过async和await并不会创建一个新的线程，故而想要通过多线程提高性能，不能通过简单使用await/promise来实现
- 为了保证线程安全，worker之间是隔离的，相互之间无法访问其他worker的变量，也无法访问dom（window、document、page），workder之间只能通过message交流

44
javascript/从服务端获取数据.md
View File

@@ -1,23 +1,23 @@
# js fetch data from server
- ## js fetch和前后端分离
- 在传统前后段项目中，通常会用jsp技术来生成动态页面。用户想要与服务端进行请求时，服务端会重新向客户端发送整个页面，即使页面中的大部分数据都和之前的页面相同。用户端会重新对页面进行载入。
- 通过js的fetch api，客户端可以在向服务端发送请求后，仅仅接受服务端返回的需要更新的数据，而不是整个新页面。用户在接受数据后可以通过dom api根据接受数据对页面进行修改。这样用户不用接受并且重载整个全新的页面。
- 实现前后端分离的技术通常称之为ajax（asynchronous javascript and xml，之前通常通过xml格式来传输数据，但是现在一般使用json格式来传输数据，但该技术名称仍然叫做ajax）
- ## 具体从服务端接收数据的api
- fetch
- XMLHttpRequest
```javascript
let request=new XMLHttpRequest();
try {
request.open('GET',url_path);
request.responseType='json';
// 为load和error事件添加事件handler
// load事件在response完全完成之后才会被触发
// error事件在请求发生错误时被触发
request.addEventHandler('load',load_handler);
request.addEventHandler('error',error_handler);
request.send();
}catch(err) {
console.log(err);
}
# js fetch data from server
- ## js fetch和前后端分离
- 在传统前后段项目中，通常会用jsp技术来生成动态页面。用户想要与服务端进行请求时，服务端会重新向客户端发送整个页面，即使页面中的大部分数据都和之前的页面相同。用户端会重新对页面进行载入。
- 通过js的fetch api，客户端可以在向服务端发送请求后，仅仅接受服务端返回的需要更新的数据，而不是整个新页面。用户在接受数据后可以通过dom api根据接受数据对页面进行修改。这样用户不用接受并且重载整个全新的页面。
- 实现前后端分离的技术通常称之为ajax（asynchronous javascript and xml，之前通常通过xml格式来传输数据，但是现在一般使用json格式来传输数据，但该技术名称仍然叫做ajax）
- ## 具体从服务端接收数据的api
- fetch
- XMLHttpRequest
```javascript
let request=new XMLHttpRequest();
try {
request.open('GET',url_path);
request.responseType='json';
// 为load和error事件添加事件handler
// load事件在response完全完成之后才会被触发
// error事件在请求发生错误时被触发
request.addEventHandler('load',load_handler);
request.addEventHandler('error',error_handler);
request.send();
}catch(err) {
console.log(err);
}
```