- 博客(53)
- 收藏
- 关注
RSS订阅原创 《八股文——Vue 2.0 为什么不能监听数组的变化及解决方法》
Vue 2.0 无法检测到数组的某些变化，主要是因为 JavaScript 原生的限制和 Vue 的响应式实现机制。通过使用 Vue 提供的响应式方法（如 Vue.set、splice 等），可以解决这些问题，确保视图能够正确更新。在实际开发中，遵循最佳实践，避免直接修改数组，可以提高应用的稳定性和性能。
2025-02-21 22:48:55
726
原创 《八股文——跨页面通信》
前端跨页面通信是一个重要的技术领域，不同的方法适用于不同的场景。通过合理选择和使用这些方法，可以实现高效、安全的跨页面通信，提升用户体验。希望本文能够帮助你更好地理解和应用这些技术。
2025-02-21 22:36:35
917
原创 《八股文——Vue的data是一个函数》
Vue 中 data 是一个函数的设计，主要是为了避免组件实例之间的数据共享问题。通过每次调用 data 函数返回一个新的对象，Vue 确保每个组件实例都有独立的数据副本。这种设计不仅避免了意外的数据共享，还提高了性能和代码的可维护性。理解 data 为什么是一个函数，可以帮助我们更好地使用 Vue，避免常见的数据共享问题。希望本文能够帮助你更好地理解和使用 Vue 的 data。
2025-02-20 21:27:40
425
原创 《八股文——冒泡与捕获》
• ** 传播方向**：从目标元素向上传播，直到 window。• ** 默认启用**：浏览器会自动处理事件冒泡。• ** 使用场景**：适用于大多数场景，尤其是需要在多个层级上处理事件的情况。•阻止冒泡：使用 event.stopPropagation() 或 event.stopImmediatePropagation()。
2025-02-20 21:21:48
349
原创 《八股文——数组去重》
以上介绍的几种数组去重方法各有优缺点。选择合适的方法取决于具体场景和需求。对于简单数组去重，推荐使用 Set 方法；对于复杂对象数组去重，可以使用 findIndex 或 some 方法进行比较。
2025-02-19 20:56:54
393
原创 《八股文——箭头函数》
箭头函数在 JavaScript 中提供了一种更简洁的函数定义方式，并且在处理 this 问题和函数式编程方面具有独特的优势。然而，箭头函数也有一些限制，如不能用作构造函数、没有自己的 arguments 对象等。在实际开发中，根据具体需求选择合适的函数类型是非常重要的。希望本文能够帮助你更好地理解和使用箭头函数。
2025-02-19 20:53:23
592
原创 《八股文——跨域》
跨域，简单来说，就是浏览器的同源策略对不同域之间的资源访问进行了限制。同源策略（Same-origin policy）是浏览器的一种安全机制，它限制了来自不同域的文档或脚本之间的交互。所谓“同源”，指的是协议、域名和端口都相同。如果这三个条件中有任何一个不同，就会被视为不同域，从而触发跨域问题。跨域问题是前端开发中常见的问题，但通过上述方法可以有效地解决。在实际项目中，选择合适的跨域解决方案需要根据具体需求和环境来决定。优先使用 CORS：CORS 是现代浏览器推荐的跨域解决方案，适用于前后端分离的项目。
2025-02-18 17:03:01
695
原创 《八股文——promise的三种状态》
通过理解 Promise 的三种状态及其状态变化规则，可以更好地处理异步操作。确保正确处理所有可能的 Promise 状态，以避免未捕获的错误。使用.then().catch()和.finally()方法来控制 Promise 的流程。在复杂的应用程序中，可以考虑使用语法来简化 Promise 的使用。正确使用 Promise 可以使代码更易于阅读和维护，同时提高应用程序的可靠性。希望这篇文章对你有所帮助！
2025-02-18 15:28:02
519
原创 《八股文——数据劫持方法（defineproperties与proxy）》
JavaScript 数据劫持技术主要包括和Proxy。虽然是一种较为传统的方式，但Proxy提供了更为强大的功能，适用于更复杂的场景。结合监听器可以实现更高级的数据绑定和响应式更新。无论是前端框架（如 Vue.js）还是项目团队管理系统（如研发项目管理系统 PingCode 和通用项目协作软件 Worktile），数据劫持技术都发挥了重要作用，帮助开发者实现更高效的数据管理和用户体验。
2025-02-17 20:23:44
2066
原创 《八股文——算法题1》
通过这道算法题，我们不仅学会了如何用递归和动态规划来解决问题，还发现了其中蕴含的数学原理。递归方法虽然直观，但效率较低；动态规划方法通过存储中间结果，大大提高了效率。希望这篇文章能够帮助大家更好地理解递归和动态规划的思想，也希望大家在日常生活中能够发现更多有趣的数学问题。
2025-02-17 17:34:11
321
原创 《性能先锋——内存泄露》
在硬件级别上，计算机内存由大量触发器组成。每个触发器包含几个晶体管，能够存储一个位。单个触发器可以通过唯一标识符寻址，因此我们可以读取和覆盖它们。因此，从概念上讲，我们可以把我们的整个计算机内存看作是一个巨大的位数组，我们可以读和写。这么底层的概念，了解下就好，绝大多数数情况下，JavaScript 语言作为一门高级语言，无需我们使用二进制进直接进行读和写。在计算机科学中，内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。
2021-12-16 15:34:23
2136
原创 《性能先锋——缓存策略》
浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：HTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体)，如下图HTTP响应(Response)报文，报文格式为：状态行 – HTTP头(通用信息头，响应头，实体头) – 响应报文主体，如下图。
2021-12-16 15:31:04
224
原创 《八股文——DOM树》
DOM从网络传给渲染引擎的HTML文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是DOM。DOM提供了对HTML文档结构化的表述。在渲染引擎中，DOM有三个层面的作用从页面的视角来看，DOM是生成页面的基础数据结构。从JavaScript脚本视角来看，DOM提供给JavaScript脚本操作的接口，通过这套接口，JavaScript可以对DOM结构进行访问，从而改变文档的结构、样式和内容。从安全视角来看，DOM是一道安全防护线，一些不安全的内容在。
2021-12-16 15:24:55
2629
原创 第二篇《history和hash两种路由》
为什么要使用路由现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现，使用路由可以很好地解决这个问题。单页面应用利用了JavaScript动态变换网页内容，避免了页面重载；路由则提供了浏览器地址变化，网页内容也跟随变化，两者结合起来则为我们提供了体验良好的单页面web应用。前端路由实现方式路由需要实现三个功能：当浏览器地址变化时，切换页
2021-12-16 15:21:56
276
原创 第一篇《跨标签页通信》
引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。这就是我们所说的前端跨页面通信。你知道哪些跨页面通信的方式呢？如果不清楚，下面我就带大家来看看七种跨页面通信的方式。一、同源页面间的
2021-12-16 15:19:20
710
原创 第八篇《BFC》
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动
2021-12-10 09:15:50
321
原创 第七篇《css优先级》
什么是权重权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。如果两个选择器同时作用到一个元素上，权重高者生效。权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+
2021-12-10 09:10:54
671
原创 第六篇《CSS选择器》
简介选择器是 CSS 规则的一部分且位于 CSS 声明块前。选择器可以被分为以下类别：简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。伪元素（Pseudo-elemen
2021-12-10 09:07:06
307
原创 第五篇《盒子模型》
盒模型的认识基本概念：标准模型+IE模型。 包括margin,border,padding,content标准模型和IE模型的区别css如何设置获取这两种模型的宽和高js如何设置获取盒模型对应的宽和高根据盒模型解释边距重叠BFC（边距重叠解决方案，还有IFC）解决边距重叠一、基本概念：标准模型+IE模型**什么是盒模型：**盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：由于
2021-12-10 09:05:24
171
原创 第四篇《CSS3新特性》
1.前言css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得
2021-12-10 09:00:06
717
原创 第三篇《CSS性能优化》
提高性能的方法有哪些?合并css文件，如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢。减少css嵌套，最好不要嵌套三层以上。不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完全是浪费性能。建立公共样式类，把相同样式提取出来作为公共类使用。减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。拆分出公共css文件，对于比较大的项目可以
2021-12-10 08:56:12
229
原创 第二篇《CSS样式隔离》
CSS 发展我们在书写 css 的时候其实经历了以下几个阶段：手写源生 CSS使用预处理器 Sass/Less使用后处理器 PostCSS使用 css modules使用 css in js手写源生 CSS在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：行内样式，即直接在 html 中的 style 属性里编写 css 代码。内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。导入样式，即在内联样式中 通过 @im
2021-12-10 08:55:11
1209
原创 第一篇《层叠上下文》
零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克和罗斯，只能一人浮在木板上，此时，出现了冲突，结果大家都知道的。那对于CSS世界中的元素而言，所谓的“冲突”指什么呢，其
2021-12-10 08:51:55
443
原创 《 八股文——基础数据、引用数据》
原始类型：在栈中，因为占据空间是固定的，可以将他们存在较小的内存中-栈中，这样便于迅速查询变量的值引用类型：存在堆中，栈中存储的变量，只是用来查找堆中的引用地址。这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。
2021-12-09 20:42:20
145
原创 《八股文——描述下浏览器从输入网址到页面展现的整个过程》
对浏览器原理有过了解的一定不会陌生这篇神文《How Browsers Work》中文翻译：浏览器原理：新式网络浏览器幕后揭秘。另外还有一篇 《What really happens when you navigate to a URL》。大神写的东西很长很复杂，阅读成本虽然大，但能学到东西。所以，我也试着用自己的理解去写一写，算是做个巩固。里面有很多参考，如涉及版权，侵权删！表述有误，请指正！前端为什么要研究渲染原理？像素完美（Pixel Perfection）、分辨率无关（Resolution I.
2021-12-03 09:40:04
460
原创 《性能先锋——重排(reflow)和重绘(repaint)》
页面生成的过程：1.HTML 被 HTML 解析器解析成 DOM 树；2.CSS 被 CSS 解析器解析成 CSSOM 树；3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；4.生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；5.将布局绘制(paint)在屏幕上，显示出整个页面。第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。渲染：在页面的生命周期中，网页生成的时候，至少会渲染一次。在用
2021-12-03 09:30:50
1013
原创 《性能先锋——白屏》
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。一、概念白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的
2021-12-03 09:27:47
142
原创 《八股文——发布订阅》
发布订阅模式是一种强大的设计模式，能够简化代码中的通信逻辑。通过本文的介绍，希望你能够深入了解发布订阅模式的实现原理，并在实际开发中灵活运用。
2021-11-24 11:03:01
564
原创 《八股文——两个大数相加》
假如我们要进行 9007199254740991 + 1234567899999999999。JS 中整数的最大安全范围可以查到是：9007199254740991。我们不能拿精度损失的数字进行运行，因为运算结果一样是会损失精度的。但是 JS 在存放整数的时候是有一个。的，一旦数字超过这个范围便会。
2021-11-24 10:53:38
228
原创 《八股文——无限累加函数》
在 JavaScript 中，函数式编程为我们提供了许多有趣的玩法和实现思路。今天，我就来和大家分享一个实现无限累加的函数，并深入解析其工作原理。
2021-11-24 10:51:51
309
原创 《八股文——数组扁平化》
该实现利用递归和reduce方法，可以灵活控制数组的扁平化深度。通过将depth参数作为可选参数，默认值为 1，用户可以根据需要指定扁平化的层数。这种实现方式简洁高效，适用于处理各种嵌套结构的数组。
2021-11-24 10:46:20
187
原创 《八股文——链式调用》
通过实现一个支持链式调用的查询工具，我们可以在 JavaScript 中更高效地处理数据。这种模式不仅代码简洁，而且易于扩展。可以根据实际需求，添加更多功能，如分组、聚合等。
2021-11-24 10:43:44
180
原创 《八股文——洗牌算法》
通过实现一个简单的数组洗牌函数shuffle，我们了解了 Fisher-Yates 洗牌算法的原理和实现方法。这种算法不仅公平、高效，而且易于实现，适用于各种需要随机排序的场景。希望本文能够帮助你更好地理解和应用数组洗牌技术。
2021-11-24 10:41:39
417
原创 《八股文——千分位分隔符》
将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题，千位分隔符格式的规则是。示例：19,351,235.235767这里有几个常见的实现方法。
2021-11-22 14:47:29
584
原创 《八股文——什么是柯里化》
本文主要从 3W (what, how, why) 角度出发通俗易懂的解释一下 什么是函数柯里化，以及怎么用三行代码来实现 add(1)(2)(3) 这个很常见的面试题。函数柯里化（curry）是函数式编程里面的概念。curry的概念很简单：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。简单点来说就是：每次调用函数时，它只接受一部分参数，并返回一个函数，直到传递所有参数为止。举个🌰 将下面接受两个参数的函数改为接受一个参数的函数。add(1, 2);改成每次只接受一个参数的函数。
2021-11-22 14:46:06
325
原创 《八股文——构造函数》
通过实现，我们深入了解了new操作符的内部工作原理。new创建一个新对象。设置新对象的原型。执行构造函数。处理构造函数的返回值。在日常开发中，我们可以通过这种方式更好地理解 JavaScript 的对象构造机制，并在需要时进行一些自定义的扩展和优化。同时，这也为我们深入学习 JavaScript 的底层原理提供了很好的切入点。当然，只是一个简单的模拟实现，其性能和兼容性等方面无法与new操作符相比。在实际开发中，我们仍然应该优先使用new操作符来创建对象。
2021-11-22 14:43:53
444
原创 《八股文——generator原理》
一个简单的 Generator 函数示例yield 1;yield 2;yield 3;上述代码中定义了一个生成器函数，当调用生成器函数 example() 时，并非立即执行该函数，而是返回一个生成器对象。每当调用生成器对象的.next() 方法时，函数将运行到下一个 yield 表达式，返回表达式结果并暂停自身。当抵达生成器函数的末尾时，返回结果中 done 的值为 true，value 的值为 undefined。
2021-11-21 22:22:17
452
1
原创 第十五篇《promise原理》
这一次，彻底弄懂 Promise 原理Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。基本过程：初始化 Promise 状态（pending）立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理执行 then(…)
2021-11-21 22:21:59
132
原创 第十四篇《事件循环机制》
前言我们都知道，javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。单线程是必要的，也是javascript这门语言的基石，原因之一在其
2021-11-21 22:21:39
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人