huohuoit-优快云博客

原创（七）不只是 huohuo 的 Vue 面试题

终于来到了框架部分，我们所熟悉的前端框架的底层都是 JS，所以我们更应该关注的是框架的思想原理及源码设计。基本的使用部分，推荐详看官方文档。因为时间和精力优先，这里暂时只给出文章整体脉络，后续慢慢补充完整。如何理解前端渲染把数据填充到HTML标签中：模板 + 数据→前端渲染→静态HTML内容more如何理解响应式 ① html5中的响应式：屏幕尺寸的变化导致样式的变化 ② 数据的响应式：数据的变化导致页面内容的变化什么是双向数据绑定当数据发生变化的时候，视图...

2021-08-10 15:18:22 296 3

原创（六）不只是 huohuo 的 JS 面试题-续

JS 的内容实在太多太多了，上一篇也写了挺久了，两万多字对于一篇博客来说有些太长了，所以开了这篇续篇。但是目前主要精力不会着手于这篇文章，因为实在太忙了，最近还有一些面试需要准备，框架和算法都还没好好复习到。所以这篇暂时先列出一些主题内容，过段时间再来好好整理啦！ ...

2021-08-08 16:25:35 249

原创（五）不只是 huohuo 的 JS 面试题

写过最多的是 JS 相关的文章，做过最完整的是 JS 的思维导图，敲过最多的依然是 JS 代码，我觉得自己的 JS 还算可以了。写到这里的时候，我已经离职一周，参加了几次面试，大多数问题都能按自己的理解回答上来，同时，也让我意识到，那只是我以为的可以，只是没有遇到真正厉害的面试官罢了 ~写 JS 面试题之前，我纠结了好多次，我已经看过很多优秀的相关文章了，也写过很多各种各样的笔记了，还有没有必要再重复写。面完几次之后，有过正确解答，也有一知半解。有些问题让我意识到，这不是一次重复，而是一次重新认识，..

2021-07-26 15:46:02 739

原创（四）不只是 huohuo 的 CSS 面试题

终于到了 CSS 篇了，好像可以放松一些了，可能相比于前面两篇，你会觉得 CSS 要简单很多吧。不会吧不会吧，不会真有人觉得 CSS 简单吧？不知道你是否认同， CSS 是所有编程语言里最好玩的一门语言。但是我想你必须认同张鑫旭老师的神作《CSS世界》，从中你势必跟我一样会发现 CSS 是有多么的奇妙啊！由于个人职业规划上时间原因，我并未好好的读完这本神作，但是在这篇文章里，我一定会在读完后写下自己所有的理解，请保持期待哦！所以，关于这一篇，目前的结构是以核心面试题问答的形式展开 ~.

2021-07-13 14:21:43 374

原创（三）不只是 huohuo 的 HTTP/TCP 面试题

在上一篇，我们讲了很多关于浏览器的问题，其中谈到了很多次 HTTP 、TCP 。那么，这一篇，我们就主要来讲讲关于 HTTP 的问题吧 ~

2021-07-04 20:45:15 341

原创（二）不只是 huohuo 的浏览器面试题

按照网上习惯性的文章撰写路线，第二篇应该是 CSS，也确实，各种各样的标签，也是由CSS在背后默默地做属性支持。但是对于 HTML 的很多问题，跟浏览器的关系太大了，让我不禁想去好好看看 HTML 跟浏览器之间的那些事。另外，可能一提到前端，绝大多数人都会脱口而出“JavaScript”，不过我觉得 CSS 才是前端技术里最精彩绝伦的技术，所以后面我会对 CSS 做一个特殊处理，先让我先把浏览器相关面试题做一份梳理吧。...

2021-06-23 16:11:44 648

原创（一）不只是 huohuo 的 HTML 面试题

