108-161

最新推荐文章于 2024-06-14 15:02:13 发布

mttp02

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量47

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_74348480/article/details/128743678

版权

事件委托

·就是把我要做的事情委托给别人来做
·因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
·我们就可以把子元素的事件委托给父元素来做
//减少多个函数的绑定的性能损耗
//动态添加li，也会有事件处理

正则表达式

//1字面量//
var reg = /abc/
console.log(reg)
//2．内置构造函数
var reg2 = new RegExp("abc")
console.log(reg2)

mytext.onblur = function(){
console.log(mytext.value)

//检验是否含有reg中的内容
console.log(reg.test(mytext.value))

元字符-基本元字符

\d一位数字（0-9)

var reg =/\d\d/
console.log(reg.test( "abc"))
console.log(reg.test( "123"))
console.log(reg.test( "1"))//false

\D一位非数字
\s 1位空白(包括：空格缩进换行)
\S 1位非空白
\w字母数字下划线
\W非字母数字下划线
．任意内容(换行不算)
.\转义字符

元字符-边界符

//^开头
var reg = /^\d/
//$结尾边界
var reg =/d$/

元字符-限定符

//1.*0~多次
var reg= /\d*/
//2.+ 1～多次
var reg= /\d+/
//3.?0~1
var reg=/\d?/
//4.{n}指定次数
var reg=/\d{3}/
//4. {n,} >=n
var reg=/\d{3,}/
//5. {n,m}
var reg=/\d{3,5}/

元字符-特殊符号

// 1.() 整体
var reg2=/(abc){2}/
// 2．|或 .
var reg = /a|b/
//3 []代表1个
var reg =/[abcde]/
//4 [^abc]取反
var reg2 =/[^abc]/

正则表达式-捕获exec

// 2029/01/01将-替换成了/
var reg = /d{4}-\d{1,2}-\d{1,2}/
var newdatestr = reg.exec(datestr)
console.log(newdatestr[0].split("-").join("/"))
//标识符 g（全局） i(忽略大小写)

-正则表达式的两大特性

1.懒惰，解决使用全局标识符g
2.贪婪
3.非贪婪（加？往最小取）
var reg = /d{1,4}?/

正则与字符串方法

//replace替换
var str = "adearfa"
var newstr = str.replace(/a/g, "*")
console.log(newstr)
//search查找有几个
console.log(str.search("a"))
console.log(str.search(/a/))

// match捕获内容多个

-this指向

//this关键字
//this 谁调用我， this就指向谁(es6箭头函数)

改变this指向

// call apply bind

//call 执行函数，并改变this执行为函数的第一个参数
//支持多个参数
obj1.getName.call(obj2,1,2,3)
// apply执行函数，并改变this执行为函数的第一个参数
//两个参数，第二个参数是一个数组
obj1.getName.apply(obj2,[1,2,3])
//bind改变this指向为函数的第一个参数，不会自动执行函数
//支持多参数

-ES6定义变量

let与var区别
1．必须先定义再使用
2．变量重名会报错
3．块级作用域，只存在于{ }中
let 变量
Const常量，初始时必须赋值

-ES6的箭头函数

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

//1.(只有一个形参的时候)可以省略（）
var test = (a,b) =>{
console.log( 111,a,b)
}
test( "kerwin",100)
//2.{ }可以省略只有一句代码，只有返回值的时候
var test = a => 100*a
console. log(test(10))

-ES6的解构赋值

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

var obj2 = {
name : "kerwin",
age :100,
location:{
province: "liaoning",
city: "dalian"
},
hobby: [111,222,333]
}
var {
name,
age,
location:{
province,
city
},
hobby : [m,n,k]
}=obj2

-ES6的展开运算符

合并数组
(1)

var a = [1,2,3]var b = [4,5,6]
console.log(a.concat(b))

(2)…

var c = [...a,...b]
console.log(c)

复制

//...复制
var a =[1,2,3]
var b = [...a]

搜集剩余参数

