前端查漏补缺全知识点合集（更新中9.3）

最新推荐文章于 2022-09-07 10:01:53 发布

前端最菜

最新推荐文章于 2022-09-07 10:01:53 发布

阅读量643

点赞数 4

分类专栏：前端 es6 网络文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/liujiango/article/details/107713500

版权

本文详述了前端开发中的关键知识点，包括HTML5的drag API、CSS的元素宽高设定及形状绘制、JavaScript的this指向问题、ES6的装饰器以及Vue框架的深入理解。文章探讨了Vue的v-bind、v-model、生命周期、组件间通信、Vuex的使用及原理，同时涵盖了HTTP/2的多路复用概念。此外，还涉及了面试中常见的技术问题，如TCP/UDP的区别和跨域解决方案。

摘要由CSDN通过智能技术生成

该篇文章用于本人查漏补缺，会有大量知识点，不定期更新，有人愿意看就随便看看。

HTML

浏览器的运行机制：

构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现
布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
绘制渲染树（paint/repaint）：遍历渲染树，使用UI 层来绘制每个节点。

HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

CSS

为何img、input等内联元素可以设置宽、高

从元素本身的特点来讲，可以分为替换和不可替换元素。
可替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据 <img>标签的src属性的值来读取图片信息并显示。例如根据标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素

CSS画正方体，三角形

画三角形

#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}

画正方体：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立方体</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            top: 65px;
            margin: 50px;
            transform-style:preserve-3d ;/*给子级设置3d效果*/
            transform: rotateX(33deg) rotateY(39deg) rotateZ(0deg) translate3d(0px,0px,0px);
        }
        .back1{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: chartreuse;
            opacity: 0.5;/*设置透明效果*/
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,100px);
        }
        .back2{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #ff2d27;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
        }
        .back3{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #e492ff;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,50px);
        }
        .back4{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #2f18a1;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,-50px);
        }
        .back5{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #12fffd;
            opacity: 0.5;
               transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,-50px);
        }
        .back6{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #421221;
            opacity: 0.5;
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="back1"></div>
    <div class="back2"></div>
    <div class="back3"></div>
    <div class="back4"></div>
    <div class="back5"></div>
    <div class="back6"></div>
</div>
</body>
</html>

JS

this指向问题

（函数内部的this 是由函数调用的时候来确定其指向的。）
1.在普通函数中：this指向window对象
2.在对象的方法中，this指向调用该方法的对象
3.在构造函数的调用中，this指向new关键字创建的对象
4.在定时器中，this指向window对象
5.在事件的处理函数中，this指向触发该事件的对象

ES6

ES6装饰器的使用

核心问题讲解

装饰器就是相当于给人或者事多加一些东西就是现实中装饰类似的意思化妆打扮加衣服

装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法与属性。许多面向对象的语言都有这项功能。一般和类class相关普通函数不要使用

进入代码就会执行完成

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

装饰类Foo
@frozen 
class Foo {
	
  //装饰method方法
  @configurable(false)
  method() {}
  
 //装饰yy方法
  @throttle(500)
  yy() {}
  
}

问题扩展

修饰类基本形式

@decorator
class A {
   }
// 等同于

class A {
   }
A = decorator(A);
// decorator 是一个 函数 相当于调用它 给A 类 可以加上一些其他代码

举例：

@testable
class MyTestableClass {
   
  // ...
}

function testable(target) {
   
  target.isTestable = true;
}

MyTestableClass.isTestable // true
//为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。

修饰的复杂形式多套一个函数返回一个函数

//testable是一个Factory
function testable(isTestable) {
   
  return function(target) {
   
    target.isTestable = isTestable;

最低0.47元/天解锁文章