这里我应该是有一些话想说的，可能一刹那的特殊情感未到，没想好到底要说哪些话，先占个坑~~~HTML部分并不是前端面试中的重点，在组件化流行的开发背景下，其中丰富的标签也似乎难以出现在我们手底敲打的代码中。似渐行渐远，也似自己还未触及到哪个壁垒，这里还是想在自己回顾的同时好好探究一番遇到的相关问题。同时，也是为了知识体系的完整性，就先从此篇开始。好吧，其实也因为我有点整洁完整强迫症哈哈哈~~~VScode 永远的神！也许我们习惯了脚手架，习惯了 template，但我们仍然不能忘了HTM..

2021-06-22 21:12:26 208 2

原创 JS-leetcode刷题-链表篇

二、链表篇leetcode-21--合并两个有序链表Question：将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。(l1和l2均按非递减顺序排列)示例：输入：l1 = [1,2,4], l2 = [1,3,4]输出：[1,1,2,3,5,4]Method 1：递归思路：已知两个升序的链表递归建模：l1[0]+merge(l1[1:],l2)，l1[0]<l2[0] l2[0]+merg...

2021-04-28 22:58:13 508

原创 Vue 之虚拟 DOM 及 Diff 算法详解

Virtual DOM1、背景信息总结DOM 操作非常耗时耗性能（且现代前端框架要求不手动操作 DOM，可以大大提高开发效率）---- 因为会引起页面的回流或重绘 JS 的执行很快（浏览器V8引擎的出现更加加快了JS的计算速度）实现更好的跨平台（如浏览器端渲染、 Node.js 实现 SSR 服务端渲染、安卓/IOS、小程序等）推出 ==>Virtual DOM（虚拟DOM）将真实 DOM 抽象成一个以 JS 对象为节点的虚拟 DOM 树，DOM 的变化过程中不需要操作真实D.

2021-04-08 19:44:02 630

原创 JS-leetcode刷题-数组篇

Waiting to add...一、数组篇leetcode-88--合并两个有序数组Question：给你两个有序整数数组nums1（m个元素）和nums2（n个元素），请你将nums2合并到nums1中，使num1成为一个有序数组。（假设nums1的空间大小等于m + n）示例：输入：nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3输出：[1,2,2,3,5,6]Method1:直接合...

2021-03-31 17:51:00 1079

原创最最最到胃的发布NPM包讲解（以Vue组件库为例）

第一问题抛出：项目中对于模块的导出（export 和 export deafult）和引入（import { } from 和 import from）出现的一些异同，如何正确认识和使用它们？一、export 和 export deafult前面的文章有过总结，再来回顾一下：...

2021-03-16 21:14:13 439 2

原创 2021前端精选文章总结

半年没有怎么在优快云写新文章了，有很多话想讲在开头，但是想先放一放，我已经迫不及待想随着自己的面试复习计划更新自己认真看过的精彩文章了！！！接下来我会常常更新这篇博客记录的文章，作为自己深入复习和制作思维导图基础记录。加油吧，小伙子！（打基础都可以看看，但是我更推荐想深入理解的小伙伴看，此行的目的主要还是偏向理解原理啊。可能目前有点乱，但请谅解，没有太多时间来美化，我真的迫不及待把设定好的复习框架搞定了！让我开始吧！）这里我先记录一些暂未未整理优秀的博主和文章花神：https://juejin

2021-02-01 21:50:21 528

原创 less 相关的总结

一、简述 less 的作用是一门CSS预处理，扩充了CSS，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，Less 也可以运行在 Node 或浏览器端。

2020-09-24 16:28:06 221

原创 Echarts学习笔记

一、基本概念1、echarts 实例每个 echarts 实例独占一个 DOM 节点（作为 echarts 的渲染容器）。2、系列（series）系列（series）：一组数值以及他们映射成的图。一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。系列类型（图表类型）（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、..

2020-09-23 20:43:51 160

原创开发问题随笔

1、不允许子组件直接改变父组件的数据，但是往往项目需求需要改变父组件的数据，那我们如何变通呢？如果不想影响父组件的值，我们也可以用JSON颠倒转换的方式，在mounted方法中进行深拷贝，在data中初始化数据时用另一个变量作为承载，这样才承载变量改变，就不会影响父组件该变量的值了。...

