ES6类Class

ES5构造函数:

function Person(){
  this.name = ""
}
let Person_one = new Person()
console.log(Person_one.name)

ES6类Class：

class Person{
  constructor(){
    this.name = ""
  }
  say(){
    console...
  }
}
let p = new Person()
console.log(p.name)
p.say()

//继承super
class Teacher extends Person{
  constructor(){
    this.a = ...
    this.b = ...
  }
}

//简单写法
class a extends b{
  a = ...
  b = ...
  a(){...}
}

async & await

代更新

琐碎知识

indexOf, slice, push, pop, unshift, shift, sort, join, reverse, concat, delete, add

rest & arguments: zh.javascript.info/rest-parame…

call & apply: zh.javascript.info/call-apply-…

date: zh.javascript.info/date

map & set

ES6

var map = new Map([[a,1],[b,2]...[]])

-> get, set（无序不重复的集合，可以用来去重）, delete, add, has(是否包含), interator

-> for...in...(遍历对象属性), for...of...(迭代)

文档：zh.javascript.info/map-set

jQuery

CDN引入

公式： $(选择器p/#id/class).action()

事件：鼠标，键盘

操作DOM：获得值 '#xxx p[xxx]'.text

JSON 储存和表示数据

对象表示键值对
数据用逗号分离
花括号保存对象
方括号保存数组

格式：

对象{}
数组[]
键值对key:value

格式转换：

stringify 对象转换成字符串
JSON.parse 字符串转换成对象

AJAX

xhr异步请求， axios请求，Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

局部更新部分网页，交互型更好，增强B/S体验性

可以做:检验用户名是否存在，提示密码错误

jQuery封装好的: $("#name").ajax("")

jQuery提供JS：get -> url.data.success.dataType

服务器返回一个字符串，直接使用response

待更新ing...

//默认为`GET`请求
$post({
  url:
  data:{"name":$("#name").val(返回值)}
})

流程：

编写Controller，返回消息/字符串/JSON数据
编写AJAX请求，url.data.success
AJAX绑定，点击click/失去焦点onblur/键盘keyup

面向对象

类：模板

对象：具体的实例

继承 proto

新增方法： x.prototype.method = function(){}

calss继承（ES6） super()

创建对象设计模式

工厂模式/构造模式/原型模式

参考文档：blog.csdn.net/ios_program…

原型

属性指向函数的原型对象

未命名文件.png

BOM

IE/Chrome/Safari/FireFox

window(浏览器窗口)， navigator（封装浏览器信息）， screen, location（URL信息：host, gref, protocol, location.reload( ), location.assign( ) ）

Location: developer.mozilla.org/zh-CN/docs/…

DOM

getElementById

history (back/forward)

获得节点：

document.getElementBu选择器
选择器.childern

更新节点：

innerText 修改文本值
innerHTML 解析文本标签

删除节点：先获取父节点 -> father.remove()

插入节点：

append(已有)
createElement(未有) -> id -> innerText

操作表单 form / md5 加密密码绑定 return js

提交表单 onclick

基本数据类型 & 引用数据类型 & 区别

基本数据类型（值类型） ：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol(ES6)。
引用数据类型（引用类型） ：Object 对象。

区别：

基本数据类型：传数值。
引用数据类型：传地址（修改的同一片内存空间）。

参考文档：juejin.cn/post/697468…

this

参考视频：www.bilibili.com/video/BV1qp…

this -> 浏览器node worker

获取全局对象

web: window, self, frames, this
node: global
worker: self,
通用: globalThis

MDN-this : developer.mozilla.org/zh-CN/docs/…

继承子类的this指向

调用父类的构造器，super()相当于new父类，

this -> new 父类() -> {}

父类中构造器（非静态属性）的this

new -> this -> {} -> 属性

类中是严格模式

call & apply & bind

箭头函数的this

指向非箭头函数的外层作用域

对象方法内部的引用this -> 最近的引用

嵌套的函数

function t 不属于 test3 也不属于 obj2

事件绑定

Promise

目的：解决回调地狱的现象，ajax异步请求数据

三大状态：resolve，pending，reject
Promise.all -> interable(Array, set, map) 多个异步并发进行传递promise集合，如果不是promise，直接resolve 没有元素返回空数组
race 谁先完成就返回，无论是fullfilled还是rejected

测试相应速度

async:await

await操作符，等待一个promise对象产出结果

功能是暂停async函数的执行

等待promise处理后的结果

rejected -> 抛出异常

async是通过隐式promise返回pending状态

VUE

网络通信 AXIOS

页面跳转 vue-router

状态管理 vuex

VUE-UI Bootstrap，ElementUI

CSS预处理器 SASS，LESS

webpack 打包

MVVM

View（HTML，CSS，Template）

双向数据绑定

ViewModel（JS，Runtime，Compiler）

AJAX发送，JSON接收

MODEL（JAVA&数据库）

v 方法

v-bind 绑定（只要不是div都需要v-bind）
v-if/v-else
v-for
v-on：click 绑定事件，JQuery去查

双向绑定

视图变化 - 数据变化

【JavaScript】自用知识点梳理