var test = function(a,b,...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.依赖不乱

//导出 JS文件导出
export {
A1,A2,test,A-A
}
//导入 HTML文件导入
<script type="module">
import {A1,A2,test,}from './module/A.js'
</script>
//重名问题test as A_test
import {A1,A2,test as A_test}from './module/A.js'
//在另一个C文件中引入解决依赖
import {A_A}from './A.js'
import {B_B}from './B.js'

初识面向对象

首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式

创建对象的方式

function createObj(name){
this.name = name
this.material =[]
this.cook = function(){
	}
}
var obj1 = new createObj()

-构造函数注意问题

//1.首字母大写
//2.构造函数不写return
//3构造函数能当成普通函数用,但this不适合

var obj1 = new CreateObj( "kerwin ")//对,要加new
var obj1 = CreateObj( "kerwin ")//不可以

-面向对象的原型

var data1 = {
title: "体育",
list:["体育-1","体育-2","体育-3"]
}
var data2 = {
title:"综艺",
list:["综艺-1","综艺-2","综艺3"]
}


function CreateList(title,List){
this.title = title,
this.list = list
}
var obj1 = new CreateList(data1.title,data1.list)
console.log(obj1)

//原型
CreateList.prototype.render = function (){ }
//对象.proto ===构造函数.prototype

-ES6-class

cLass createobj {
//构造器函数
constructor( name){
this.name =name
}
}

-面向对象继承

function Person( name , age){
this.name = name
this.age = age
}

//Person()

Person. prototype.say = function(){
console.log (this.name ,"hello")
}

function student( name,age,grade){
Person.call(this,name,age)
this.grade = grade
}

var obj = new Student( "kerwin",100, 100)
console.log(obj)

在这里插入图片描述
//构造函数继承–继承属性
//原型继承===继承原型上方法

-ES6-继承

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

-ajax

ajax ==lasync javascript and xml

AJAX的优势
1.不需要插件的支持，原生js就可以使用
2.用户体验好（不需要刷新页面就可以更新数据)
3.减轻服务端和带宽的负担
4.缺点:搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

//1．创建XHR new XMLHttpRequest()
var xhr = new XMLHttpRequest()console.log(xhr)
//2。配置 open(请求方式，请求地址，是否异步)
// localhost本机域名127.0.0.1本机ip
//baidu.com域名    221...... ip
xhr.open( "GET" , "http://localhost:5500/136-ajax/1.txt")
//3. send
xhr. send()
//4．接受数据，注册一个事件
xhr.onreadystatechange = function(){
if(xhr.readystate===4){
console.log("数据解析完成")
}
}

//200 ok
// 404未找到页面。

在这里插入图片描述

-ajax同步异步

var xhr = new XMLHttpRequest()
xhr.open( "GET", "1.json " ,true)
//true表示异步请求
//false表示同步请求,网速慢会卡

在这里插入图片描述

get 偏向获取数据
post偏向提交数据
put偏向更新
delete偏向删除信息
patch 偏向部分修改
header
options
connnect

nodejs - http: / / nodejs.cn/ download/
json-server
-基于一个json文件就可以创建很多的后端模拟接口

-Promise基础语法

Promise

promise是一个ES6的语法
·承诺的意思，是一个专门用来解决异步回调地狱的问题

回调地狱

·当一个回调函数嵌套一个回调函数的时候·就会出现一个嵌套结构
·当嵌套的多了就会出现回调地狱的情况·比如我们发送三个ajax请求
.第一个正常发送
.第二个请求需要第一个请求的结果中的某一个值作为参数
.第三个请求需要第二个请求的结果中的某一个值作为参数

Promise基础语法

// Promise构造函数
var q=new Promise(function(){
})
//q是promise对象
q.then(function(){//兑现承诺，这个函数被执行
}).catch(function(){//拒绝承诺，这个函数就会被执行
})

// pending执行中
//fulfilled
//reject

Promise封装ajax

在这里插入图片描述

async和await语法

ASYNC/AWAIT
async / await是一个es7的语法
·这个语法是回调地狱的终极解决方案
·语法:

async function fn() {
const res = await promise对象
}

// await同步代码/promise对象
var res =await pajax({
url : "http:// localhost : 3000/news "
data:{
	author : "kerwin"
	}
	})
console.log(res)
console.log(2222)}
test()

fetch

用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。

语法

var username = "kerwin"
fetch(` http:// localhost:3000/users111?username=$ {username} `)
.then((res)=>{
console. log(res)
if(res.ok){
return res.json()
}else{
//拒绝
return Promise.reject(
}

cookie

http协议无状态
localstorage:用户名密码?token钥匙= =〉Nodejs token认证。
cookie 本地存储 sessionID钥匙= = =>Nodejs cookie+session

//存cookie
savebtn.onclick = function(){
document.cookie = "username=xiaoming; "
document.cookie =  "age=18"
}

设置访问路径

为了安全
内层可访问外层
外层不能访问内层

过期时间设置

//过期时间设置
var date = new Date()
date.setMinutes(date.getMinutes()+1)
document.cookie = `uername=kerwin;expires=${date.getUTcStr}`
//一分钟过期

读取

getbtn.onclick = function(){
console.log (document.cookie)
}

jsonp

同源策略:同域名同端口号同协议
不符合同源策略，浏览器为了安全，会阻止请求
解决:
1.cors 由后端设置, Access-Control-Allow-Origin:
2. jsonp
jsonp原理:动态创建script标签，src属性指向没有跨域限制
指向一个接口，接口返回的格式一定是****()函数表达式。

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

闭包

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

function outer(){
var name = "kerwin"return function(){
return name+"11111111111111"
}
}
var func = outer()
console.log(func())

优点:让临时变量永驻内存
缺点:内存泄漏func = null

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("/ccc").then(res=>res.json()).then(res=>console.log(res))
fetcha("/ddd").then(res=>res.json()).then(res=>console.log(res))
fetcha = null