心潮的滴滴-CSDN博客

原创【Vue】重新理解Vue-Router中的两种路由模式

历史小剧场唐代实在太高太强了，他们忽忘了民族界限，他们不懂害怕外国人，不懂提防外国人，大量使用外国人当兵作将，结果才弄得不可收拾。于是唐代的府兵一变而成为“藩镇”，军阀割据，胡族临制。----《中国历代政治得失》location 和 history接口window.location说到location对象，它有很多的属性。我们可以通过改变其属性值修改页面的url。我们在单页应用中需要做到的是改变url不刷新页面，location接口提供以下两种方式可以做到:locaiton.href 赋值时

2024-07-20 17:36:44 730

原创【Web性能优化】在Vue项目中使用defer优化白屏，秒加载！

当浏览器遇到了带有async属性的script时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会暂停解析，会让JS引擎执行代码，执行完毕后再进行解析。相对而言，流芳千古的钱谦益先生，就有点儿区别了，除了家产外，也很能挣钱（怎么来的就别说了），经常出没红灯区，六十岁多了，还娶了柳如是，明朝亡时，说要跳河殉国，脚趾头都还没下去，就缩了回来，说水冷，不跳了，就投降了清朝。----《明朝那些事儿》很明显，执行JS脚本和渲染占据了大量时间。

2024-07-14 22:54:09 431

原创【DOM】实现一个课程表的拖拽功能

历史小剧场一个皇帝从不需要用个人的良好品格来证明自己的英明，恰恰相反，在历史上，干皇帝这行的人基本都不是什么好人，因为好人干不了皇帝，朱匀炆就是铁证。----《明朝那些事儿》1. 前置知识1.1 DataTransfer接口介绍一个属性：dataTransfer.effectAllowed: 提供所有可用的操作类型。必须是 none、copy、copyLink、copyMove、link、linkMove、move、all or uninitialized通过这个接口，我们可以控制拖拽元

2024-07-05 00:11:57 453

原创【JS场景题】判断一个元素是否在可视区域内有哪些方法？

getBoundingClientRect方法: DOM对象的一个方法，返回一个DOMRect对象。// 当滚动条滚动时，top、left、bottom、right时刻会发生改变。// 获取元素偏移的高度，就是距离可视窗口的偏移量。// 表示当子元素和父元素覆盖多少时触发回调函数。// 获取可视窗口的高度- 兼容写法。// 获取滚动条滚动的高度。

2024-07-04 16:13:54 437

原创【JS】复制粘粘需求？怎么实现？

在一些需求当中，比如一些报表。他会有指定的ID，为了实施人员方便制作报表及调试，我们会实现报表ID的复制功能。方便调试。

2024-07-02 22:49:11 248

原创【JS异步编程】async/await——用同步代码写异步

async: 声明一个异步函数自动将常规函数转换成Promise，返回值也是一个Promise对象；只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数；异步函数内部可以使用awaitawait: 暂停异步的功能执行放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果;只能与Promise一起使用，不适用回调；只能在async函数内部使用简单使用// let name = await "后盾人"

2024-06-30 17:07:37 912

原创【Promise】聊聊任务队列

在这个案例，首先会将 dict_approval_number_type 字典中的数据渲染到页面上，然后再将 dict_pub_code 字典中的数据渲染到页面上。我说过，所谓王朝，跟公司单位差不多，单位出了事，领导要负责任，降级、扣工资、辞退，当然，也包括自尽。现实是残酷的，而今这个世界，要活下去，必死需要更大的勇气。运行如上代码，会每隔1秒钟执行 task1和task2。但崇祯的死，并非懦弱，而是一种态度，负责人的态度。运行如上代码，会每隔1秒钟打印 1 2 3 4 5。运行上诉代码，我们可以看到。

2024-06-29 22:45:08 763

原创【移动端适配】JS动态计算font-size

历史是一个好客的主人，但却从不容许客人取代它的位置，历史也从来就不是一个人或是几个人可以支配创造的。所谓时势造英雄，实乃至理名言。----《明朝那些事儿》这个案例，我们可以让页面上的内容跟随着页面窗口宽度的变化而变化。

2024-06-22 00:49:23 174

原创【Vue3】插槽的使用及其分类

在日常的项目开发中，当我们在编写一个完整的组件时，不可避免的会引用一些外部组件或者自定义组件。而有些内容是在父组件中一样的，而在子组件中会对一些数据单独的处理。为了解决类似这样的问题，Vue设计出来了slot这个东西，也可以称为Vue的内容分发机制，它的主要作用就是向子组件的指定位置插入一断内容，这个内容可以是HTML或者其他组件。作用域插槽：数据在子组件那边，但根据数据生成的结构，却由父组件决定。后来我才明白，造反的宋江，和招安的宋江，始终是同一个人。造反，就是为了招安。----《明朝那些事儿》

