day03 -- 前端复习-CSDN博客

本文链接：https://blog.csdn.net/qq_27568213/article/details/105050100

本文深入讲解前端开发中的关键概念和技术，包括HTTP请求过程、CSS布局技巧、BFC原理及应用、闭包与作用域链的理解，以及原生Ajax的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTTP请求过程

域名解析，根据域名找到服务器IP，向服务器发送请求
发起TCP的3次握手
建立TCP连接后发起http请求
服务器响应http请求，浏览器得到HTML代码
浏览器解析HTML代码，并请求html代码中的资源（js,css,img等）
浏览器对页面进行渲染呈现给用户。

CSS布局

两列布局

左列定宽，右列自适应

/*1.左float，右margin-left*/
<div class="parent"> 
    <div class="left">左列定宽</div>
    <div class="right">右列自适应</div>
</div>

.left{
    float:left;
    width:100px;
    height:500px;
}
.right{
    height:500px;
    margin-left:100px; /*大于等于左侧div的宽度*/
}


/*2.table实现，html同上,margin失效，不支持ie8*/
.parent{
    width:100%;
    display:table;
    height:500px;
}
.left{
    width:100px;
}
.left,.right{
    display:table-cell; /*利用单元格自动分配宽度*/
}


/*3.绝对定位，html同上，子绝父相*/
.parent{
    position: relative;
}
.left{
    postion: absolute;
    top: 0;
    left: 0;
    width:100px;
}
.right{
    position:absolute;
    top:0;
    left:100px;  /*值大于等于左侧div的宽度*/
    right:0;
}

/*4. float+overflow实现，注意需要清除浮动，否则会产生高度塌陷*/
.left{
    float:left;
    width:100px;
    height:500px;
}
.right{
    height:500px;
    overflow: hidden;
}


/*5. 使用flex，左边定宽，右边均分了父元素剩余空间 */
.parent{
    width:100%;
    height:500px;
    display:flex;
}
.left{
    width:100px;
}
.right{
    flex:1;
}

/*6. Grid实现，设置列数*/
.parent{
    width: 100%;
    display:grid;
    grid-template-column: 100px auto; /*设定两列，左边宽度为100px*/
}

左列自适应，右列定宽，同上，将left和right调换一下就可以了。

一列不定，一列自适应（盒子宽度随着内容增加或减少发生变化，另一个盒子自适应）

<div class="parent">
    <div class="left">左列不定宽</div>
    <div class="right">右列自适应</div>
</div>

/*1.左float+ 右overflow, 需要清除浮动*/
.left{
    float:left; /*只设置浮动，不设置宽度*/
    margin-right:10px; /*和右侧元素间隔一定距离*/
    height:500px;
}
.right{
    overflow:hidden;  /*触发bfc*/
    height: 500px;
}

/*2.flex*/
.parent{
    display: flex;
}
.left{ /*不设置宽度*/
    margin-right:10px; /*和右侧元素间隔一定距离*/
    height:500px;
}
.right{
    height:500px;
    flex:1;
}

/*3. Grid */
.parent{
    display: grid;
    grid-template-columns: auto 1fr; /* auto和1fr换一下顺序就是左列自适应，右列不定宽*/
}
.left{ /*不设置宽度*/
    margin-right:10px; /*和右侧元素间隔一定距离*/
    height:500px;
}
.right{
    height:500px;
}

BFC

块级格式化上下文，独立的渲染区域，元素内的子元素不会影响外面的元素。

float 的值不为none
overflow 的值不为visible
position 的值不为relative 和 static
display 的值为 table-cell, table-caption， inline-block中的一个
IE下为Layout，可通过 zoom:1 触发

BFC清除浮动

clearfix:after{
    content: "";
    height:0;
    line-height:0;
    display:block;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1; //兼容IE
}

闭包

闭包是指有权访问另一个函数作用域中的的变量的函数
创建闭包的最常见方式：一个函数内部创建另一个函数。
特性：
- 函数内再嵌套函数
- 内部函数可以引用外层的参数和变量
- 变量始终保持在内存中

//常见的定时器问题
for( var i = 0; i < 5; i++ ) {
    setTimeout(() => {
        console.log( i );
    }, 1000)
}
结果为5个5，
js中最基础的异步是setTimeout和setInterval函数，会放在队列最后执行。而i进过循环已经变为5了，闭包后

for( var i = 0; i < 5; i++ ) {
    (function(j) {
        setTimeout(() => {
            console.log( j );
        }, 1000)
    })(i);
}

作用域链

作用域链的作用是：保证执行环境中变量和函数的访问时有序的，作用域链的变量只能向上访问，变量访问到window就被终止。向下访问是被禁止的。
作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

Ajax的原生写法

//1.创建ajax对象
var xhr = new XMLHttpRequest();
//4.监听请求
xhr.onreadystatechange = function(){
	/* 
	 *xhr对象的readyState属性发生了改变，这个事件就会触发
	 *readyState:
	 * 0 ===> xhr对象已经创建，但是还没有进行初始化
	 * 1 ===> xhr对象已经调用open
	 * 2 ===> xhr对象已经发出了ajax请求
	 * 3 ===> 已经收到了部分数据
	 * 4 ===> 数据已经全部返回
	* */
	
	if(xhr.readyState !== 4){
		return;
	}
	//Http返回的响应码。404是请求资源不存在，200是请求成功
	if(xhr.status >= 200 && xhr.status <= 300){
		//数据放在了xhr.responseText 的属性中(String)
		document.querySelector('h1').innerHTML = xhr.responseText;
	}else{
		console.error('请求失败');
	}
}
//2.打开这个对象
xhr.open('get','./test.txt',true);//是否异步
//3.发送请求
xhr.send();

XMLHTTPRequest