前端总结

最新推荐文章于 2024-08-23 15:07:54 发布
最新推荐文章于 2024-08-23 15:07:54 发布
阅读量290 收藏
点赞数
文章标签： 面试 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/balabala_1001/article/details/106222854
版权

前端总结

css 盒模型

在这里插入图片描述

说明：
margin(外边距)：清除边框外的区域，外边距是透明的
border(边框)：围绕在内边距和内容外的边框
padding（内边距）：清除内容周围的区域，内边距是透明的
content（内容）：盒子的内容，显示文本和图像

  • 总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

  • 标准盒模型下盒子的大小 = content + border + padding + margin

  • 怪异盒模型下盒子的大小 = width（content + border + padding ）+ margin

  • 标准盒模型：box-sizing : conent-box，IE盒模型（怪异盒模型）：box-sizing : border-box

BFC

BFC（块级格式化上下文），是Web页面中盒模型布局的css的渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC形成的条件：

  1. 浮动元素，float除none之外的值；
  2. 定位元素，position（absolute,fixed）；
  3. display为一下其中之一的值inline-block,table-cell,table-caption（表格标题）;
  4. overflow除了visible以外的值（hidden,auto,scroll）
    BFC的特性：
  5. 内部的Box会在垂直方向上一个接一个的放置；
  6. 垂直方向上的距离有margin决定；（解决外边距重叠问题）
  7. bfc的区域不会与float的元素区域重叠；（防止浮动文字环绕）
  8. 计算bfc的高度时，浮动元素也参与计算；（清除浮动）
  9. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外边元素

DOM事件

  • 事件级别：

DOM 0级：写法：el.onclick.function（）{}

当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的btn元素绑定3个点击事件），是不被允许的。DOM 0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段（或者目标阶段）执行的。

由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件
DOM 2级 写法：el.addEventListener(event-name，callback，useCapture)

1.event-name:事件名称，可以是标准的DOM事件
2.callback:回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象event
3.useCapture:默认是false,代表事件句柄在冒泡阶段执行

DOM 3级 写法和DOM 2级 一致，只是在DOM 2级事件基础上添加了更多的时间类型

  1. UI事件：当用户与页面上的元素交互时触发，如：laod、scroll

  2. 焦点事件：当元素获得或失去焦点时触发，如：blur、focus

  3. 鼠标事件：当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

  4. 滚轮事件：当使用鼠标滚轮或类似设备时触发，如：mousewheel

  5. 文本事件：当在文档中输入文本是触发，如：textInput

  6. 键盘事件：当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

  7. 合成事件：当为IME（输入发编辑器）输入字符时触发，如：compositionstart

  8. 变动事件：当底层DOM结构发生变化时触发，如：DOMsubtreeModified

  9. 同时DOM 3级事件也被允许使用者自定义一些事件

  • DOM事件模型 事件流

流的概念现在在JavaScript中比较多，比如vue中单向数据流，node中的管道流。用术语说流是对输入输出设备的抽象。以程序的角度来说，流是具有方向的数据。

  • 事件流所描述就是从页面上接收事件的顺序

事件模型分为：捕获和冒泡
事件流：
（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段；
在这里插入图片描述

  • 事件委托（代理）

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
通俗的讲就是利用冒泡的原理，把事件加到父级上，触发执行效果。
优点：

提高性能

  • Event对象使用
  1. 阻止默认行为：event.preventDefault()
    a链接跳转、右键呼出菜单事件、提交（submit）事件
  2. 阻止冒泡：event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。stoplmmediatePropagation既能阻止事件向父元素冒泡也能阻止同事件类型的其它监听器被触发
  3. event.target&event.currentTarget
<div id="a">
  aaaa
    <div id="b">
        bbbb
        <div id="c">
            cccc
        </div>
        <div id="d">
            dddd
        </div>
    </div>
</div>
//=======================js
document.getElementById("a").addEventListener("click", function (e) {
	 console.log(
	       "target:" + e.target.id + "&currentTarget:" + e.currentTarget.id
	   );
	});
document.getElementById("b").addEventListener("click", function (e) {
   console.log(
       "target:" + e.target.id + "&currentTarget:" + e.currentTarget.id
   );
});
document.getElementById("c").addEventListener("click", function (e) {
   console.log(
       "target:" + e.target.id + "&currentTarget:" + e.currentTarget.id
   );
});
document.getElementById("d").addEventListener("click", function (e) {
   console.log(
       "target:" + e.target.id + "&currentTarget:" + e.currentTarget.id
   );
});

当我们点击里层的元素时，会依次输出
在这里插入图片描述
由以上例子可知：event.currentTarget始终是监听事件者，而event.target是事件的真正发出者

  • 自定义事件
