前端基础知识梳理

最新推荐文章于 2022-04-09 21:54:14 发布

旧城爱

最新推荐文章于 2022-04-09 21:54:14 发布

阅读量145

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/weixin_44442095/article/details/87939814

版权

随笔专栏收录该内容

41 篇文章 0 订阅

订阅专栏

css盒模型

: 包含IE模型和标准模型，浏览器默认的方式是标准模型
两者的区别在于宽和高的计算方式不同。标准模型计算宽高指的就是content的宽高，不包含padding和border，而IE模型计算content的宽高是加上padding和border的
如何设置这两种模型？
我们就要用到css3里的box-sizing：
content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。（标准模型）
border-box：为元素设定的宽度和高度决定了元素的边框盒。（IE模型）

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。

JS如何设置获取盒模型对应的宽和高

1.dom.style.width/height(这里的dom是用getElementById或者其他方式获取到的dom节点)只能取出内联样式的宽和高
2 dom.currentStyle.width/height拿到的是渲染后的宽和高，但只有IE支持
3，window.getComputedStyle(dom).width/height 这个通用性更好
4,dom.getBoundingClientRect().width/height 计算一个元素的绝对位置，左顶点，拿到的是top left width height

边距重叠问题

一般情况有父子元素边距重叠，兄弟元素边距重叠（谁边距设置的大，以谁为准，）
下面来说下父子元素

<div class="father">
<div class="son"></div>
</div>
<style>
.son{
height:100px;
margin-top:10px;
}
</style>

f12可以发现，father与son的高度都是100px,在这里发生了高度坍塌。但是给father加上overflow hidden后father的高度就会变成110，加上这个属性后，就给父级元素创建了一个块级格式上下文（BFC）当然还有其他方法

BFC原理

BFC的全称为Block Formatting Context，即块级格式化上下文。一个BFC有如下特性：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
这个讲的比较容易理解https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
## 创建BFC
浮动（float的值不为none）；
绝对定位元素（position的值为absolute或fixed）；
行内块（display为inline-block）
表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
弹性盒（display为flex或inline-flex）；
overflow不为visible；

DOM事件

DOM事件类事件级别
DOM0 element.οnclick=function(){}
DOM2 element.addEventListener(‘click’,function(){},false)
DOM3 element.addEventListener(‘keyup(增加了鼠标键盘事件)’,function(){},false)
DOM事件模型：捕获和冒泡，捕获就是从外向内，冒泡就是由内向外，事件流就是事件通过捕获到达目标阶段，再由目标阶段到达widow元素也就是冒泡的过程。
示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #wrapDiv, #innerP, #textSpan{
        margin: 5px;padding: 5px;box-sizing: border-box;cursor: default;
    }
    #wrapDiv{
        width: 300px;height: 300px;border: indianred 3px solid;
    }
    #innerP{
        width: 200px;height: 200px;border: hotpink 3px solid;
    }
    #textSpan{
        display: block;width: 100px;height: 100px;border: orange 3px solid;
    }
    </style>
</head>
<body>
     <div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
    <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>
</body>
</html>

点击textspan
打印出的顺序是
[Web浏览器] “window 捕获” .html (34)
[Web浏览器] “document 捕获” .html (38)
[Web浏览器] “documentElement 捕获” .html (42)
[Web浏览器] “body 捕获” .html (46)
[Web浏览器] “wrapDiv 捕获” .html (50)
[Web浏览器] “innerP 捕获” .html (54)
[Web浏览器] “textSpan 捕获” .html (58)
[Web浏览器] “textSpan 冒泡” .html (87)
[Web浏览器] “innerP 冒泡” .html (83)
[Web浏览器] “wrapDiv 冒泡” .html (79)
[Web浏览器] “body 冒泡” .html (75)
[Web浏览器] “documentElement 冒泡” .html (71)
[Web浏览器] “document 冒泡” .html (67)
[Web浏览器] “window 冒泡” .html (63)

这就是事件流发生的三个阶段过程
Event对象的常见应用:
event.preventDefault() ---- 阻止事件的默认行为
event.stopPropagation()----- 阻止事件传播
event.stopImmediatePropagation() ----一个元素绑定两个事件，其中一个添加这个，可以阻止另一个事件触发，优先级响应
event.currentTarget-----返回绑定事件的元素
event.target----返回触发事件的元素
自定义事件：var eve=new Event(’ 事件名’)
需要dispatchEvent触发（高级浏览器）
阻止事件传播
在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。

IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播。
　　详细资料https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html
　　阻止事件的默认行为

e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为。

IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果。

HTTP协议的主要特点

简单快速灵活无连接无状态
报文组成部分：
请求报文：请求行请求头空行请求体
响应报文：状态行响应头空行响应体
POST 和GET 的区别：
GET在浏览器回退时是无害的，而POST会再次提交请求
GET产生的URL地址可以被收藏，POST不可以
GET请求会被浏览器主动缓存，而POST不会，除非手动设置
GET请求只能进行url编码，而POST支持多种编码方式
GET请求在URL中传参是有长度限制的，POST没有
GET请求参数会被保留在历史记录里，POST不会
POST比GET安全，GET不能用来传递敏感信息
GET参数通过url来传递，POST放在Request body中
HTTP状态码
1xx 指示信息-表示请求已接收，继续处理
2xx 成功–表示请求已经被成功接收了
3xx 重定向–要完成请求必须进行更进一步的操作
4xx 客户端错误–请求有语法错误或请求无法实现
5xx 服务器错误–服务器未能实现合法的请求

原型链

创建的对象方法
var obj1 = {name：‘obj1’}—字面量创建对象（原型链会指向Object）
var obj2 = new Object（{name：‘obj2 ’}）—通过object声明一个对象
var M =function（）{this.name=’obj3‘}—构造函数创建对象
var obj3=new M（）
var P ={ name：’obj4‘}；
var obj4 = Object.create（P）
只要是对象了，就是一个实例，通过new创建的就是一个构造函数, js引擎会给构造函数自动增加一个属性–prototype，它会初始化一个对象，也就是原型对象，原型对象可以通过constructor来找到构造函数
_ proto _
通过原型链找到原型对象，原型对象的方法可以被实例所共有，如果有一个实例想使用一个方法，但这个实例没有这个方法就会通过原型链往上找，直到找到。
函数才有prototype，对象是没有的，只有实例对象有_ proto _，（函数也是对象)

面向对象

类的声明

function Person(){
    	this.name='name'
    }
    Es6中的声明
     class Person2{
    	constructor(){
    		this.name='name'
    	}
    }

借助构造函数实现继承

function Parents(){
    	this.name='par1'
    }
    function Son(){
    	Parents.call(this);//apply 也可以
    	this.type='child1';
    }
    console.log(new Son)
   缺点是无法继承父级的方法

借助原型链实现继承

  function Parents(){
    	this.name='par1'
    }
    function Son(){
    	
    	this.type='child1';
    }
   Son.prototype=new Parents()
   console.log(new Son())
   缺点是因为原型链是公用的，如果创建了两个实例，给其中一个增加数据，另一个也会发生改变

组合方式继承

    function Parents(){
    	this.name='par1';
    	this.play=[1,2,3]
    }
    function Son(){
    	Parents.call(this)
    	this.type='child1';
    }
   Son.prototype=Object.create(Parents.prototype)
   Son.prototype.constructor=Son
   var s1 =new Son();
   var s2 =new Son();
   s1.play.push(4);
   console.log(s1,s2)
   console.log(s1 instanceof Son)
   console.log(s1.constructor)
   这种方式把上面两种方式优点集合起来

new在执行时会做四件事情基础知识
new会在内存中创建一个新的空对象
new 会让this指向这个新的对象
执行构造函数目的：给这个新对象加属性和方法
new会返回这个新对象

前后端通信

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过 AJAX 的方式请求。
同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

限制：Cookie LocalStorage 和IndexDB无法读取，DOM无法获得 AJAX请求不能发送
前后端通信方式
Ajax 是同源下面的通信方式
WebSocket 不受同源策略限制
CORS 新的通信标准
如何创建ajax
https://juejin.im/entry/583a9e02ac502e006c214b81

跨域通信的几种方式
JSONP
Hash
postMessage （h5）
WebSocket
CORS --是在被请求的服务端响应的时候添加一个 AccessControl-Allow-Origin 的响应头，表示这个资源是否允许指定域请求

JSONP是一种借助于 script 标签发送跨域请求的技巧。原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

旧城爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识梳理

css盒模型: 包含IE模型和标准模型，浏览器默认的方式是标准模型两者的区别在于宽和高的计算方式不同。标准模型计算宽高指的就是content的宽高，不包含padding和border，而IE模型计算content的宽高是加上padding和border的如何设置这两种模型？我们就要用到css3里的box-sizing：content-box：宽度和高度分别应用到元素的内容框。在宽度和高度...
复制链接

扫一扫