文章目录
-
- 2021.03.11 广东砺云教育科技有限公司
2021.03.11 广东砺云教育科技有限公司
CSS布局
float
属性:left(向左浮动),right(向右浮动),none(默认不不浮动)
清除浮动clear:left、right、both(清除左右浮动的影响)
子元素浮动会造成父元素高度塌陷
1、在父元素添加一个新的元素为其设置clear:both
2、为父元素添加overflow:hidden属性
3、为父元素添加伪类:after,对其设置clear:both
清除浮动的几种方式
1)父级div定义 height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
2)父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
3)结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
flex弹性布局
box需要添加弹性布局的父元素;item弹性容器中的每一个子元素
给父元素添加display:flex(块级元素)或者display:inline-flex(行级元素)属性,可使容器内容采取弹性布局显示
作用于容器的属性:flex-direction:row默认;flex-wrap:nowarp默认不换行;justify-content主轴对齐:flex-start、flex-end、center、space-between、space-around;align-items交叉轴对齐:stretch默认占满整个高度;
作用于项目的属性:order项目排序、flex-grow项目放大比、flex-shrink项目缩小比
promise
早期JS会陷入回调地狱(callback hell),获取第一份数据之后再获取第二份数据,获取到第二份数据后再获取第三份数据…这样的嵌套回调太多了就特别乱,就像地狱一般,回调地狱是因为嵌套函数存在耦合性,一旦有所改动就会牵一发而动全身
假设多个请求存在依赖,可能代码就会如下:
function firstAjax(){
ajax(url,()=>{
//处理逻辑
secondAjax()
})
}
function secondAjax(){
ajax(url2,()=>{
//处理逻辑
})
}
ajax(url,()=>{
//处理逻辑
firstAjax()
})
嵌套的回调地狱的问题导致了promise的出现,也就是说promise的出现,解决了callback嵌套的回调地狱(callback hell)问题
promise解决了上述的回调地狱问题
ajax(url).then(res=>{
console.log(res)
return ajax(url1)
}).then(res=>{
console.log(res)
return ajax(url2)
}).then(res=>{
console.log(res)
})
Promise有哪三种状态?如何变化?
Promise三种状态:pending、fulfilled、rejected
状态变化:
1.pending–>fulfilled(成功了)
2.pending–>rejected(失败了)
状态变化是不可逆的
状态的表现
1.pending状态,在过程中,没有结果,不会触发then和catch
2.fulfilled状态的Promise会触发后续的then回调函数
3.rejected状态的Promise会触发后续的catch回调函数
then和catch改变状态
then正常返回fulfilled的Promise对象,里面有报错则返回rejected的Promise对象
catch正常返回fulfilled的Promise对象,里面有报错则返回rejected的Promise对象
resolve---->then
then 中是一个正常return ,得到resolve ,可以继续执行 .then里面的内容
then 中是一个throw error,得到reject,不能执行后面的 .then
rejected---->catch
catch 中是一个正常return ,得到resolve可以继续执行 .then里面的内容
catch 中是一个error,得到reject ,不能执行后面的 .then,可以执行catch
Promise.reject(reason)
返回一个状态为失败的Promise对象,并将给定的失败信息传递给对应的处理方法catch
Promise.resolve(value)
返回一个状态为成功的Promise对象,并将成功信息传递给对应方法then
resolve状态的Promise会触发后续的then回调函数
var p = Promise.resolve().then(()=>{
return 100
})
//Promise.resolve()返回fulfilled状态的Promise对象,然后then执行完不报错,还是返回一个fulfilled状态的Promise
console.log(p) //100 Promise { <state>: "fulfilled", <value>: 100 }
p.then((res)=>{
console.log(res) //传进来p返回的100
}) Promise { <state>: "fulfilled", <value>: undefined }
p.then(()=>{ // 传进来p返回的100,但是没有使用,打印123
console.log(123)
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xscJCwL-1617416224365)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444485430.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dxQLPExo-1617416224371)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444692327.png)]
var p1 = Promise.resolve().then(()=>{
throw new Error("then erroe")
})
//Promise.resolve()返回fulfilled状态的Promise对象,然后then执行完报错了!返回一个rejected状态的Promise
console.log(p1) Promise { <state>: "rejected", <reason>: Error }
p1.then(()=>{ // rejected状态的Promise后续会触发catch而不是then,所以输出111111
console.log(123456)
}).catch(()=>{
console.log(111111); Promise { <state>: "fulfilled", <value>: undefined }
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8IXHw2h-1617416224375)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444927457.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHDi4qFi-1617416224382)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444933828.png)]
rejected状态的Promise会触发后续的catch回调函数
var p2 = Promise.reject("my error").catch(err=>{
console.log(err); //my error
}) //p2是一个reject,但是执行了catch,而且正常执行了,返回resolved
console.log(p2) Promise { <state>: "fulfilled", <value>: undefined }
p2.then(()=>{
console.log("p2之后触发了then") //p2之后触发了then
}) Promise { <state>: "fulfilled", <value>: undefined }
p2.catch(()=>{
console.log("p2之后触发了catch") //不执行catch的内容
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6egxi53-1617416224392)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455096795.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JaDF0NYk-1617416224399)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455104722.png)]
var p3 = Promise.reject("my error2").catch(err=>{
throw new Error("err") //p3是reject,执行catch,但是catch中报错了,返回reject
})
console.log(p3)//Promise { "rejected" } <state>: "rejected"<reason>: Error: err
p3.then(()=>{
console.log("p3之后触发的then") //不执行
}) Promise { <state>: "rejected", <reason>: Error }
p3.catch(()=>{
console.log("p3之后触发的catch") //p3之后触发的catch
}) Promise { <state>: "fulfilled", <value>: undefined }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GuJWrpKR-1617416224407)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455541478.png)]
Promise.resolve().then(()=>{
console.log(1);
}).catch(()=>{
console.log(2);
}).then(()=>{
console.log(3);
})
//1 3
resolve().then()执行成功返回的是resolve()只会执行then()而不会执行catch()
Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调,然后打印1,then执行完返回fulfilled状态的Promise,然后再执行then,打印3,返回返回fulfilled状态的Promise。因为没Error,没有rejected状态的Promise,所以不会触发catch回调。
Promise.resolve().then(()=>{
console.log(1);
throw new Error("err")
}).catch(()=>{
console.log(2);
}).then(()=>{
console.log(3);
})
//1 2 3
第一个then中有throw err 出错了,相当于reject,reject执行catch,所以catch里面的内容正常执行,catch正常执行了,相当于resolve,resolve会执行then
Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调,然后打印1,执行throw new Error(‘erro1’);返回一个rejected状态的Promise,触发catch回调函数,打印2,接着返回fulfilled状态的Promise,触发后面then的回调,打印3,返回一个fulfilled状态的Promise。
Promise.resolve().then(()=>{
console.log(1);
throw new Error("err")
}).catch(()=>{
console.log(2);
}).catch(()=>{
console.log(3);
})
// 1 2
第一个then执行,里面有err ,相当于reject,执行catch,catch成功执行了,相当于resolved,执行then,不执行catch,所以2执行,3不执行
打印2之后返回的是fulfilled状态的Promise,后面没有then,所以不打印3。catch里面只要没报错Error,那么就是fulfilled状态的Promise。
不要忽略最后的返回值,返回值会链式传递给下一个回调,只不过我们这里的例子没有强调返回值,等于return undefined;如果then/catch回调函数有形参,而上一个回调函数有返回值,那么返回值会作为下一个回调的形参。
网络请求的原理(看书了解多一点)
前端发起一个网络请求
- 传入基本参数(
url
,请求方式) - 请求参数、请求参数类型
- 设置请求头
- 获取响应的方式
- 获取响应头、响应状态、响应结果
- 异常处理
- 携带
cookie
设置 - 跨域请求
前端进行网络请求的方式
form
表单、ifream
、刷新页面Ajax
- 异步网络请求的开山鼻祖jQuery
- 一个时代fetch
-Ajax
的替代者axios、request
等众多开源库
原生 Ajax 的用法
var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)
// 接收返回值
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){
if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
dataString += key+"="+value[key]+"&";
};
return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(