前端充电

最新推荐文章于 2025-03-08 11:03:27 发布

fang·up·ad

最新推荐文章于 2025-03-08 11:03:27 发布

阅读量248

点赞数

分类专栏： CSS JavaScript 文章标签：前端学习路径

本文链接：https://blog.csdn.net/qq_22310551/article/details/115697576

版权

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

0.线上前端学习资源

（1） Front-End-Basics 前端总结 http://www.chenfangxu.com/

（）廖雪峰 JavaScript教程、Git教程 https://www.liaoxuefeng.com/wiki/1022910821149312

（2）阮一峰

HTML 教程 https://wangdoc.com/html/
JavaScript 教程 https://wangdoc.com/javascript/
ECMAScript 6 入门 https://es6.ruanyifeng.com/ ；

1.display:none 、visible:hidden、Html5新增的hidden属性区别

hidden 是个布尔属性，表示相关元素当前不需要关注，浏览器对它的处理方式是隐藏相关元素（隐隐想起来控制一个元素的展示隐藏的时候，会自定义一个 hidden 类，然后在里面写隐藏样式），具体也可以看一下这篇介绍 HTML5 的 hidden 属性

hidden属性的表现类似css的display:none，用了这个属性后，元素会被隐藏，块级元素也会折叠起来不再占位，和visible:hidden不一样。

visibility: hidden和display: none 在作用、对HTML元素的影响、定义上有所不同:

(1)作用不同

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

(2)使用后HTML元素有所不同

visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

(3)定义不同

visibility 属性指定一个元素是否是可见的。

display这个属性用于定义建立布局时元素生成的显示框类型。

2.隐式类型转换

https://www.cnblogs.com/iwzyuan/p/8695568.html 隐式类型转换规则

https://segmentfault.com/a/1190000014983263 隐式转换原理

3.CSS布局

CSS布局
CSS布局说——可能是最全的 https://segmentfault.com/a/1190000011358507
css 布局的几种方式布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。 https://www.cnblogs.com/Renyi-Fan/p/12173366.html
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例 https://blog.csdn.net/wangchengiii/article/details/77926868?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
CSS position定位详解 http://www.ruanyifeng.com/blog/2019/11/css-position.html
Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ；CSS Grid 网格布局教程 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
高度塌陷问题解决 https://segmentfault.com/a/1190000022126367

4.浏览器引擎

1. js中v8引擎的详解－看的吐血 https://blog.csdn.net/qq_30638831/article/details/90552912

5.JavaScript Eventloop执行机制

深入理解JavaScript Eventloop https://mp.weixin.qq.com/s/-h83QH4zeu1MjyQRthKQmQ
这一次，彻底弄懂 JavaScript 执行机制 https://segmentfault.com/a/1190000018227028
async/await和promise的(eventloop)任务队列执行顺序？ https://blog.csdn.net/qq_43531694/article/details/107855646

如果在浏览器的环境下，宏任务主要分为下面这几个大类：

渲染事件（比如解析 DOM、计算布局、绘制）；
用户交互事件（比如鼠标点击、滚动页面、放大缩小等）；
setTimeout、setInterval 等；
网络请求完成、文件读写完成事件

那么微任务是怎么产生的呢？在现代浏览器里面，产生微任务有两种方式。

使用 MutationObserver 监控某个 DOM 节点，或者为这个节点添加、删除部分子节点，当 DOM 节点发生变化时，就会产生 DOM 变化记录的微任务。
使用 Promise，当调用 Promise.resolve() 或者 Promise.reject() 的时候，也会产生微任务。

注意

通常情况下，在当前宏任务中的 JavaScript 快执行完成时，也就是在 JavaScript 引擎准备退出全局执行上下文并清空调用栈的时候，JavaScript 引擎会检查全局执行上下文中的微任务队列，然后按照顺序执行队列中的微任务。如果在执行微任务的过程中，产生了新的微任务，一样会将该微任务添加到微任务队列中，V8 引擎一直循环执行微任务队列中的任务，直到队列清空才算执行结束。也就是说在执行微任务过程中产生的新的微任务并不会推迟到下一个循环中执行，而是在当前的循环中继续执行，这点是需要注意的。
如下代码：
await会从右向左执行即 await async2() 会先执行async2() 函数等函数返回以后，再去执行await阻塞后面代码。
遇到await会阻塞后面代码执行，后面代码放入微任务队列中，await后面的代码类似于promise.then()的回调。