//创建事件, Event是无法传递参数的
var event = new Event('build');
//创建事件, CustomEvent是可以传递参数的
var event = new CustomEvent('build', { detail: elem.dataset.time })

//监听事件Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

//分发/触发事件Dispatch the event.
elem.dispatchEvent(event);
  • EventEmitter(发布订阅模式)

有兴趣的童鞋可以看看这篇文章：https://blog.csdn.net/qq_27053493/article/details/100682150

JS 相关

  • 创建对象方式：
 //1.对象字面量
    let a = {name:'xxx'};
    //2.构造函数
    function Person(name) {
        this.name = name
    }
    let b = new Person('xxx')
    //3. Object.create(proto,[propertiesObject])
    //Object.create()方法创建对象时，属性是在原型链下面的
    let c = Object.create({name:'XXX'})

运行结果：
在这里插入图片描述

  • 原型链示意图

在这里插入图片描述

  • instanceof 原理：
//  instanceof在继承关系中的用法============================
    //instanceof可以在继承关系中用来判断一个实例是否属于它的父类型
    function Foo(){}
    function Aoo(){}

    Foo.prototype = new Aoo()  //原型继承
    var foo = new Foo()
    console.log(foo instanceof Foo) //true
    console.log(foo instanceof Aoo) //true
  • new 运算符原理
//  new运算符原理============================
    function _new(func){
        //第一步 创建新对象
        let obj = {}
        //第二步 空对象的_proto_指向了构造函数的prototype成员对象
        obj.__porto__ = func.prototype;
        // 一二步合并就相当于 let obj = Object.create(func.prototype)
        //第三步 使用apply调用构造器函数，属性和方法被添加到this引用的对象中
        let result = func.apply(obj)
        if(result && (typeof(result) == "object" || typeof(result) == "function")){
            //如果构造函数执行的结果返回的是一个对象,那么返回这个对象
            return result 
        }
        //如果构造函数返回的不是一个对象,返回创建的新对象
        return obj
    }
  • js实现继承的方法
   //定义一个父类
    function Father(name){
        //属性
        this.name = name || "father";
        //实例方法
        this.sayName = function(){
            console.log (this.name)
        }
        this.color = ["red","blue"];
    }
    //原型方法
    Father.prototype.age = 18;
    Father.prototype.sayAge = function(){
        console.log(this.age)
    }
  1. 原型链继承：将父类的实例作为子类的原型
	function Son(name) {
      this.name = name || "son";
    }

    Son.prototype = new Father();

    let s1 = new Son("s1");
    let s2 = new Son("s2");

    s1.color.push("black");

    console.log("将父类的实例作为子类的原型:",s1.name); //s1
    console.log("将父类的实例作为子类的原型:",s1.color); //['red','blue','black']
    console.log("将父类的实例作为子类的原型:",s1.age); //18
    s1.sayAge(); //18
    console.log("将父类的实例作为子类的原型:",s2.name); //s2
    console.log("将父类的实例作为子类的原型:",s2.color); //['red','blue','black']

优点：

  1. 简单，易于实现
  2. 父类新增原型方法、原型属性，子类都能访问到

缺点：

  1. 无法实现多继承，因为原型一次只能被一个实例更改
  2. 来自原型对象的所有属性被所有实例实例共享（上述例子中的color属性）
    3.创建子类实例时，无法向父构造函数传参

2.构造继承：复制父类的实例属性给子类

//构造继承：复制父类的实例属性给子类==================================================
    function Son(name) {
      Father.call(this, "我是传给父类的参数");
      this.name = name || "son";
    }
    let s = new Son("son");
    console.log(s.name); // son
    //s.sayAge(); // 抛出错误（无法继承父类原型方法）
    s.sayName(); // son
    console.log(s.age); // undefined （无法继承父类原型属性）
    console.log(s instanceof Father); // false
    console.log(s instanceof Son); // true

优点：

  1. 解决了原型链继承中子类实例共享父类引用属性的问题
  2. 创建子类实例中，可以向父类传递参数
  3. 可以实现多继承（call 多个父类对象）

缺点：实例并不是父类的实例，只是子类的实例

  1. 只能继承父类实例的属性和方法，不能继承其原型上的属性和方法
  2. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
  1. 组合继承：将原型链和借用构造函数的技术组合到一起。使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承
function Son(name){
        //第一次调用父类构造器  子类实例增加父类实例
        Father.call(this, "我是传给父类的参数");
        this.name = name || "son";
    }
    //经过new运算符 第二次调用父类构造器 子类原型也增加了父类实例
    Son.prototype = new Father();

    let s = new Son("son");
    console.log(s.name);//son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // true
    console.log(s instanceof Son); // true
    console.log(s.constructor === Father); // true
    console.log(s.constructor === Son); // false