2024-06-16 23:24:14 319 1

原创【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）

父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。

2024-06-15 14:41:39 1015 2

原创【Vue3】使用mitt实现任意组件通信

最幸福的，就是中间那拨人，主要工作，叫做欺上瞒下，具体特点是，除了好事，什么都办；----《明朝那些事儿》封装到utils工具箱中，对外暴露一个mitt实例。有两个组件，Child1，Child2。

2024-06-15 00:38:04 203

原创【web本地存储】storage事件，StorageEvent对象介绍

Web Storage API 内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发storage事件，并把它发送给所有感兴趣的监听者，因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听storage事件。然后，当我们在第一个页面的输入框中输入某个值，例如：今天我真帅。// 同步localStorage数据。至此，跨标签页通信大功告成。然后再去看第二个页面。

2024-06-10 22:47:59 1033

原创【web性能】重绘重排优化

凡事要成就大事的，一半在于人的谋划，另一半就要看天意了，看时机会不会到来。（那些说别人缺点，夸自己优点的人，一方面是为了掩盖自己的缺点，另方面是嫉妒别人的优点，目的就在于贬损他人，抬高自己）（不要因为小的缺点而忽视别人的大的优点，不要因为与人的小的怨愤而忘掉别人对你的大恩）如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className。天下古今之庸人，皆以一堕字致败，天下古今之才人，皆以一傲字致败。

2024-06-10 15:19:12 458

原创【web性能】什么是图层？图层创建的条件？

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。拥有CSS加速属性的元素（will-change）使用加速视频解码的节点;节点；拥有具有3D变换的CSS属性；CSS3动画的节点；

2024-06-10 13:09:47 320

原创【JS】立即执行函数IIFE 和闭包到底是什么关系？

声明一个匿名函数马上调用这个匿名函数销毁这个匿名函数")})()等同于")fn()

2024-06-09 18:03:31 337

原创【JS】理解闭包及其应用

闭包就是指有权访问另一个函数作用域中变量的函数。

2024-06-09 17:21:53 387

原创【Vue2/3】使用Provide/Inject 依赖注入跨组件通信

在组件嵌套多层情况下，不论组件嵌套多深，父组件都可以通过provide来提供数据，子组件或孙组件或曾孙组件使用inject注入数据。还有，在兄弟组件之间传值也很方便。

2024-06-08 15:59:43 373

原创【Vue3】理解toRef() 和 toRefs()

toRef 和 toRefs 是Vue3中的响应式转换工具函数toRef: 不影响源对象的情况下，对属性进行单独的访问和修改。toRef函数正是为了解耦属性的关联，将属性转换为一个独立的ref对象。并且：两者之间同步更新。toRefs: 在父组件向子组件传递属性时，需要将这些属性声明为响应式对象。但是，如果直接将整个响应式对象传递给子组件，子组件无法通过解耦或者直接访问每个属性。又或者是在单页面上数据双向绑定时在View层不想要写这个响应式对象点的形式而是直接访问属性。

2024-06-07 01:03:45 377

原创【Vue3】shallowReactive() and shallowReadonly()

所谓历史，就是过去的事，它的残酷之处在于：无论你哀嚎，悲伤，痛苦，落寞，追悔，它都无法改变。但是，我们点击修改姓名是，只有控制台打印的姓名变了，而界面上却没变。一具有名的尸体躺在无数无名的尸体上，这就是所谓的霸业。这就是说明，这里在info里面的属性不是响应式的。当我们点击增加学号时，界面上学号+1；只有根级别的属性是响应式的。只有根节点的属性是只读的。

2024-06-05 23:16:19 389 1

原创【JS】详解reduce()方法及其奇技淫巧、性能

或许到人生的最后一刻，他都不知道自己为什么会死，他永远也不会知道，在这个世界上，有着许多或明或暗的规则，必须适应，必须放弃原则，背离良知，与光同尘，否则你有多么伟大的抱负、多么光辉的理想，都终将被湮灭。袁崇焕是不知道与光同尘的，由始至终，他都是一个不上道的人，他有才能、有抱负、有个性，施展自己的才能，实现自己的抱负，彰显自己的个性，如此而已。----《明朝那些事儿》在数据量较小的情况下，reduce()方法性能较好；在数据量较小的情况下，for循环方法性能较好；

2024-06-05 21:36:54 421

原创【JS】实现数组扁平化的7种方式