async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}
async function async2() {
    // console.log( 'async2' )
    return new Promise(resolve=>{
      resolve()
    }).then(value=>{
      console.log('微任务');
    })
}
async1()
console.log( 'script start' )

打印结果： async start1   script start   微任务   async1 end

6.负margin

负margin--普通文档流 https://www.cnblogs.com/andyZhang0511/articles/11157933.html

负margin对浮动元素的影响：可以使浮动元素改变行（也就是位置），覆盖普通文档流的元素或者其他浮动元素。如果覆盖的是padding或者margin等空白处，就实现了不会影响其他内容的布局。

7.事件捕获、事件冒泡以及事件冒泡的应用事件委托（也叫事件代理）

彻底搞懂JS事件冒泡与捕获 https://segmentfault.com/a/1190000019724771
事件捕获和冒泡以及事件委托的原理和区别 https://segmentfault.com/a/1190000013314392
onclick和addEventListener的区别 https://segmentfault.com/a/1190000039368505
自结
设置了具体事件的元素暂且称为目标节点，目标节点的父、祖父等元素、body、html、document等称为祖先节点。
目标节点设置了事件后，只要其祖先节点也设置了同样的事件，那么祖先也会在捕获和冒泡阶段触发对应事件；不设置的话，就不会触发。
冒泡阶段的一个应用是事件委托，可以实现所有的子元素点击时触发父元素注册的同一个click事件。
下图是捕获、冒泡的示例图。事件触发过程分为三个阶段，捕获阶段、目标触发阶段、冒泡阶段。三个阶段可以同时存在；onclick注册的事件和事件委托是在冒泡阶段触发；addEventListener注册事件可以通过第三个参数指定注册的事件在哪个阶段触发。

8.JavaScript实现继承

实现继承的方式 https://segmentfault.com/a/1190000016184431
廖雪峰空函数继承实际上就是上面文档中的寄生组合式继承 https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072
call bind apply方法的区别 Function.prototype.call()
自结：继承的目的
子构造函数获得父构造函数的方法和属性
可以通过父构造函数的对象设置子构造函数创建实例的共有方法

9.JavaScript常用设计模式

首先我们要理解一下什么是设计模式？什么是设计原则？

　　设计模式:

　　　　通常在我们解决问题的时候，很多时候不是只有一种方式，我们通常有多种方式来解决；但是肯定会有一种通用且高效的解决方案，这种解决方案在软件开发中我们称它为设计模式；

　　　　设计模式并不是一种固定的公式，而是一种思想，是一种解决问题的思路；恰当的使用设计模式，可以实现代码的复用和提高可维护性；

　　设计原则：

　　　　通常在做很多事情的时候，都会有一定的规范制约；在软件开发的过程中，我们可以将设计原则视为一种开发规范，但不是必须要遵循的，只是不遵循的话，代码后期的维护和复用都会变得很糟糕；

　　　　遵循设计原则可以帮助我们写出高内聚、低耦合的代码，当然代码的复用性、健壮性、可维护性也会更好；

　　有哪些设计模式：

　　　　在程序设计中我们通常认为是有23种设计模式，根据分类分别为：

创建型：

抽象工厂模式　　
工厂方法模式
建造者模式
原型模式
单例模式（又称单体模式）

结构型：

适配器模式
桥接模式
组合模式
装饰者模式
外观模式
享元模式
代理模式

行为型：

职责链模式
命令模式
解释器模式
迭代器模式
中介者模式
备忘录模式
观察者模式（又称发布/订阅模式）
状态模式
策略模式
访问者模式
模板方法模式　　

　　有哪些设计原则：

　　　　根据英文首单词我们又称为S.O.L.I.D.设计原则，一共有5种设计原则，根据分类分别为：

　　　　1、S（Single responsibility principle）——单一职责原则

　　　　一个程序或一个类或一个方法只做好一件事，如果功能过于复杂，我们就拆分开，每个方法保持独立，减少耦合度；

　　　　2、O（Open Closed Principle）——开放封闭原则

　　　　对扩展开放，对修改封闭；增加新需求的时候，我们需要做的是增加新代码，而非去修改源码；