优点：

  1. 弥补了构造函数的缺点，现在既可以继承实例的属性和方法，也可以继承原型的属性和方法
  2. 既是子类的实例，也是父类的实例
  3. 可以向父类传递参数
  4. 函数可以复用

缺点：

  1. 调用了两次父类构造函数，生成了两份实例
  2. constructor指向问题
  1. 实例继承：为父类实例添加新特征，作为子类实例返回
//实例继承：为父类实例添加新特征，作为子类实例返回
    function Son(name){
        let f = new Father('传给父类的参数')
        f.name = name || 'son'
        return f
    }

    let s = new Son("son"); //或者直接调用子类构造函数  let s = Son("son"
    console.log(s.name);//son
    s.sayAge(); //18
    s.sayName();//son
    console.log(s.age)
    console.log(s instanceof Father) // true
    console.log(s instanceof Son)  //false
    console.log(s.constructor === Father) //true
    console.log(s.constructor === Son)   // false

优点：

  1. 支持多继承

缺点：

  1. 效率低，性能差，占用内存高（因为需要拷贝父类属性）
  2. 无法获取父类不可枚举的方法（不可枚举的方法，不能使用for-in访问到）
// 5.拷贝继承：对父类实例中的方法与属性拷贝给子类的原型
    function Son(name){
        let f = new Father("传给父类的参数");
        for(let k in f){
            Son.prototype[k] = f[k];
        }
        Son.prototype.name = name;
    }

    let s = new Son("son")
    console.log(s.name)
    s.sayAge(); //18
    s.sayName(); //son
    console.log(s instanceof Father); //false
    console.log(s instanceof Son); //true
    console.log(s.constructor === Father); //false
    console.log(s.constructor === Son); //true
  1. 寄生组合继承：通过寄生方式，砍掉父类的实例属性，避免了组合继承生成两份实例的缺点
function Son(name){
        Father.call(this);
        this.name = name || "son"
    }

    //方法一  自己动手创建一个中间类
    (function () {
        let NoneFun = function(){};
        NoneFun.prototype = Father.prototype;
        Son.prototype = new NoneFun();
        Son.prototype.constructor = Son;
    })()

    // 方法二  直接借用Object.create()方法
    Son.prototype = Object.create(Father.prototype);
    //修复构造函数指向
    Son.prototype.constructor = Son;

    let s = new Son("son");
    s.sayAge();  //18
    s.sayName();  //son
    console.log(s.age); //18
    console.log(s instanceof Father) //treu
    console.log(s instanceof Son) // true
    console.log(s.constructor === Father); //false
    console.log(s.constructor === Son) // true

优点：

  1. 比较完美（js实现继承首选方式）

缺点：

  1. 实现起来较为复杂（可通过Object.create简化）
  1. es6-- Class 继承：使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super
	class Son extends Father{
        constructor(name) {
            super (name);
            this.name = name || "son";
        }
    }

    let s = new Son("son");
    console.log(s.name);  //son
    s.sayAge(); //18
    s.sayName(); //son
    console.log(s.age);    //18
    console.log(s instanceof Father); //true
    console.log(s instanceof Son); //true
    console.log(s.constructor === Father); //false
    console.log(s.constructor === Son); //true

JS防抖与节流（性能优化）

防抖：动作停止后的时间超过设定的时间时执行一次函数。注意：这里的动作停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则函数一直不会执行。

function debance(fn,delay){
        let timer = null;
        return () => {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn()
            },delay)
        }  
    }

    window.addEventListener(
        "scroll",
        debance(() => {
            console.log(1111)
        },1000)
    )

防抖应用场景：

  1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源
  2. window 触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
    节流：一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