2020-09-22 20:39:09 129

原创项目问题----页面滚动条问题

这是我在制作一个内容超出页面可视区的设置界面时，滚动条处遇到的一个问题。经导师指导后分析拓展总结了如下几个问题先来看看我的问题：在最右边滚动条滚动的时候，不希望滚动条滚动到页面主体内容上边（十分影响美观），也就是头部设置这个div部分1、页面布局问题首先我的理解是，页面出现滚动条是与页面的内容高度是有关的，滚动条应该在页面主体内容内出现，而不是在头部类似导航栏这种位置出现。应该注意到：滚动条的滚动长度 = 页面内容的 height: 100%。犯错：我在做初始页面布局的时候，给头部设置这

2020-08-24 20:34:30 788

原创 canvas初识笔记

一、基本用法1、<canvas>元素（1）元素类比：<img> ，唯一的不同就是它并没有 src 和 alt 属性（2）只有两个属性：width height (初始默认 300px * 150px)（3）注意：如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。（4）其他：给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。当开始时没有为canvas规..

2020-08-24 19:28:02 137

原创 Vue电商项目中遇到的一些问题

1、为什么vue组件有的写成export default，有什么用？声明一个vue，相当于 new Vue({}) 达到可复用的目的，也就是说，export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。2、export和 exportdefault的区别export可以导出多个命名模块，引入时（都用import）用大括号括起来 exportdefault只能导出一个默认模块，这个模块可匿名，引入的时候可以给这个模块取任意名字，且...

2020-07-29 22:09:57 1343 2

原创 JS算法--递归算法

