- 博客(532)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
952
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
569
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
316
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
1645
原创 说说webpack的热更新是如何做到的？原理是什么？
通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）socket server 是一个 websocket 的长连接，双方可以通信当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文（update chunk）
2024-05-24 19:10:20
228
原创 说说Loader和Plugin的区别？编写Loader，Plugin的思路？
对于loader，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程。在Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过Webpack提供的 API改变输出结果。由于webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务。一般在编写loader的过程中，保持功能单一，避免做多种功能。
2024-05-23 18:52:27
629
原创 如何实现上拉加载，下拉刷新？
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用。
2024-05-22 18:38:38
759
原创 web常见的攻击方式有哪些？如何防御？
DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，a 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。针对第一个要素，我们在用户输入的过程中，过滤掉用户输入的恶劣代码，然后提交给后端，但是如果攻击者绕开前端请求，直接构造请求就不能预防了。一个正常的用户输入了 5 < 7 这个内容，在写入数据库前，被转义，变成了 5 < 7。
2024-05-21 17:46:03
558
原创 什么是单点登录？如何实现？
确认无误后，应用系统记录用户的登录状态，并将 Token写入Cookie，然后给本次访问放行。当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证。用户统一在认证中心进行登录，登录成功后，认证中心记录用户的登录状态，并将 token 写入 Cookie（注意这个 Cookie是认证中心的，应用系统是访问不到的）
2024-05-20 18:01:19
850
原创 解释下什么是事件代理？应用场景？
适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress减少整个页面所需的内存，提升整体性能动态绑定，减少重复工作focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的如果把所有事件都用事件代理，可能会出现事件误判，即本不该被触发的事件被绑定上了事件。
2024-05-18 17:44:53
739
原创 说说JavaScript中的事件模型
javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等。如上，当希望为同一个元素绑定多个同类型事件的时候（上面的这个btn元素绑定2个点击事件），是不被允许的，后绑定的事件会覆盖之前的事件。由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念。事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点（触发节点）最后接受事件。
2024-05-17 19:11:04
688
原创 JavaScript中执行上下文和执行栈是什么？
简单的来说，执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中。引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文)，当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文。留意上面的代码，let和const定义的变量a和b在创建阶段没有被赋值，但var声明的变量从在创建阶段被赋值为undefined。紫色框住的部分为全局上下文，蓝色和橘色框起来的是不同的函数上下文。
2024-05-16 17:09:14
673
原创 说说webpack proxy工作原理？为什么能解决跨域?
在开发阶段， webpack-dev-server 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost的一个端口上，而后端服务又是运行在另外一个地址上。在开发阶段，本地地址为http://localhost:3000，该浏览器发送一个前缀带有/api标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中。devServetr里面proxy则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配。
2024-05-15 18:06:06
588
原创 你是怎么处理vue项目中的错误的?
另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。
2024-05-14 19:28:13
765
原创 vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的。登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由。如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理。
2024-05-13 18:36:09
920
原创 Vue项目中有封装过axios吗？主要是封装哪方面的？
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…
2024-05-11 18:28:48
891
转载 如何判断一个js对象是否存在循环引用
如果cache中存在，那么说明这个对象有环 return true，如果不存在并且是引用数据类型，那么我们就加入cache。我们判断一个对象有没有循环引用，我们其实并不需要在乎对象的key是什么，只需要判断对象的value。所以我们可以先使用Object.values()拿到对象所有values,然后定义一个cache变量用来存储values中的引用数据类型，然后遍历values。在转化的时候会变成死循环。在前端JSON.stringfy是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化。
2024-05-07 18:13:50
9
原创 说说你对盒子模型的理解?
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域。标准盒子模型，是浏览器默认的盒子模型。
2024-05-06 17:46:22
841
原创 你是怎么理解ES6中 Promise的？使用场景？
Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码console.log('得到最终结果: ' + finalResult);阅读上面代码，是不是很难受，上述形成了经典的回调地狱现在通过Promise的改写上面的代码})})console.log('得到最终结果: ' + finalResult);})链式操作减低了编码难度代码可读性明显增强。
2024-04-30 17:40:48
978
原创 在vue2中，什么是双向绑定，为什么vue3要进行优化？
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下Object.defineProperty只能遍历对象属性进行劫持return})
2024-04-29 18:13:15
955
原创 说说你对贪心算法、回溯算法的理解？应用场景？
贪心算法，又称贪婪算法，是算法设计中的一种思想其期待每一个阶段都是局部最优的选择，从而达到全局最优，但是结果并不一定是最优的举个零钱兑换的例子，如果你有1元、2元、5元的钱币数张，用于兑换一定的金额，但是要求兑换的钱币张数最少如果现在你要兑换11元，按照贪心算法的思想，先选择面额最大的5元钱币进行兑换，那么就得到11 = 5 + 5 + 1 的选择，这种情况是最优的但是如果你手上钱币的面额为1、3、4，想要兑换6元，按照贪心算法的思路，我们会 6 = 4 + 1 + 1这样选择，这种情况结果就不是最优的选择
2024-04-28 18:58:52
911
原创 说说你对分而治之、动态规划的理解？区别？
动态规划，同样是算法设计中的一种方法，是一种在数学、管理科学、计算机科学、经济学和生物信息学中使用的，通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。分而治之是算法设计中的一种方法，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。与分治法不同的是，适合于用动态规划求解的问题，经分解得到子问题往往不是互相独立的，而分而治之的子问题是相互独立的。若用分治法来解这类问题，则分解得到的子问题数目太多，有些子问题被重复计算了很多次。
2024-04-26 17:38:33
885
原创 说说你对二分查找的理解？如何实现？应用场景？
如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较。二分查找法的O(logn)让它成为十分高效的算法。在计算机科学中，二分查找算法，也称折半搜索算法，是一种在有序数组中查找某一特定元素的搜索算法。实际上，除了有序的数组可以使用，还有一种特殊的数组可以应用，那就是轮转后的有序数组。对比普通的二分查找法，为了确定目标数会落在二分后的哪个部分，我们需要更多的判定条件。搜索过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜索过程结束。
2024-04-25 18:52:19
671
原创 说说你对归并排序的理解？如何实现？应用场景？
所以可以得到：S(n) = S(n/2) + O(1) = S(n/4) + O(2) = S(n/8) + O(3) = S(n/2^k) + O(k) = S(1) + O(logn) = O(logn)如果对T(n) = 2 * T(n/2) + O(n)进行左右 / n的操作，得到 T(n) / n = (n / 2) * T(n/2) + O(1)现在令 S(n) = T(n)/n，则S(1) = O(1)，然后利用表达式带入得到S(n) = S(n/2) + O(1)
2024-04-24 17:32:48
674
原创 说说你对选择排序的理解？如何实现？应用场景？
第一次内循环比较N - 1次，然后是N-2次，N-3次，……+ 1，求等差数列和，得 (N - 1 + 1)* N / 2 = N^2 / 2，舍去最高项系数，其时间复杂度为 O(N^2)从上面可以看到，对于具有 n 个记录的无序表遍历 n-1 次，第i 次从无序表中第 i 个记录开始，找出后序关键字中最小的记录，然后放置在第 i 的位置上。选择排序（Selection sort）是一种简单直观的排序算法，无论什么数据进去都是 O(n²)的时间复杂度，所以用到它的时候，数据规模越小越好。
2024-04-23 14:52:26
259
原创 说说常见的排序算法有哪些？区别？
即在原序列中，r[i] = r[j]，且 r[i] 在 r[j] 之前，而在排序后的序列中，r[i] 仍在 r[j] 之前，则称这种排序算法是稳定的；快速排序是对冒泡排序算法的一种改进，基本思想是通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据比另一部分的所有数据要小。稳定性指的是假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变。排序算法属于算法中的一种，而且是覆盖范围极小的一种，彻底掌握排序算法对程序开发是有很大的帮助的。
2024-04-20 18:26:25
733
原创 说说你对图的理解？相关操作有哪些？
通过上面的初步了解，可以看到图就是由顶点的有穷非空集合和顶点之间的边组成的集合，分成了无向图与有向图图的表达形式可以分成邻接矩阵和邻接表两种形式，在javascript中，则可以通过二维数组和对象的形式进行表达。
2024-04-19 17:38:41
459
原创 说说你对堆的理解？如何实现？应用场景？
堆化的过程是顺着节点所在路径比较交换的，所以堆化的时间复杂度跟树的高度成正比，也就是Olog(n)，插入数据和删除堆顶元素的主要逻辑就是堆化。然后进行下移操作，将新的堆顶和它的子节点进行交换，直到子节点大于等于这个新的堆顶，删除堆顶的时间复杂度为O(logk)将这个值和它父节点进行交换，直到父节点小于等于这个插入的值，大小为k的堆中插入元素的时间复杂度为O(logk)将值插入堆的底部，即数组的尾部，当插入一个新的元素之后，堆的结构就会被破坏，因此需要堆中一个元素做上移操作。
2024-04-18 17:15:14
759
原创 说说你对树的理解？相关的操作有哪些？
树是一个非常重要的非线性结构，其中二叉树以二叉树最常见，二叉树的遍历方式可以分成前序遍历、中序遍历、后序遍历同时，二叉树又分成了完成二叉树和满二叉树。
2024-04-17 18:27:42
913
原创 说说你对集合的理解？常见的操作有哪些？
所以，可以利用Set的一些原生方法轻松的完成数组去重，查找数组公共元素及不同元素等操作。集合（Set），指具有某种特定性质的事物的总体，里面的每一项内容称作元素。使用set集合的场景一般是借助其确定性，其本身只包含不同的元素。当添加实例中已经存在的元素，set不会进行处理添加。删除某个值，返回一个布尔值，表示删除是否成功。一般情况下，使用数组的概率会比集合概率高很多。返回一个布尔值，判断该值是否为Set的成员。添加某个值，返回 Set 结构本身。清除所有成员，没有返回值。体现了集合的互异性特性。
2024-04-16 18:27:55
290
原创 说说你对链表的理解？常见的操作有哪些？
相比于线性表顺序结构，操作复杂。由于不必须按顺序存储，链表在插入的时候可以达到O(1)的复杂度，比另一种线性表顺序表快得多，但是查找一个节点或者访问特定编号的节点则需要O(n)的时间，而线性表和顺序表相应的时间复杂度分别是O(logn)和O(1)链表（Linked List）是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的，由一系列结点（链表中每一个元素称为结点）组成。每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域。
2024-04-15 18:41:01
692
1
原创 说说你对栈、队列的理解？应用场景？
包括编译器的在对输入的语法进行分析的时候，例如"()“、”{}“、”[]"这些成对出现的符号，借助栈的特性，凡是遇到括号的前半部分，即把这个元素入栈，凡是遇到括号的后半部分就比对栈顶元素是否该元素相匹配，如果匹配，则前半部分出栈，否则就是匹配出错。所以其按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据，具有记忆作用。生活中的例子，排队买票，排在队头的永远先处理，后面的必须等到前面的全部处理完毕再进行处理，这也是典型的先进先出模型。
2024-04-11 18:42:59
560
原创 说说你对数据结构的理解？有哪些？区别？
树是典型的非线性结构，在树的结构中，有且仅有一个根结点，该结点没有前驱结点。在程序设计中，为了处理方便， 一般情况把具有相同类型的若干变量按有序的形式组织起来，这些按序排列的同类数据元素的集合称为数组。跟栈基本一致，也是一种特殊的线性表，其特性是先进先出，只允许在表的前端进行删除操作，而在表的后端进行插入操作。堆是一种特殊的树形数据结构，每个结点都有一个值，特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。一种特殊的线性表，只能在某一端插入和删除的特殊线性表，按照先进后出的特性存储数据。
2024-04-10 18:26:33
575
1
原创 说说你对算法中时间复杂度，空间复杂度的理解？如何计算？
算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，但在过程中消耗的资源和时间却会有很大的区别时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「空间复杂度」来描述通常会遇到一种情况，时间和空间维度不能够兼顾，需要在两者之间取得一个平衡点是我们需要考虑的一个算法通常存在最好、平均、最坏三种情况，我们一般关注的是最坏情况。
2024-04-09 17:38:50
608
原创 说说对WebSocket的理解？应用场景？
采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的区别。引入ws和wss分别代表明文和密文的websocket协议，且默认端口使用80或443，几乎与http一致。从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据。客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
2024-04-08 18:40:01
990
原创 说说TCP为什么需要三次握手和四次挥手？
三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备过程如下：通过三次握手，就能确定双方的接收和发送能力是正常的。之后就可以正常通信了如果是两次握手，发送端可以确定自己发送的信息能对方能收到，也能确定对方发的包自己能收到，但接收端只能确定对方发的包自己能收到 无法确定自己发的包对方能收到并且两次握手的话, 客户端有可能因为网络阻塞等原因会发送多个请
2024-04-07 18:11:19
1063
原创 说说地址栏输入 URL 敲下回车后发生了什么?
首先判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作。当建立tcp连接之后，就可以在这基础上进行通信，浏览器发送 http 请求到目标服务器。在之前文章中，了解到tcp是一种面向有连接的传输层协议。在之前文章中讲过DNS的查询，这里就不再讲述了。最终，获取到了域名对应的目标服务器IP地址。
2024-04-03 18:53:00
270
1
原创 说说 HTTP 常见的请求头有哪些? 作用？
Last-Modified 表示本地文件最后修改日期，浏览器会在request header加上If-Modified-Since（上次返回的Last-Modified的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来。HTTP头字段（HTTP header fields）,是指在超文本传输协议（HTTP）的请求和响应消息中的消息头部分。
2024-03-30 18:38:41
379
原创 说说HTTP 常见的状态码有哪些，适用场景？
100（客户端继续发送请求，这是临时响应）：这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。100：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。307 （临时重定向）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。302（临时移动）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
2024-03-29 18:23:51
758
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人