balabala—慧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js的防抖和节流
qq_42561003的博客
06-19 312
什么是防抖和节流？主要用于哪些场景？有什么好处？
总结的前端知识
肖肖肖丽珠的博客
12-15 2057
ie6能识别*，+，_ _只有IE6 *+只有IE7 ie7能识别*，+，*+ 火狐两个都不能识别但是识别！important IE6~IE10都认识"\9" <!--[if IE]--><!--[endif]--> *color:red; _color:red; color:red\9 color:!important; 1几个图片img在一起会出现边距。设置float:left;或者display:inline-block; 2设置了padding之后火狐的...
stopImmediatePropagation 事件
MichaelAn的博客
12-06 3012
复习：2019-1-25 event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行。该方法阻止事件在 DOM 树中向上冒泡。停止当前节点，和所有后续节点的事件处理程序的运行。 stopPropagation 会阻止事件向上层元素冒泡。如果同一个元素绑定了多个事件（addEventListener），那么不会阻止其他事件的执行。 stopImmedia...
150_STM32F407按键识别
小灰笔记
10-04 850
整个STMF407系列的学习汇总链接如下： https://github.com/GreyZhang/g_stmf407 这个例程是我看了别人做的例程代码之后消化吸收按照自己的思路写的，主要的区别在于我的开发基于FreeRTOS，而我看到的例程仅仅是简单的演示功能而已。 按键识别，一个主要的概念在我现在接触的汽车电子中是常用的的debance...
js实现防抖(debounce)与节流(throttle)
Shinebone的博客
04-23 331
防抖(debounce) 一句话概括：防抖是给定一个时间周期，如果触发事件的周期小于该事件(也就是触发过快)，则不会触发事件。 举个例子：我给定的时间周期是1s，如果我在触发第一次事件后1s内触发该事件，则重新开始计时，直到触发周期大于1s才会执行事件的方法。 function debounce(fn,timeout){ let timer = null return funct...
JS节流和防抖函数
qq_55734170的博客
05-17 236
一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。 1、为什么需要函数防抖？ 前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的）
1087_Software-Architecture_Libraries小结
小灰笔记
01-25 428
Software-Architecture_Libraries小结 Grey 全部学习汇总： https://github.com/GreyZhang/hack_autosar Software-Architecture_Libraries小结 摘录与批注 本来想逐个库的文档详细看一下，后来看完了一个CRC和一个位操作，也正好是我熟悉的两个。其他的继续看的时候感觉意义不是很大，尤其是面向基础软件开发的技能增不上这几个库能够给出的帮助并不是很大。这样，接下来看看每一个库中都有什么功能，后续我自己ha
前端知识总结
qq_38906008的博客
03-26 815
父向子传值：v - bind属性绑定；子向父传值：v - on事件绑定；兄弟组件之间共享数据：EventBus。1 ，$on 接收数据的那个组件；2 ，$emit发送数据的那个组件vuex是状态管理器，是根据前端框架来的，前端框架是mvvm分模块，异步操作流程是在创建组件生命周期中执行： ajax—>actions—>data—>mutations—>state1，Array.prototype.slice.call(lis)：根据伪数组生成对应的真数组2，node.nodeType：得到节点类型。
前端总结，大总结，欢迎下载啊
03-07
前端总结，资源很少的！
前端发展总结
12-18
- **总结**：从早期简单的HTML+CSS+JavaScript组合到现在高度集成化的前端技术栈，前端开发经历了巨大的变革。每一次技术革新都带来了用户体验的提升和开发效率的进步。 - **展望**：未来前端技术将继续朝着更加精细...
verilog按键消抖经典
08-16
verilog按键消抖经典程序，采用的边缘检测消抖，边缘检测按键。。
前端优化总结
03-23
前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。前言前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对...
web 前端年总结ppt模板
01-21
"Web 前端年总结 PPT 模板" 本资源为 Web 前端年总结 PPT 模板，主要面向技术研发部，讨论 2021 年度工作总结的主要内容。下面是对该模板中所涉及的知识点的详细解释： 技术研发部汇报人 在 PPT 模板中，技术研发...
javascript从入门到跑路-----小文的js学习笔记（24）------错误调试与处理-----try ...catch 和 设置断点
qq_45948983的博客
09-02 3045
** javascript从入门到跑路-----小文的js学习笔记（1）---------script、alert、document。write() 和 console.log 标签 javascript从入门到跑路-----小文的js学习笔记（2）--------- 语法构成、关键字和保留字、变量 javascript从入门到跑路-----小文的js学习笔记（3）---------javascript中的几种数据类型 … … javascript从入门到跑路-----小文的js学习笔记目录 ** &nb
防抖函数 节流函数
weixin_34195142的博客
05-30 383
节流函数 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 function throttle(fun, delay){ let pre = Date.now() return function() { let now = Date.now() let arg = arguments if (now - pre > ...
【Vue前端】使用 videojs 做 hls 直播流遇到的问题及解决方案总结（销毁、反复加载视频流、http-flv 低延时优化解决方向）
热门推荐
一个努力学习的程序猿
09-09 2万+
该博文主要用于自我总结。文中内容就是在 Vue 项目中，使用 videojs 实现 hls 直播流的播放。由于文中参考了很多文章，所以重合的部分就不在这里展现，如有需要即可前往原文章查阅。而本文主要是用于记录在这过程中遇到的问题及其解决方案......
Js的debounce 方法使用
wgf1997的博客
12-26 1905
应用场景 由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 简单用法 /** 2 * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 idle，action 才会执行 3 * @param fn {Function} 相关执行函数 4 * @param delay {Number} 延迟时间，也就是阈值，单位是毫秒 5 * @re...
Vue 之 视频流 - Hls.js
玄鱼殇
04-07 1万+
vue使用hls.js拉流播放m3u8格式
常见面试问题(Python)
最新发布
jiao_mrswang的博客
08-23 158
5、GIL全局解释锁。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值