- 博客(37)
- 收藏
- 关注
RSS订阅原创 Less使用
如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。可以对任何数字、颜色或变量进行运算。
2024-06-19 18:31:50
277
原创 Sass 使用
Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，也是一种CSS扩展语言。Sass有两种语法格式：1. SCSS (Sassy CSS)：这种格式的文件以.scss为扩展名，它的语法完全兼容CSS，并且增加了Sass的新特性。2. 缩进语法（或简称"Sass"）：这种格式的文件以.sass为扩展名，它使用缩进而不是大括号来分隔代码块，且属性定义时不使用冒号。Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
2024-06-19 17:47:11
1481
原创 SparkMd5-对文件名称加密
在JavaScript中，你可以使用`encodeURIComponent`函数来对字符串进行URL编码，然后使用`btoa`函数将编码后的字符串转换为Base64格式。这样可以实现对字符串的加密。当我收到一个需求是需要对上传的文件名称加密的时候，我便想到了使用md5对文件名称加密，但其实是大题小做了，对文件名称加密其实就是将中文转换成英文字母，所以我们可以换一个更简单的方法来实现这个需求。并输出一个固定长度（对于MD5来说是128位，通常表示为32个字符的十六进制数）的哈希值。
2024-06-18 18:06:48
493
原创 实现数组转换为树形结构
这个函数首先创建一个查找表（lookup），用于存储每个节点及其子节点。然后，它遍历数组中的每个元素，将元素添加到其父节点的子节点数组中。如果父节点ID为null，则表示该节点是根节点。最后，返回包含所有根节点及其子节点的数组。要将数组转换为树形结构，通常需要一个数组，其中每个元素都包含一个父节点的引用。以下是一个使用JavaScript实现的示例，假设每个元素都有一个唯一的 `id` 和一个指向其父元素的`parentId`
2024-06-17 16:33:06
196
原创 基本类型为什么可以调用方法？
在JavaScript中，基本类型（如数字、字符串、布尔值）本身是不具备方法的，因为它们不是对象。然而，当你尝试在一个基本类型上调用方法时，JavaScript 会临时将基本类型包装成相应的对象类型，从而使得方法调用成为可能。在这个过程中，JavaScript 内部临时将 `str` 转换成了一个 `String` 对象，然后调用了该对象的 `toUpperCase()` 方法。方法调用完成后，这个临时创建的对象就被丢弃，`str` 依然是一个基本类型的字符串。
2024-06-17 11:45:13
291
1
原创 实现一个可以处理循环引用的深拷贝函数
这对于深拷贝函数来说非常有用，因为它可以安全地存储对已拷贝对象的引用，而不必担心这些引用会阻止对象的垃圾回收。对于对象类型，它会检查是否已经在Map中存在拷贝，如果存在，则返回存储的拷贝。这样，当遇到循环引用时，可以直接返回之前存储的拷贝，避免无限递归。在JavaScript中，实现一个可以处理循环引用的深拷贝函数，你可以使用一个Map对象来跟踪已经被拷贝的对象。这样，当你遇到一个已经被拷贝过的对象时，你可以直接从Map中获取其拷贝，而不是再次拷贝它，从而避免了循环引用导致的无限递归问题。
2024-06-17 11:38:51
264
原创 token无感刷新
Token无感刷新通常指的是在用户不知情的情况下自动刷新认证Token，以保持用户的会话状态。这通常在使用JWT（JSON Web Tokens）作为认证方式时使用。这种机制确保了用户在使用应用时，Token可以在用户不知情的情况下被更新，避免了用户因Token过期而需要重新登录的情况。这种方法确保了用户体验的连贯性，同时保持了系统的安全性。前端（使用Axios拦截器）
2024-06-17 11:04:44
633
原创 图片懒加载实现
图片懒加载是通过延迟加载页面上的图片直到这些图片即将进入浏览器窗口（即用户滚动到它们附近时）才开始加载。这样可以显著减少初始加载时间和总下载数据量，提高用户体验。
2024-06-17 09:20:46
368
1
原创 文件上传下载的实现与原理
在 web 端，通常使用 `<input type="file">` 元素来创建文件上传表单。当用户选择文件后，通过 JavaScript 可以监听表单提交事件，获取文件数据，并使用 `FormData` 对象将文件数据包装成一个表单数据对象，然后通过 AJAX 或表单提交的方式将数据发送到服务器端。文件下载的原理是通过创建一个链接（a元素），设置其href属性为文件的URL，然后使用download属性指定文件名，最后调用click()方法触发下载。
2024-06-04 16:28:16
388
原创 浏览器缓存机制-强缓存/协商缓存
协商缓存是浏览器缓存策略中的一种，通过和ETag这两个字段，浏览器和服务器可以判断资源是否已更改，从而决定是否从缓存中加载资源。这种方式可以减少不必要的网络请求，提高网页加载速度。
2024-06-04 16:17:33
1064
原创 如何判断是否是IE浏览器
不同的浏览器提供不同的页面或者服务通常不是一个好主意。但是实际的开发中，可能确实是会碰到这样的情况，比如我现在做的项目，e盾是不兼容的，所以IE浏览器调用的e盾和其他非IE的不同。
2024-05-14 10:41:37
240
原创 常常出现的项目bug
Vue中有获取dom的属性ref，，甚至都不会在测试环境中发现。还有对数组的操作，也是常常会出现的bug。以下就是对这两种问题的描述和修复。
2024-05-06 18:12:28
397
原创 v-for中的key
在使用非文本节点的组件，且这个组件没有依赖于响应式的props，此时使用index作为key，那么此时对于列表的删除操作会导致视图错乱。
2023-07-20 21:46:24
210
原创 初识云计算
全球企业的IT 开销，分为三部分：硬件开销、能耗和管理成本。为什么云计算拥有划时代的优势？主要原因在于它的技术特征和规模效应所带来的压倒性的性能价格比优势。云计算与网格技术结合的基准将是面向服务的体系结构SOA (Service Oriented Architecture）。在SOA 框架下，无论是网格服务，还是云计算服务，或其他的Web Services 服务，都能够非常容易地共存、共用、互操作。
2023-05-06 15:44:53
296
原创 鼠标禁用样式(cursor: not-allowed)&鼠标禁用事件(pointer-events: none)
当一个按钮禁用的时候，我们需要展示禁用样式，使用cursor: not-allowed，同时我们需要在禁用状态下点击按钮，是不应该触发事件的，但是我们知道只使用cursor: not-allowed，实际上我们点击按钮时还是触发了事件。接下来我们就来讨论如何实现禁用样式且无法触发事件的实现以上就是今天要讲的内容，本文介绍了两种禁用事件方法的使用。
2023-04-27 10:18:02
2209
原创 数组扁平化（面试题）
数组扁平化就是在一个数组中可能还有包裹着的数组，将这个数组修改为一个只包含简单元素的数组，就是数组扁平化。以上就是今天的内容，其实实现数组扁平化的方法还是挺多的，大家可以掌握其中的一两种方法用来实现数组扁平化。
2023-04-26 15:39:46
75
原创 循环打印红黄蓝
一道比较经典的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，黄灯2s亮一次，绿灯1s亮一次；如何让三个等不断交替重复亮灯？以上就是今天的内容，这个问题主要是考察异步编程的几种方法。
2023-04-26 10:21:45
221
原创 .native的使用
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符。以上就是今天要讲的内容，本文仅仅简单介绍了v-on的.native修饰符的使用，还有许多其他的事件修饰符，我们后续讨论。
2023-04-24 11:18:17
1149
原创 如何在子组件中修改父组件传入的props?
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。以上就是今天要讲的内容，本文仅仅简单介绍了prop的单向数据流的使用，这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
2023-04-23 20:50:51
1155
原创 .sync 修饰符是什么？如何使用？
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。即：子组件可以变更父组件，父组件可以变更子组件。为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符以上就是今天要讲的内容，v-bind的.sync修饰符和组件model选项是在Vue2.x上使用的，在vue3.x上替换成了参数v-model。
2023-04-23 20:32:35
1737
原创 如何修改placeholder颜色？
我们需要修改input框中的placeholoder字体或者颜色如果我们直接给input设置class类，写入color颜色，我们会发现修改的颜色是input框中输入字体的颜色。以上就是今天要讲的内容。
2023-04-23 11:40:08
8810
原创 如何创建AJAX请求
AJAX是Asynchronous JavaScript and XML 的缩写，指的是通过JavaScript的异步通信，从服务器中获取XML文档提取数据，再更新当前网页的对应部分，而不用刷新整个网页以上就是今天要讲的内容，本文仅仅简单介绍了如何实现AJAX请求。
2023-04-19 11:02:53
270
原创 call函数的实现
call()方法是使用一个指定this值和单独给出的一个或多个参数来调用函数，本文就是手写call方法以上就是call函数的实现，该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
2023-04-18 13:20:33
798
原创 手写Promise.all
本文主要是介绍手写Promise.all，一般来说，Promise.all用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同的接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也都出不来，这就看当前页面的耦合程度了以上就是手写promise.all的代码了！
2023-04-18 09:57:19
1215
原创 关于Echarts中formatter设置百分比格式
formatter中默认展示两位小数。如果我们需要设置展示整数的百分比,如下所写 如果我们需要展示为一位小数，如下所写： 我们可以把data打印出来看一下使用formatter的回调函数，就可以将百分比设置成为我们想要的格式了...
2021-12-23 17:48:57
1950
1
原创 v-if VS v-show
v-if是真正的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当的销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——知道条件第一次为真时，才会开始渲染条件块。 相比之下，v-show就简单得多，——不管初始条件是什么，元素总是被渲染，并且只是简单地基于CSS进行切换。 一般来说，v-if有更高地切换开销，v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show更好，如果在运行时条件很少改变，则使用v-if较好。 可以在<t
2021-10-15 13:26:28
80
原创 对MVVM的理解
MVVM是Model-View-ViewModel的缩写。MVVM模式的组成部分：模型 模型是指代表真实状态内容的领域模型(面向对象)，或者代表内容的数据访问层(以数据为中心)。 视图 就像MVC、MVP一样，视图是用户在屏幕上看到的结构、界面、外观(UI) 视图模型 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter,有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。MVVM模式的...
2021-10-15 11:02:36
994
原创 组件的data为什么是一个函数
首先我们应该了解一下对象和函数的存储方式。一、JS中对象是引用数据类型 引用数据类型的数据，变量是保存对象的引用（内存地址） 如果多个变量指向同一个对象，此时修改一个变量的属性，会影响其他的变量。二、函数作用域 1、调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁。 2、每调用一次，函数就会创建一个新的函数作用域，它们之间相互独立。 3、在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问...
2021-10-14 16:21:52
437
原创 为什么v-if 与v-for不建议一起使用
一、2.x版本中在同一个元素上使用v-if和v-for时，v-for会优先作用。 3.x版本中，v-if总是优先于v-for生效。由于语法上存在歧义，建议避免在同一元素上使用两者。建议： 比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。...
2021-10-14 14:51:12
129
原创 Vue的核心思想
一、数据驱动（双向绑定） Vue是MVVM模式，而DOM是数据的一种自然映射。 传统的模式如下： Ajax请求从Model请求数据 --> 手动触发DOM并传入数据从而修改页面。 Vue的模式如下： 在Vue中，Directives对view进行了封装，当model中的数据发生变化时， Vue就会通过Directives指令去修改DOM，同时也通过DOM List...
2021-10-14 09:40:04
822
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人