换句话说，崇祯上台以后，是很想干事的，但有的事，干了也白干，有的事，干了不如不干，朝廷就是这么个朝廷，大臣就是这帮大臣，没法干。----《明朝那些事儿》循环：如果当前当前元素是一个数组，那么就对它进行递归处理，再将递归处理的结果拼接到结果数组上。操作数组可以直接展开数组的第一层，主要利用这个特性进行编程。注意：这种方式也对数组内部的元素类型有局限性。注意：这种方式对数组内部的元素类型有局限性。参数Infinity表示完全展开。

2024-06-02 17:23:17 300

原创【Vue3】自定义组件directive&app.use()

created: 在绑定元素的attribute前或事件监听器前调用；beforeMount: 在元素插入到DOM前调用；mounted: 在绑定元素的父组件及它自己的所有子节点都挂载完成后调用（常用）beforeUpdate: 绑定元素的父组件更新前调用updated: 在绑定元素的父组件及它自己的所有子节点都更新后调用（常用）beforeUnmount: 绑定元素的父组件卸载前调用unmounted: 绑定元素的父组件卸载后调用。

2024-06-01 16:41:26 749

原创【CSS布局】响应式设计原则以及双飞翼布局&圣杯布局

温体仁未必是奸臣，钱谦益未必是好人，不需要惊讶，历史往往跟你所想的并不一样。英雄可以写成懦夫，能臣可以写成奸臣，史实并不重要，重要的是，谁来写。----《明朝那些事儿》特点：两侧固定，中间自适应。浮动+calc()函数。浮动+calc()函数。

2024-05-30 00:01:45 1136 1

原创【JavaScript】call、apply、bind的区别和应用

这三个函数都是为了改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。我们来看个例子接下来，我们增加一个对象字面量，它没有所谓的showName()方法，不过，我们可以使用call、apply、bind帮我们干这件事// call// dog// apply// dog// bind// dog如此，我们那别人的showName()方法，并动态改变其上下文帮自己输出了信息。

2024-05-28 21:47:46 263

原创什么是元编程？JavaScript中怎么体现？

一句话，元编程就是通过代码来编程代码。即通过代码来生产、修改、操作代码的一种能力。很多语言都有这个特性，比如Java中的反射技术。反射就是能够了解到类里面、方法里面的一些内部信息，当然，我们也可以去修改操作这些信息。自省：代码能够自我检查、访问内部属性，我们可以据此获得代码的底层信息。例如：JavaScript语言的ES6版本中的Reflect。自我修改：顾名思义，代码可以自己修改自身。调解：也可以说是代理。例如，Vue3的Proxy代理对象就是起到了这个作用。

2024-05-27 23:24:11 845 1

原创 TypeScript类型体操练习

这个世界上，有两种人最痛苦，第一种是身居高位者，第二种是身居底层者，第一种人很少，第二种人很多。第一种人叫崇祯，第二种人叫百姓。而最幸福的，就是中间那拨人，主要工作，叫做欺上瞒下，具体特点是，除了好事，什么都办；例如：我们要将 a=1&b=2&c=3 转为 {a:1, b:2, c:3}as 重映射-索引的重命名。那么，我们要有按这三步走。

2024-05-25 15:02:17 600

原创 JS函数高级技巧之纯函数、高级函数、懒函数和函数组合

函数体里面会包含各种各样的条件语句，有时候这些条件语句仅仅需要执行一次，比如说我们写单例的时候判断某个对象是否为空，如果为空我们就创建一个对象，那其实我们知道后续只要程序还在运行，这个对象是不可能为空的，但是我们每次使用时都还会判断是否为空，都会执行我们的条件判断。上面的代码在每次执行的时候都会执行条件判断，这边还好，如果我们的条件判断非常复杂，那其实也是一个不小的性能影响，这时候我们就可以使用懒函数的小技巧来优化代码。上面这个组合函数只能接收三个函数参数，这边我们编写一个接收任意数量的函数参数。

2024-05-23 00:50:49 484

原创 JS性能优化之函数唯一标识以及自记忆函数

注意：ES6 的箭头函数是一种匿名函数的简写，它们不具有自己的 this、arguments、super 或 new.target。有一位名叫朱升的学者，告诉朱元璋“高筑墙，广积粮，缓称王”。过给函数添加属性来记住一些计算结果，之后再调用的时候就可以不用重新计算了，直接去属性中的数据，提高性能。给函数设置一个 id 属性，作为唯一标识，在某些情况下可以提高性能，比如，唯一的区别是：函数是可调用的，即函数会被调用然后去执行某项动作。一个集合中的函数，不希望出现重复函数。对象拥有的，函数都有。

2024-05-21 23:41:40 399

原创除了BFC，IFC、FFC以及GFC也需知道