循环（loop），指的是在满足条件的情况下，重复执行同一段代码。比如，while语句。 [循环则技能对应集合，列表，数组等，也能对执行代码进行操作。]　　　　　　　　　　　　　　　　　　　　　　迭代（iterate），指的是按照某种顺序逐个访问列表中的每一项。比如，for语句。 [迭代只能对应集合，列表，数组等。不能对执行代码进行迭代。]　　　　　　　　　　　　　　　　遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。 [...

2020-07-26 13:58:33 1492

原创 Javascript数据结构与算法--读后总结（2）数组

1、访问元素要访问数组里特定位置的元素，可以用中括号传递数值位置，得到想知道的值或者赋新的值。假如我们想输出数组arr里的所有元素，可以通过循环遍历数组，打印元素，如下所示： for (var i = 0; i < arr.length; i++) { console.log(arr[i]); }例子：求斐波那契数列的前20个数字。已知斐波那契数列中第一个数字是1，第二个是2，从第三项开始，每一项都等于前两项之和：斐波那契数列为：1...

2020-07-26 01:07:48 253

原创 Javascript数据结构与算法--读后总结（1）ES6

一、ES6部分1、函数的参数默认值 function sum(x = 1, y = 2, z = 3) { return x + y + z }; console.log(sum(4, 5)); //输出12由于我们没有传入参数z，它的值默认为3。因此，4 + 5 + 3 ==12。在ES6之前，上面的函数我们只能写成这样： function sum(x, y, z) { if (x === undefined)

2020-07-25 23:19:13 167

原创 JS-数组去重的13种方法

一、数组去重首先全局定义一个数组，我们来对各个方法对比一下var arr1 = [11, 11, 1, 1, 2, 2, 'huo', 'huo'];1、双重for循环+新数组思想：建立一个新数组，并放入原数组的第一个元素。将原数组元素依次与新数组元素比较，元素不同就放入新数组。最后返回新数组，达到去重效果。 function darray2(arr) { let newArr = [arr[0]]; for (let i = 0; i <

2020-07-24 16:23:04 277

原创前端面试----深信服面试题全概

这里结合了优快云多位博主的深信服面试题，为了锻炼自己的答题能力和技术点理解，这里对博主的各个题目进行了自己的解答（最好用自己的理解自己的话解答），同时部分解答借鉴了博主的回答。记在word笔记的时候没有记录博主地址，但还是感谢分享，一起努力加油啊！一、HTML（1）常见的HTML块级元素和行内元素（2）HTML5的新标签有什么了解，详述一下表单的新标签（3）Image标签中alt和title有什么区别二、CSS（1）CSS盒子模型（IE盒子模型，标准盒子模型）（2）CSS元素居

2020-07-16 14:27:15 4591 5

原创 Vue经典面试题总结（2）进阶篇

1、描述组件渲染和更新过程渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法2、组件中的 data为什么是一个函数?同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，如果 data 是一个对象的话。那么所有组件都共享了同一个对象。为了保证组件的数据独立性要求每个组件必须通过 data 函数返回一个对象作为组件的状态。3、Vue中事件

2020-07-14 22:40:12 663

原创多角度看Vue中常见的性能优化

Vue中常见的性能优化？（1）编码优化不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher vue 在 v-for 时给每项元素绑定事件需要用事件代理 SPA 页面采用keep-alive缓存组件拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 ) v-if 当值为false时内部指令不会执行,具有阻断功能，很多情况下使用v-if替代v-show key 保证唯一性 ( 默认 vue 会采用就地复用策略 )...

2020-07-14 15:49:18 402

原创字节跳动前端面试总结（持续更新）

一、HTML二、CSS三、JS1、setTimeOut()和setInterval()的区别都是用来处理延时和定时任务的函数setTimeOut()只延迟执行一次，且是在指定的毫秒数之后再调用函数。setInterval()是一段时间执行一次，可以执行多次，是在每隔指定的毫秒数循环调用函数，直到clearInterval把它清除掉。2、原型链继承让子类的原型对象（prototype）指向父类的实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从..

2020-06-24 20:19:58 2492

原创 W3C标准规范总结

一、标准规范1、需要声明文档类型（DOCTYPE）2、需要定义语言编码3、JavaScript定义Js必须要用<script language="javascript" type="text/javascript">来开头定义，而不是原来的<script language=javascript>或干脆直接<script>，并且需要加个注释符，以保证不在不支持js的浏览器上直接显示出代码来。外部JS,和网页内JS不能写在一块。

2020-06-21 23:42:32 220

原创从0手写Promise（一步步深刻理解）

一、基础知识准备1、函数对象与实例对象函数对象：将函数作为对象使用时，简称为函数对象实例对象：new函数产生的对象，简称为对象function Fn(){ //Fn函数}const fn = new Fn() //Fn是构造函数 fn是实例对象（对象）console.log(Fn.prototype) //Fn是函数对象//记忆：Fn放在，括号左边是函数，点的左边是对象Fn.bind({}) //只有函数对象才有 call()、apply()、bi

2020-06-14 01:52:51 362

原创 V8垃圾回收机制的理解

一、为什么要有垃圾回收在C语言和C++语言中，我们如果想要开辟一块堆内存的话，需要先计算需要内存的大小，然后自己通过malloc函数去手动分配，在用完之后，还要时刻记得用free函数去清理释放，否则这块内存就会被永久占用，造成内存泄露。但是我们在写JavaScript的时候，却没有这个过程，因为人家已经替我们封装好了，V8引擎会根据你当前定义对象的大小去自动申请分配内存。不需要手动管理内存，所以自然要有垃圾回收，只分配不回收，内存容易被占满。垃圾回收优点：不需要我们去管理内存，把更多的精

2020-06-13 01:29:20 242

原创 ES6-promise（阮一峰ES6读后总结）

一、Promise的含义Promise是异步编程的一种解决方案，语法上来说是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理，使得控制异步操作更加容易。Promise对象的两个特点：1、对象的状态不受外界影响Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态2、.

2020-06-12 18:34:31 1399 2

原创 JS-五种数组扁平化方法总结

对于[1, [1,2], [1,2,3]]这样多层嵌套的数组，我们如何将其扁平化为[1, 1, 2, 1, 2, 3]这样的一维数组呢：1、ES6的flat()const arr = [1, [1,2], [1,2,3]]arr.flat(Infinity) // [1, 1, 2, 1, 2, 3]2、序列化后正则const arr = [1, [1,2], [1,2,3]]const str = `[${JSON.stringify(arr).replace(/(\[|\.

2020-06-12 14:12:55 1250

原创 JS-详细的防抖和节流

1、防抖和节流防抖节流概念短时间频繁触发同一事件，只会执行一次函数函数每隔一段时间只会执行一次实现原理设置一个计时器，约定在XX毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到XX毫秒内无第二次操作设置一个计时器，约定XX毫秒后执行事件，如果时间到了，就执行函数，并重置计时器应用场景搜索框/滚动条的监听事件处理等。如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费窗口调整，页面滚动，抢购疯狂..

2020-06-11 23:38:59 673

原创 JS-六种继承方式（ES5+ES6）

前五种为ES5继承实现，最后一种ES6一、原型链继承原理：让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承// 父类function Parent() { this.name = '火火'}// 父类的原型方法Parent.prototype.getName = function() { return this.name}// 子类function Child() {}

2020-06-11 23:19:35 1595

原创 JS-ES6-let和const、解构赋值、箭头函数、内置对象扩展

一、ES6简介ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。为什么使用 ES6 ?1.变量提升特性增加了程序运行时的不可预测性 2.语法过于松散，实现相同的功能，不同的人可能会写出不同的代码二、ES6新增语法1、letES6中新增的用于声明变量的关键字。（1）let声明的变量只在所处于的块级有效 if (true) { let a.

2020-06-10 20:14:50 447

原创 JS-正则表达式笔记二次总结

一、正则表达式概述1、什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。通常被用来检索、替换那些符合某个模式（规则）的文本。例如：（1）验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。（2）过滤掉页面内容中的一些敏感词(替换)（3）从字符串中获取我们想要的特定部分(提取)其他语言也会使用正则表达式，这里我主要是利用 JavaScr

2020-06-10 14:46:37 251

原创 JS-函数进阶笔记二次总结

一、函数的定义和调用 1、函数的定义方式（1）函数声明方式 function 关键字 (命名函数) （2）函数表达式 (匿名函数) （3）new Function() function fn(){}var fn = function(){}var fn = new Function('参数1','参数2'..., '函数体')var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); Functio

2020-06-10 13:49:12 318

原创原生JS制作轮播图（详细步骤分析）

PC端轮播图1、功能需求1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3. 图片播放的同时，下面小圆圈模块跟随一起变化。 4. 点击小圆圈，可以播放相应图片。 5. 鼠标不经过轮播图，轮播图也会自动播放图片。 6. 鼠标经过，轮播图模块，自动播放停止。2、案例分析第1，2步① 因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。 ② 此时需要添加 load.

2020-06-10 12:07:57 1641

原创 JS-数组、字符串、对象方法总结

一、数组方法迭代(遍历)方法：forEach()、map()、filter()、some()、every()； 1、forEach()array.forEach(function(currentValue, index, arr)) currentValue：数组当前项的值  index：数组当前项的索引  arr：数组对象本身2、filter()array.filter(function(currentValue, index, arr)) filter(

2020-06-09 23:47:41 250

原创 JS-构造函数和原型（constructor、proto、prototype）

一、构造函数和原型 1、概述在 ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式： 1. 对象字面量 2. new Object() 3. 自定义构造函数2、构造函数构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。（1）在 JS 中，使用构造函数时要注意以下两点.

2020-06-09 23:26:47 917

原创 JS-面向对象笔记二次总结

一、面向对象编程介绍1、面向过程编程 POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：将大象装进冰箱，面向过程做法。 1.打开冰箱门2.大象装进去3.关上冰箱门面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。2、面向对象编程 OOP (Object Oriented Programming) 面向对象是把事务分解成为

2020-06-09 23:00:03 297

空空如也

空空如也