107-161JS

target事件委托

list.onclick = function(evt){

console.log(evt.target||.srcElement)

list.onclick = function(evt){
console.log(evt.target)
evt.target.parentNode.remove()

通过此方法可以防止如果是li 就把所有li都删除的情况

console.log(evt.target.nodeName)
if(evt.target.nodeName==="BUTTON"){
evt.target.parentNode.remove()

这样只有点击按钮才会出事件

正则表达式

正则表达式语法大全

var reg = /abc/
//2.内置构造函数
var reg2 = new RegExp("abc")

^$首尾限定符

捕获exec

// test()
//exec（）捕获片段
var reg = /\d{3}/
console.log(reg.exec("aa123aa"))

特性

//1.懒惰，解决使用全局标识符g
//2.贪婪
var reg = /\d14)/
console.log(reg.exec("aa123456bb"))

还有search match

this指向

谁调用我，this就指向谁

改变this指向

// call
obj1.getName.call(obj2)

//cal1执行函数，
并改变this执行为函数的第一个参数
支持多个参数
obj1.getName.call(obj2,1,2,3)
// apply执行函数，并改变this执行为函数的第一个参数
第二个参数为数组，只支持两个参数
T
obj1.getName.apply(obj2, [1,2,3]） 

//bind改变this指向为函数的第一个参数，不会自动指向函数
var fun1 =obj1.getName.bind(obj2)

ES6定义变量

for (let i = 0; i ‹ oHeaderItems.length; i++) {
//自定义属性
oHeaderItems[i].dataset.index = i
oHeaderItems[i].onclick =function (){
console.log(i)}

ES6箭头函数

可以用来简洁代码

var test1 = function(){
console.log("11111")
}
var test2
（）=>｛
console.log(2222)
}
效果是一样的

写法:

var test =a => {
console.log(111,a)
一个参数可以省略括号

var test = (a,b) => {
console.log(111,a)

注意：1.(只有一个形参的时候）可以省略
2.{}可以省略只有一句代码或只有返回值的时候，省略return
3.没有arguments
4.箭头函数没有this,
箭头函数this是父级作用域的，

var test =()=>
(
{name:"kerwin"
}）要加上小括号避免被当成函数

//函数的默认参数 用来以防万一
function test(a=1,b=2){
return a+b I
console.log(test(1,20))
console.log(test())

ES6解构赋值

重点：对号入座
快速的从对象和数组中获取里面的成员

var arr = ["xiaoming","teichui", "shanzhen"]
// arr[2]
Let [x,y,z] = arr[]

可以快速获取多维数组

var arr2=[1,2,[3,4,[5]]]//多维度数组
// console.log(arr2[2][2][0])
var [q,w,[e,r,[t]]]=arr2

ES6展开运算符

//...展开数组
var a =[1,2,3]
var b =[4,5,6]
// console.log(a.concat(b))
var c=[a,b]
console.log(c)

/...复制
// var·a =[1,2,3]
7/·var b=[..a]
//b[0]="kerwin"

//...参数-实参-形参
var test =(…arr)=> {
console.log(arr)
test(1,2,3,4,5)

function test(){

var arr =[.…arguments]
console.log(arr)
test(1,2,3,4,5)

ES6模块化

1.私密不漏
2.重名不怕
3.依赖不乱

导入导出：

<script type="module">
imporl {A1,A2,test} From './module/A.js'
A1()
A2()
test()

import {A1,A2,test as A_test} from './module/A.js'
import {B1,B2,test as B_test} from './module/B.js'
A1()
A2()
A_test()
B_test

初识面向对象

创建对象

工厂函数
function createobj(){
var obj ={}

obj.name="蒸羊羔"，
obj.material =[]
return obj

自定义构造函数

```javascript
function createobj(name){
this.name=name
this.material =[]
this.cook = function(){
}
var obj1=_new createobj（"蒸羊羔"）

构造函数注意问题

//1.首字母大写
function Createobj(name){
this.ñame = name
//
//}
// var obj1 = new Createobj("kerwin")
// console.log(obj1)
//2.构造函数不写return
function Createobj(name){
this.name
name

return {
a:1,
b:2
}
new Createobj("kerwin")
var obj1
console.log(obj1)

构造函数能当普通函数用
function Createobj(name){
console.log(this)
this.name = name
// var obj1 = new Createobj("kerwin")
// console.log(obj1)
var obj1 = Createobj("kerwin")
console.log(obj1,window.name)

this指向new完后创建出的对象

面向对象的原型

function Createlist(select,data){
this.ele = document.querySelector(select)
this.title = data.title,
this.list = data.list
}
var obj1 = new CreateList(".box1",data1)
// var obj2 = new CreateList(data2.title,data2.list)

function CreateList(select,data){
this.ele = document.querySelector(select)
this.title = data.title,
this.list = datat.list
this.render function(){
∥/渲染页面
var h1 this.ele.querySelector("h1")
var ul this.ele.querySelector("ul")
// console.log(h1,ul)
h1.innerHTML this.title
ul.innerHTML=this.list.map(item=> <li>{item</li>)
.join("")
}

对象.__proto__===构造函数.prototyple

ES6-Class

class Createobj {
∥构造器函数
constructor(name){
this.name=name

say(){
console.log(this.name,"hello")
}
}
var obj=new Createobj()

面向对象继承

function Person(name,age){
this.name = name
this.age = age
Person.prototype.say = function(){
console.log(this.name ,"hello")
}
function Student(name,age,grade){
Person.call(this,name,age)
this.grade = grade
}
// Student.prototype.say = function(){
console.log(this.name ,"hello")
}

Student.prototype = new Person()
//基础增加方法
Student.prototype.printGrade = function(){
console.log(this.name,this.grade)
Student.prototype.say = function(){
console.log(this.name,this.grade)

//覆盖
Student.prototype.say = function(){
console.log(this.name ,"hello")
console.log(this.name,"您好"）

∥增强原来方法
Student.prototype.say2 = function(){
this.say()
console.log(this.name,"您好")
var obj = new Student("kerwin",100,100)

ES6继承

//父类
class Person {
constructor(name,age){
this.name = name
this.age = age
say(){
console.log(this.name,"hello")
}
//子类
//原型继承
class Student extends Person{
	constructor(name,age,grade){	
	super(name,age) //Person.call(this,name,age)
	this.grade = grade
}
var obj = new Student()
console.log(obj)

Aajax

//ajax ===async javascript and xml(闭合标签）
//JSON.parse()
//1.创建XHR new XMLHttpRequest()
var xhr = new XMLHttpRequest()
console.log(xhr)
//2。配置open(请求方式，请求地址，是否异步）
xhr.open("GET","http://127.0.0.1:5500/136-ajax/1.txt")
//3. send
xhr.send()
//4.接受数据，注册一个事件
//btn.onclick = function(){}
xhr.onreadystatechange =function(){}

ajax同步异步

var xhr = new XMLHttpRequest()
xhr.open("GET","1.json",false)
//true 表示异步请求
//false表示同步请求
xhr.send()
xhr.onload = function()
if(xhr.status===200){
console.log(xhr.responseText)
}
}

请求方式1

get 偏向获取数据
post偏向提交数据
put偏向更新
delete 偏向删除信息
patch 偏向部分修改
{header
options
connect
}
特殊的post：

xhr.open("POST","http://localhost:3000/users")
xhr.onload =function(){
if(xhr.status===200){
console.log(JSON.parse(xhr.responseText))
	}
}
//提交信息
//post name=kerwin&age=100
//post {"name":"kerwin"}
xhr.setRequestHeader("Content-Type","application/
x-www-form-urlencoded")

xhr.send(`username=gangdan&&password=123`)

ajax的封装

ajax调用：

通过回调函数来封装

ajax({
url:"http://localhost:3000/users",
success:function(){
console.log("sucess")
}，
error:function(err){
console.log("error",err)
}）

捕获错误

try {
Let result = JSON.parse("111111111&22222222")
success(result)
}catch|(err){
//error（'解析失败！因为后端返回的结果不是 json 格式字符串’）
}

////设置请求头内的信息
for (Let k in headers) xhr.setRequestHeader(k, headers[k])
// if (/get$/i.test(method)) {
// xhr.send()
// } else {
xhr.send(data)
//
//}
xhr.send(data)

案例：

import ajax from'./util.js'
// console.log(ajax)
class TodoList{
constructor(select){
this.list = document.querySelector(select)
this.1istdata＝[］//列表数据
this.init()
}
init(){
//初始化
this.bindEvent()
bindEvent(){
this.listEle.onclick=function(evt){
console.log(evt.target)
}
}
//获取数据的方法
this.getList(){
ajax({
url:"http://localhost:3000/list",
success:(res)=>{
console.log(res)
}，
error:function(){
}）
//渲染页面
render(){
// console.log("render")
this.listEle.innerHTML = this.listdata.map
(item=> <li>11111</li> ).join("")

addItem(text){
// console.log(text)
//在”数据库“添加后，成功回调里，页面添加
ajax({
//在”数据库“添加后，成功回调里，页面添加
ajax({
url: http://localhost:3000/list,
method:"POST",
data:{
text
}，
success:(res) => {
// console.log("成功",res)
// location.reload（）//全局刷新页面
}，
error:function(){
})

重点：
没有嵌套的函数this指向为window，嵌套中的函数this指向为undifined，会出现指向问题

回调地狱

ajax嵌套

promise基础语法

//Promise构造函数
var q = new Promise(function(a,b){
//异步
setTimeout(()=>{
resolve()//成功兑现承诺
//失败拒接承诺
//reject()
},2000)
}）
//q是promi.se对象
q.then(function(){
//兑现承诺，这个函数被执行
}).catch(function(){
//拒绝承诺，这个函数就会被执行
})

Promise封装ajax

function pajax(options){
var q = new Promise(function(resolve,reject){
ajax({
.options,
success:function(res){
resolve(res)
}，
error:function(err){
reject(err)
}）
}）
return q

async和await

async function test(){

//await 同步代码
await console.log(1111)
console.log(2222)
test()

async function test()
await Promise.all([q1,q2])
var res
console.log(res)
}
test()

fetch

为了取代XMLHTTPrequest

fetch("http://localhost:3000/users").then(res=>{
// console.log(res)
return res.json()
}).then(res=>{
console.log(res)
}）
}

必须要用json解析，要不然会报错

fetch("http://localhost:3000/users",{
method:"POST",
headers:{
"content-type":"application/x-www-form-urlencoded"
}，
body:"username=tiechui&password=123"
}）
.then(res=>res.json())
.then(res=>{
conscle.log(res)
})

cookie

http协议无状态
localStorage：用户名密码？
token钥匙==>Nodejs token认证。
cookie 本地存储sessionID 钥匙 ==>Nodejscookie+session

savebtn.onclick = function()
//路径设置
document.cookie = "username=xiaoming;path=/155-cookie/aaa"
document.cookie = "age=18"
//过期时间设置
var date = new Date()
date.setMinutes(date.getMinutes()+1)
document.cookie =` username=kerwin;expires=${date}`

删除原理：将其设置时间提前。让其时间过期

jsopn

同源策略：同域名同端口号同协议
不符合同源策略，浏览器为了安全，会阻止请求

解决跨域问题：
1.cors 由后端设置 Access-Control-Allow-Origin:
2. jsonp

function test(obj){
console.log(obj)
}
mybtn.onclick =function(){
var oscript = document.createElement("script")
oscript.src="01.txt”//未来地址
document.body.appendchild(oscript)
}

通过文本文件来引入

mysearch.oninput = function(evt){
console.log(evt.target.value)
var oscript document.createElement("script")

oscript.src =`https://www.baidu.com/sugrec?pre=1&p=3&xxxxx`
document.body.appendChild(oscript)
oscript.onload = function(){
oscript.remove()
}

再谈函数

函数有返回值，而且返回值必须是复杂类型，而且要赋值给外面的变量。

function test(){
var name ="kerwin"
console.log(name)
var obj = {
a:1,
b:2
return obj
}
var obj1 = test()

var obj2=test()

闭包

闭包：
函数内部返回一个函数，被外界所引用。
这个内部函数就不会被销毁回收。
内部函数所用到的外部函数的变量也不会被销毁。

function FetchContainer(url){
return function(path){
return fetch(url+path)
var fetcha = FetchContainer("http://www.a.com")
fetcha("/aaa").then(res=>res.json()).then(res=>console.log(res))
fetcha("/bbb").then(res=>res.json()).then(res=>console.log(res))
fetcha =null
这样子蟹后面可以加而且
回收和方便
不用就回收

输入后才发请求：

mysearch.oninput =(function (){
var timer
null
return function () {
if (timer) {
clearTimeout(timer)
timer = setTimeout(function () {
console.log("发ajax请求"）
},500)
｝）（）