王阳明被贬龙场，龙场悟道；晚年身负重伤，依然决定赴两广，最终再也未能返回家乡，不是谁都可以成为圣人，也不是谁都敢想成为圣人；可是王阳明他敢想，也成功做到了，他本身，就是一轮明月。“吾心自有光明月，千古团圆永无缺。使用了flex布局（CSS3）实际上就是声明创建了FFC。display属性为flex或inline-flex的时候。使用了grid布局（CSS3）实际上就是声明创建了GFC。display属性为grid或inline-grid的时候。/* 触发IFC *//* 触发IFC */

2024-05-19 23:30:36 489

原创深入理解分析BFC容器

BFC容器是一种具有特定规则的HTML元素或CSS属性，它们会创建一个独立的上下文，影响其内部元素的布局和排列方式。BFC容器是CSS布局中的一个重要概念，可以帮助开发人员更精确地控制元素的布局和排列。朱元璋之所以选择胡惟庸，并不是因为他很强，相反，正式因为胡惟庸对朱元璋的威胁小，所以朱元璋才让他成为了胜利者。理解：我们可以将BFC当作是元素的属性，当元素拥有了这个属性，这个元素就可以看作是一个隔离的独立容器。修改代码,将各自的div外层包裹一个div，然后再给外层的div加上BFC容器。

2024-05-19 10:40:38 733

原创 JS算法-十大排序算法（下）

当徐达策马跨进元大都的那一刻，他就完成了历史上第一次成功的北伐，打破了不能由南自北统一的魔咒，自此已离去四百年的燕云十六州又回到了汉民族怀抱。通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。将数组进行分组，减少排序的数量，再对子数组进行排序，最后合并即可得到结果。堆排序，是选择排序的优化版本，利用数据结构-树，对数据进行管理。计数排序要求排序的数据，必须是由范围的整数。山河奄有中华地，日月重开大宋天。

2024-05-18 00:23:01 165

原创 JS算法-十大排序算法（上）

如果我的相对论被证明是正确的，德国人就会说我是德国人，法国人会说我是一个世界公民；如果我的相对论被否定了，法国佬就会骂我是德国鬼子，而德国人就会把我归为犹太人。利用分治思想，将大的数组，分解为小数组，直至单个元素。然后，使用选择排序的方式，对拆分的小数组，进行回溯，并有序合并，直至合并为一个大数组。每一趟从待排序的数据元素中选出最小（或最大）的一个元素，顺序放在已排好序的数列的最后，直到全部待排序的数据元素排完。是一种插入排序的算法，是对简单的插入排序进行改进后，更高效的版本。

2024-05-14 22:38:58 315

原创 Vue3+TSX项目动态导入js文件，挂载到window全局作用域中

最近，在一个需求中，我们这边需要和第三方厂商对接，第三方给了我方一个js文件，需要我方这边调用该文件中的某一个方法进行数据交互，但是我们这边使用的是Vue3+TS的项目。在最开始，我把JS文件转成了TS，然后将需要调用的文件export出去，然后我在TSX业务组件中去import，然后再进行调用，但是出现了一点问题。且第三方这个有很多问题，然后一下改这改那，我这边也比较繁琐。然后我就不转了，直接讲js文件挂载到window全局作用域中。

2024-05-09 23:22:41 529

原创初识Electron，创建桌面应用

古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》- DOMContentLoaded事件：此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。- Load事件：此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。补充知识：Electron 生命周期。

2024-04-30 22:51:07 758

原创记恒天软件前端面试题

root、E:empty、E:required、E:optional、E:fist-child、E:last-child、E:only-child、E:nth-child(n)、E:nth-last-child(n)、E:first-of-type、E:last-of-type、E:only-of-type、E:only-of-type、E:nth-of-type(n)、E:nth-last-of-type(n)只有在css冲突的时候才会用到样式权重的计算，权重大的会覆盖权重小的样式。

2024-04-28 23:08:46 626

原创笔试题-构建非二叉树，且非递归遍历-利用栈

【代码】笔试题-构建非二叉树，且非递归遍历-利用栈。

2024-04-25 23:33:00 334 1

原创华为OD笔试题记录-2024.4.21

小明在玩一个游戏，游戏规则如下:在游戏开始前，小明站在坐标轴原点处(坐标值为0)给定一组指令和一个幸运数，每个指令都是一个整数，小明按照指定的要求前进或者后退指定的步数。前进代表朝坐标轴的正方向走，后退代表朝坐标轴的负方向走，幸运数为一个整数，如果某个指令正好和幸运数相等，则小明行进步数加 1。第一个单元中有对B单元的引用，B单元格的值为1，耆换时，将第二个数据第单元的内容替代。引用单元格的位置不受限制，允许排在后面的单元格被排在前面的单元格引用。每个单元格的内容，在替换前和替换后均不超过100个字符。

2024-04-21 23:23:45 547

空空如也

空空如也