- 博客(48)
- 收藏
- 关注
RSS订阅原创 $nextTick底层原理(详细) - vue篇
nextTick是 Vue 的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。
2024-03-05 17:08:08
972
原创 只会Vue的我，用两天学会了react，这个方法您也可以
从上面的方法示例我们可以得出一个结论：在其他框架（自己会的）中常用到的方法或者场景进行针对性的学习即可。这样的好处是你能快速的上手开发，然后在实际开发场景中遇到解决不了的问题再去查文档或者百度。这只是我的一点小小的发现，哈哈哈。。。如果对你有感触的话，可以尝试一下这个方法；我觉得还是很不错的。
2024-03-05 17:03:30
481
原创 前端面试题 ===＞ 【JavaScript - 高级】
作用域简单来说，就是变量的有效范围，在一定的空间里可以对数据进行读写操作，这个空间就是数据的作用域；全局作用域最外层函数定义的变量用于全局作用域，即对任何内部函数来说，都是可以访问的；局部作用域一般只在固定的的代码片段内部可以访问到，而对于函数外部都是无法访问的；块级作用域凡是代码块就可以划分变量的作用域，这种作用域的规则就叫块级作用域；块级作用域包含函数作用域；预解析JS代码的执行是由浏览器中的JS解析器来执行的，JS解析器执行代码的时候，分为两个过程：预解析过程、代码执行过程；
2024-03-05 16:58:40
946
原创 git 面试字节时，老师问：合并分支中 rebase 和 merge 的区别
git merge 会让2个分支的提交按照提交时间进行排序，并且会把最新的2个commit合并成一个commit。最后的分支树呈现非线性的结构git reabse 将dev的当前提交复制到master的最新提交之后，会形成一个线性的分支树作者：小孔不菜。
2023-12-06 16:35:04
293
原创 震惊前端阿里P8!竟然有这么全的前端面试手册！
我采访了超过20位资深大厂面试官后，一直在尽量精炼准确的整理一套切实可行的八股文，现在已经有329位粉丝通过这套题走入了理想的岗位，所以分享出来给大伙看看，有什么不足之处欢迎评论补充。在本文中，精心整理了350个面试问题，涵盖了数据结构、JS、css、es6、vue2、vue3、React、Node、小程序、HTTP、TS。7. 说说你对 TypeScript 中函数的理解？7. 说说对git pull 和 git fetch 的理解？5. 说说对 Node 中的 process 的理解？
2023-12-06 16:33:46
242
原创 前端算法面试之堆排序-每日一练
堆分为大根堆和小根堆，大根堆的每个结点的值都大于等于其子结点的值，即该结点是该子树中的最大值。小根堆的每个结点的值都小于等于其子结点的值，即该结点是该子树中的最小值。他们都是一种特殊的完全二叉树，物理存储结构一般是一个连续的线性数组。并且节点的下标和左右子节点的下标之间存在一定的关系。假设节点的下标为i，那么它的左子节点的下标为2i，右子节点的下标为2i + 1。相反地，如果一个节点的下标为j，那么它的父节点的下标为j/2（向下取整）。这篇文章分享了堆排序的概念讲解以及 JS 代码实现。
2023-11-14 15:41:04
324
原创 VuePress介绍及使用指南
官方文档地址：VuePress是一个由Vue.js提供支持的静态网站生成器。基于Markdown： VuePress以Markdown为中心，使得编写文档变得简单而直观。Vue驱动： VuePress使用Vue.js进行开发，允许用户在Markdown中嵌入Vue组件，从而提供更强大的定制和交互性。默认主题： VuePress提供了一个现代化、响应式的默认主题，适用于各种文档项目。插件系统： VuePress具有灵活的插件系统，允许用户通过插件来扩展和定制网站的功能。
2023-11-14 15:38:08
261
原创 浅谈JavaScript闭包，小白的JS学习之路！
闭包是JavaScript中强大而灵活的特性，能够提供变量私有化的能力。然而，要小心使用闭包，以防止潜在的内存泄漏问题。及时释放不再需要的引用是保持代码健康的重要步骤，合理利用闭包将为你的代码带来便利和安全性。如果有疑问或者错误，欢迎在评论区指出！原文链接：https://juejin.cn/post/7300779577059131402。
2023-11-14 11:42:49
67
原创 手写一个Webpack,带你了解构建流程
Webpack是一个强大的打包工具，拥有灵活、丰富的插件机制，网上关于如何使用Webpack及Webpack原理分析的技术文档层出不穷。最近自己也是发现面试官问到Webpack特别喜欢问构建流程，那么本文主要探讨，Webpack的一次构建流程中，主要干了哪些事儿，带领您手写一个打包工具。真是卷...本文主要讲的是基本的构建和输出打包，不包含treeshaking、热更新等其他功能的内容。初始化参数。获取用户在文件配置的参数开始编译。初始化Compiler对象，执行run方法开始编译。
2023-11-09 15:58:08
153
原创 【CocosCreator】利用遮罩Mask实现单边开门效果
接下来要通过代码来控制门的开关，给遮罩节点添加一个脚本组件，然后思考，想要开关门，我们需要知道门关闭的时候的位置以及门开启的时候的位置，因此我们需要定义两个面板属性openPos和closePos，因为是保存的是门的坐标，所以这俩属性的类型应该是二维向量Vce2类型，然后就是我们要知道门此时的状态是开启还是关闭，因为我们可能会需要根据门的状态不同而执行不同的逻辑，所以还需要一个面板属性isClose，该属性为true的时候表示门处于关闭状态。即我们需要在。
2023-11-09 15:04:37
235
原创 新一代前端工具链Rome：革新前端开发
Rome 还支持自定义插件和配置。你可以编写自己的插件，或者将现有的插件集成到你的项目中，以满足特定需求。custom: {options: {// 自定义选项},},},在这个示例中，我们启用了一个名为 "myPlugin" 的自定义插件，并提供了一些自定义选项。Rome 是一个前端工具链的新星，它为前端开发者提供了许多强大的功能，以提高开发效率和代码质量。虽然 Rome 还在不断发展和改进中，但它已经展现出了巨大的潜力。
2023-11-08 15:48:42
96
原创 Web Worker：JS多线程的伪解药?
在前端开发领域，JavaScript 的单线程限制一直是一个难以忽视的挑战。当谈到解决JavaScript的单线程限制时，HTML5引入的Web Worker被普遍认为是一剂解药💊。同时，业界中大量的文章也是聚焦于讨论web worker的神奇力量。然而，本文将另辟蹊径，和您一同探索Web Worker神秘的另一面。或许在您的项目中尚未使用过Web Worker，但实际上它已经存在了很长时间。早在2009年，W3C便提出了 Web Worker 草案，2011年正式称为HTML5标准的一部分。
2023-11-08 15:43:15
141
原创 前端面试系列之工程化篇
Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
2023-11-08 15:39:23
2136
原创 现一个智能的SQL编辑器
Monaco Editor 提供了方法，用来自定义 language/***/id: string;extensions?: string[];filenames?: string[];: string[];firstLine?: string;aliases?: string[];mimetypes?: string[];: Uri;第一步，我们需要注册一个 language， 配置项中 id 对应的就是语言名称（其他配置项可以暂时不填），这里自定义的 language 名为。
2023-11-07 15:06:26
2478
1
原创 Webpack中，你不知道的入口起点和出口文件配置
webpack 功能强大，现目前还是前端使用最多的 “静态模块打包工具”，当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。在上一篇文章中，介绍到了，知道了为什么要使用webpack打包，以及他的优缺点和他的进阶版工具Vite。想要使用好webpack，必须明白其等等，下面介绍核心配置。本文对webpack中的入口起点和出口文件。
2023-11-07 14:57:13
474
原创 我终于成功登上了JS 框架榜单，并且仅落后于 React 4 名！
如期而至，我独立开发的 JavaScript 框架 Strve.js 迎来了一个大版本5.6.2。此次版本距离上次大版本发布已经接近半年之多，为什么这么长时间没有发布新的大版本呢？主要是研究 Strve.js 如何支持单文件组件，使代码智能提示、代码格式化方面更加友好。之前也发布了Strve SFC，但是由于其语法规则的繁琐以及是在运行时编译的种种原因，我果断放弃了这个方案的继续研究。而这次的版本5.6.2。
2023-11-03 11:42:34
33
原创 在微信小程序里使用rpx，被坑了 ｜ 不同设备表现不同
虽然解法看起来如此简单，但是爬坑的过程真是无比艰难，各种猜测和假设，虽然一些得到了验证，但最终也是无法猜透小程序的心～～ 只能自己避坑和填坑，按需选择吧。原文链接：https://juejin.cn/post/7257516901843763257。
2023-11-02 16:52:02
1090
原创 什么,你还不会 vue 表格跨页多选?
未来想做的还有很多利用提升单页大量数据的渲染效率提供默认选中项的配置...欢迎彦祖们 贡献宝贵代码个人能力有限如有不对,欢迎指正🌟如有帮助,建议小心心大拇指三连🌟补给资料 管注公众号：码农补给站原文链接：https://juejin.cn/post/7264898713646153780。
2023-11-02 12:03:34
316
原创 对不起 localStorage，现在我爱上 localForage了
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象）。localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用。
2023-10-25 17:26:01
31
原创 前端HTTP缓存你真的了解吗？强缓存？协商缓存？启发式缓存？
本文首先介绍了和HTTP缓存息息相关的请求头和响应头，接下来引出了两种缓存方式，强缓存与协商缓存，并介绍了他们的运行流程以及关键首部字段，最后提出了很容易忽略的启发式缓存，希望本文能够对你有帮助。原文链接：https://juejin.cn/post/7264597522030329910。
2023-08-08 15:25:35
168
原创 支付宝技术专家极力推荐！深入理解node.js万字手册！
目前，在国内大多数人都将Node以实验性质的方式来使用，国外已经有知名的项目将Node应用在实际的生产环境中，如eBay的数据中间层、Linkedin移动应用的服务器端等。从严格的意义上而言，Node并非真正的单线程架构，在第3章中我们有叙述过Node自身还有一定的I/O线程存在，这些IO线程由底层libuv处理，这部分线程对于JavaScript开发者而言是透明的，只在C++扩展开发时才会关注到。这里值得提醒的是，JavaScript开发者需要转变观念，正视自己的代码，对自己产出的代码负责。
2023-08-02 14:52:11
66
原创 如何找到方向感走出前端职业的迷茫区
最近有几天没写技术文章了，因为最近我也遇到了前端职业的迷茫，于是我静下来，回想了下这几年来在工作上处理问题的方式，整理了下思路 ，写了这一片文章。关于对前端职业的迷茫，如何摆脱或者说衰减，我觉得最重要的是得找到一个自己愿意持续学习、有领域知识积累的细分方向。工作了3-5年的同学应该需要回答这样一个问题，自己的技术领域是什么？前端工程化、nodejs、数据可视化、互动、搭建、多媒体？如果确定了自己的技术领域，前端的迷茫感和方向感应该会衰弱很多。关于技术领域的学习可以参照 前端开发如何给自己定位？初级？中级。
2023-08-02 14:28:28
64
原创 10个前端必备的浏览器技能，让你的网页更优秀
在进行前端开发时，熟悉各个主流浏览器的介绍和市场占比是非常重要的。根据最新的数据，市场占比最高的浏览器分别是Google Chrome (63.9%)、Safari (19.8%)、Firefox (3%)、Edge (2.7%)和Opera (1.5%)。了解各个浏览器的市场占比可以帮助我们更好地为大众提供更好的浏览体验。WebAssembly是一种新的底层代码编译格式，可以在浏览器中进行高性能计算和运行。
2023-08-02 14:22:52
107
原创 如何构建一个 NodeJS 影院微服务并使用 Docker 部署
微服务是一个单独的自包含单元，与其他许多单元一起构成一个大型应用程序。通过将应用程序拆分为小单元，每个部分都可以独立部署和扩展，可以由不同的团队和不同的编程语言编写，并且可以单独进行测试。微服务架构意味着应用程序由许多较小的、独立的应用程序组成，这些应用程序能够在自己的内存空间中运行，并且可以在可能的多个独立计算机上独立扩展。应用程序启动更快，这使得开发人员更具生产力，并加快了部署速度。每个服务可以独立于其他服务部署 — 更容易频繁部署服务的新版本。更容易扩展开发，也可能具有性能优势。
2023-08-01 18:52:04
253
1
原创 Vue高频面试题百题详解!阿里p8闭关三月呕心力作！
在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常。源码里面关于代码生成的部分，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的。
2023-08-01 18:17:36
63
原创 从零开始学微信小程序！从理解到实战打造自己的商业帝国！
第1章初识微信小程序，首先介绍了微信小程序开发工具的下载、安装和使用，然后使用该开发工具创建了第一个微信小程序，并在电脑模拟器中进行查看，最后发布到手机微信中查看运行效果。第2章对微信小程序的架构进行分析,从小程序的目录结构、文件名的约定开始，详细介绍小程序的配置文件、页面描述文件、页面样式文件和逻辑层文件的相关知识。第2篇第3章介绍快速开发UI 界面，以一个加法计算器的实际案例介绍了小程序UI设计中常用组件的使用方法。
2023-08-01 17:53:48
48
原创 因为一个写法，我翻烂了vue源码，这是vue的问题吧，我要不要提pr！
我已经老了。。。。面对现在的观众不知该如何表达。既然这样的话那......事情就发在昨天，在我们单位的办公大厅里，有一个产品向我走来。他主动介绍自己，他对我说，“老骥： 你这个页面有问题，很大很大的问题，现在我是特地来告诉你，对我来说，还得辛苦你给我解决问题”我很慌乱.....因为此时我的正在吃早饭，嘴里还有个茶叶蛋我慌忙的咽了下去，提醒焦急的产品：我知道你很急，但.....请你不要着急！！我得一点一点的排查问题。
2023-07-27 16:08:52
136
原创 中高级前端必须掌握的package.json最新最全指南
package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。package.json对于大部分前端开发者来说，知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说，了解 package.json 的其他字段是非常有必要的。本文介绍的字段分为官方字段与非官方字段。
2023-07-27 16:02:44
78
原创 GitHub开源榜首！JavaScript突击宝典，闭关怒冲20k！
本书为你提供对日常所使用技术的新见解，并探索了不为人知的特性和功能，帮助读者从学徒成长为“忍者”。阅读完本书以后，你就可以开始编写更加出彩的JavaScript应用程序了，甚至也可以编写自己的代码库和框架。你不需要是该语言的高级用户——这是本书的目标，但你不应是一位新手。这可能是本书中最重要的部分，即使你只阅读了该部分，也会对JavaScript 语言有更深人的理解。再次强调，不需要了解特别高级的知识，但你应该知道拼凑Web 网页的基础知识。我们利用在第二部分中学到的基础知识解决浏览器留给我们的棘手问题。
2023-07-27 15:59:49
61
1
原创 深入浅出微前端（qiankun）
通过大量的正则 + replace，每一个步骤都做了很多适配，比如获取script脚本，需要区分该script是不是entry script，type是JavaScript还是module，是行内script还是外链script，是相对路径还是绝对路径，是否需要处理协议等等。命名约定是最简单的方式，适用于小型项目和简单的样式隔离。在使用 CSS-in-JS 的方案中，样式是通过 JavaScript 运行时动态生成的，每个组件都具有自己独特的样式，并且不会与其他组件的样式发生冲突。
2023-07-27 15:55:23
238
1
原创 在 Vue3 中实现飘逸的元素拖拽
分别定义用来记录元素初始位置的一组坐标（originalPosition）、元素被按下时指针在元素上的坐标（mousedownOffset）和元素在移动时实时更新的一组坐标（elementPosition）。typescript复制代码const originalPosition = reactive({x: 10,y: 10,})typescript复制代码const mousedownOffset = reactive({x: 0,y: 0,})
2023-07-27 15:54:48
982
1
原创 为啥面试官总喜欢问computed是咋实现的？
可以看到computed只会依赖state.a和state.b，而不会依赖state.c，这得益于我们前面几篇文章实现的响应式系统，所以到了计算属性这里，我们不用改动任何代码，天然就支持。还是上面的例子，如果state.a和state.b打死都不再改变值了，那么我们读取sum的时候，它将会返回上一次计算的结果，而不是重新计算。不过还是有点小问题，我们读取了两次sum.value，sum却被执行了两次，这和computed缓存的特性就不符了。的特性，为了更像computed一点，我们需要封装一个函数。
2023-07-25 16:14:30
170
原创 React 组件和 hook 如何写单元测试？
单元测试能保证函数、类的方法等代码单元的功能正常，把手动测试变成自动化测试。变更不频繁的代码，还是有必要写单测的，写一次，自动测试 n 次，收益很大。我们学了 react 组件和 hook 的单测写法。render：渲染组件，返回 container 容器 dom 和其他的查询 apifireEvent：触发某个元素的某个事件createEvent：创建某个事件waitFor：等待异步操作完成再断言，可以指定 timeoutact：包裹的代码会更接近浏览器里运行的方式，不用也行。
2023-07-25 16:13:38
121
原创 还没用熟 TypeScript 社区已经开始抛弃了
最新消息，非常确定了，就在昨天，北京时间 2022 年 5 月 9 日，Svelte 团队发布了一个名为 TS to JSDoc Conversion 的 PR，开始这项浩瀚的工程，同时宣布目前 Svelte 不再支持重大更新了，根据点不支持的人数，看到这件事情比较有争议，不支持的人不在少数。这种震惊劲爆的信息，当然的核实下是不是准确的，于是去 svelte 框架的作者 Rich Harris 的推特去求证下，好奇的不止我一个，已经有人提问了，并且作者给出了答案，我们为什么使用 TypeScript？
2023-07-21 12:25:39
77
原创 忘记 localStorage 吧，indexedDB 才是前端存储新宠！
在项目开发过程中，前端需要存储大量的数据。cookie, localstorage 都有存储长度限制。表格一览特性cookieindexedDB数据生命周期一般由服务器生成，可以设置过期时间；前端采用和js-cookie等组件也可以生成除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器页面关闭就清理刷新依然存在，不支持跨页面交互除非被清理，否则一直存在数据存储大小4K5M5M不限制大小与服务端通信每次都会携带在请求的header 中，对于请求性能有影响；
2023-07-21 12:24:54
93
原创 GitHub开源！Web性能测试天花板！零成本收割面试offer！
本书首先介绍基础的性能测试理论，接着详细介绍如何使用JMeter 来完成各种类型的性能测试，而最重要的是性能测试实战章节。首先是如何分析性能测试指标，接着是录制/创建性能测试脚本，并在特定测试场景下执行性能测试脚本;本章首先从性能测试的基本概念入手，简要介绍了性能测试的定义、目的、分类、关注指标和基本流程，接着介绍了Web性能测试的重要性，以及开源Web 性能测试的优势。如果决定采用开源性能测试工具来构建组织的性能测试体系，那么请系好“安全带”"，我们即将开始体验开源性能测试的奇妙旅程。
2023-07-21 12:23:38
58
原创 学会了这招，排查生产问题再也不头疼了
Chrome开发工具还有这么好用的功能，以前也看到过，泛泛而学。等真的遇到问题需要使用的时候，根本想不起来。所以我感觉，学习知识要带着应用场景去学，你怎么用，就怎么记忆，学习要学到可以应用的程度。否则可能会产生虚假的收获感和充实感，以为自己把时间都用在了该用的地方，当时也感觉学到了不少知识。然而实践是检验真理的唯一标准，等需要用的时候，如果联想不起来，学过就等于白学。实践不会陪你演戏。原文链接：https://juejin.cn/post/7255939146375299133。
2023-07-19 14:48:45
45
原创 中高级前端必须掌握的package.json最新最全指南
package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。package.json对于大部分前端开发者来说，知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说，了解 package.json 的其他字段是非常有必要的。本文介绍的字段分为官方字段与非官方字段。
2023-07-19 14:44:04
105
原创 对比 React，用10个例子快速上手 Svelte
本文从 10 个层面对比了 React 和 Svelte 框架，涵盖了其渲染模式和基本用法。相信看到这里你已经对 Svelte 有一个大致的了解了。这两个 UI 框架各有特点，它们之中哪个是你更加欣赏的呢？在评论区说说你的看法吧😎作者：wzkMaster链接：https://juejin.cn/post/7255720279933747255来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2023-07-17 14:14:49
138
原创 请你说说Vue实例挂载过程中发生了什么？
new Vue的时候调用会调用_init方法定义 set、set、set、get 、delete、delete、delete、watch 等方法定义 on、on、on、off、emit、emit、emit、off等事件定义 _update、forceUpdate、forceUpdate、forceUpdate、destroy生命周期调用$mount进行页面的挂载挂载的时候主要是通过方法定义更新函数执行render生成虚拟DOM_update将虚拟DOM生成真实DOM。
2023-07-17 14:12:45
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人