　　　　例如：我们在使用vue框架的时候，有很多第三方插件我们可以去使用，在使用的时候我们通常都是直接在vue-cli中增加引入代码，而非去修改vue源码来达到支持某种功能的目的；

　　　　3、L（Liskov Substitution Principle, LSP）——李氏置换原则

　　　　子类能覆盖父类，父类能出现的地方子类就能出现；（在JS中没有类概念，使用较少）

　　　　4、I (Interface Segregation Principle)——接口独立原则

　　　　保持接口的单一独立，类似于单一原则，不过接口独立原则更注重接口；（在JS中没有接口概念）

　　　　5、D（Dependence Inversion Principle ,DIP）——依赖倒置原则

　　　　面向接口编程，依赖于抽象而不依赖于具体，使用方只关注接口而不需要关注具体的实现；（JS中没有接口概念）

　　　　作为前端开发人员来说，我们用的最多的设计原则是S（单一职责原则）.O（开放封闭原则），所以在程序设计的时候我们重点关注这两个即可

为什么使用工厂模式？

我们可以使用Object构造函数即{}这种方式来创建单个对象。但是，使用这个接口创建很多对象时，会产生大量重复的代码。为了解决这个问题，我们可以使用工厂模式。当需要根据不同参数产生不同实例，这些实例都有相同的行为，这时候我们可以使用工厂模式，简化实现的过程，同时也可以减少每种对象所需的代码量。工厂模式有利于消除对象间的耦合，提供更大的灵活性。

框架中常见的工厂模式？

jQuery中的$()其实就是一个工厂函数，它根据传入参数的不同创建元素或者去寻找上下文中的元素，创建成相应的jQuery对象。

同时，像Angular2、Node、Vue、React等等，很多开源框架中其实都用到了工厂模式，学会工厂模式，有助于你更好的理解和使用这些框架。

注：如果不需要另外一个类，或者不需要在运行期间判断实例化的对象属于哪个类，那就不需要使用工厂模式，大多数情况下使用new关键字和构造函数公开实例化对象，提高代码可读性。切勿滥用。

自结：工厂模式就是工厂类根据传入的不同参数返回不同对象的一种设计模式。使用继承实现，JavaScript使用prototype原型链实现。

JavaScript中常用的设计模式 https://segmentfault.com/a/1190000017787537
JavaScript 三种工厂模式 https://www.cnblogs.com/jehorn/p/8024318.html 工厂模式的实例

10.JavaScript异步编程的实现方式

回调函数
Promise
Generator http://www.ruanyifeng.com/blog/2015/04/generator.html
async/await http://www.ruanyifeng.com/blog/2015/05/async.html

11.process.nextTick()和vue nexttick()何时执行

vue.nextTick()方法的使用详解（简单明了） https://blog.csdn.net/zhouzuoluo/article/details/84752280

process.nextTick() 教程 https://www.dengtar.com/21324.html

自结：

process.nextTick()的回调函数会放入next tick queue中，在执行栈当中的本次方法执行完后，立即执行next tick queue中方法，执行完后，采取执行micro queu微任务队列中方法。

vue.nextTick()方法等dom更新后，立即执行。可用在created钩子函数中，等dom渲染完毕执行；也可用在获取刚赋值的dom，获取最新数据。

12.webpack

Webpack 是什么
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理源代码时，它会递归地构建一个依赖关系图(dependency graph)，其中包含源代码需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

为什么需要打包？

像sass，JSX等代码虽然极大的提高了开发效率，但是本身并不被浏览器所识别，需要我们对其进行编译和打包，变成浏览器识别的代码
模块化(让我们可以把复杂的代码细化为小的文件)
优化加载速度(压缩和合并代码来提高加载速度，压缩可以减少文件体积，代码合并可以减少http请求)
使用新的开发模式

webpack主要特性如下：

同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS）；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；
支持对CSS，图片等资源进行打包，从而无需借助Grunt或Gulp(browserify只能打包JS文件)；
开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求；
对source map有很好的支持。

Source map(使调试更容易)
Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，这将给开发者带来了很大方便。

Webpack 入门教程 https://www.runoob.com/w3cnote/webpack-tutorial.html
中文网站 https://www.webpackjs.com/concepts/
根据官网示例操作 https://www.webpackjs.com/guides/getting-started/