![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css+JavaScript等
文章平均质量分 54
前端三剑客
STATICHIT静砸
你所见及我
展开
-
el-dialog宽度自适应
其中有一个是,在使用element-plus的el-dialog时,在pc端和在手机端打开,由于屏幕宽度的不同,我希望el-dialog的宽度是不一样的。当我在pc端用浏览器打开页面,并缩小窗口时,并不会触发宽度的变化。1️⃣首先,直接给el-dialog设置自定义class结合媒体查询是无效的,直接设置el-dialog的样式属性无效。但每次窗口修改时我需要刷新才会重新触发修改width的操作,所以这里我再加了个监听视口变化的操作。这只是获取你操作屏幕的宽度,并不是你窗口的宽度。原创 2024-03-28 19:13:09 · 1678 阅读 · 0 评论 -
Vue.js中的$nextTick
其实目前在我现有的开发经历中,我还没有实际运用过$nextTick,今天在看书时,学习到了这个东西,所以做个笔记记录一下。$nextTick 是 Vue提供的一个方法,用于在 DOM 更新之后执行回调函数。它在 Vue.js 中常常用于处理 DOM 相关的操作或获取更新后的 DOM 元素。通过使用 $nextTick 方法,可以确保在 DOM 更新完成后再执行回调函数,从而保证操作的准确性和可靠性。注意,它返回的是一个Promise对象。原创 2024-03-02 20:57:01 · 983 阅读 · 0 评论 -
常见的JavaScript书写基本规范
14. 对于⻓的逻辑语句或表达式,可以使⽤合适的换⾏和缩进来增加可读性,或者使⽤括号将其。7. 尽量避免使⽤全局变量,封装代码到函数或模块中,使⽤局部变量来限制作⽤域,减少命名。5. 使⽤缩进(通常是四个空格或⼀个制表符)来表示代码块的层次结构,增加代码的可读性。11 . 使⽤单引号或双引号来表示字符串,保持⼀致性,推荐使⽤单引号。12. 尽量使⽤模板字符串来拼接字符串,避免使⽤字符串连接符(9. 尽量避免使⽤隐式类型转换,使⽤严格相等运算符()来提⾼代码的安全性和效率,避免使⽤隐式全局变量。原创 2024-02-16 14:53:26 · 347 阅读 · 0 评论 -
promise【JavaScript
一开始是pending,然后可以转变为fulfilled或rejected,一旦转变为其中一种状态,就会保持在那个状态,无法再次改变。在settled状态下,Promise的状态已经确定,不会再发生变化。作的结果,调⽤了 resolve 或 reject ⽅法来改变 Promise 的状态。功时的回调函数,使⽤ catch ⽅法捕获了错误。在上⾯的示例中,我们创建了⼀个 Promise 对象,并在内部定义了⼀个异步操作。这样,我们就可以通过对 Promise 的状态进⾏判断和处理,来执⾏相应的操作。原创 2024-02-16 14:22:13 · 425 阅读 · 0 评论 -
【JavaScript细节】map与forEach的区别
在上⾯的示例中,使⽤ forEach ⽅法遍历数组并输出元素、索引和原数组。⽽使⽤ map ⽅法遍历数组并返回每个元素的两倍值,⽣成⼀个新的数组 doubledNumbers。map ⽅法也⽤于遍历数组,返回⼀个新的数组,并且可以通过在回调函数中使⽤ return 语句来指定每次遍历的返回值。的,即使在遍历过程中使⽤ return 语句也⽆法停⽌遍历。⽽ map ⽅法可以使⽤ return 语句中断遍历。⽽ forEach ⽅法不能链式调⽤其他数组⽅法。⽽ forEach⽅法没有返回值,仅⽤于遍历数组。原创 2024-02-16 19:14:53 · 658 阅读 · 0 评论 -
【Javascript】内存泄漏
JavaScript 内存泄露指的是在程序中,不再使用的内存没有被正确释放,导致内存占用持续增加,最终引发性能问题甚至崩溃。setTimeout 的第一个参数使用字符串而非函数。一直存在于内存中,直到页面关闭,容易造成内存泄漏。控制台日志(console.log)移除存在绑定事件的 DOM 元素。通常哪些操作会造成内存泄漏呢?未使用 var 声明的全局变量。闭包函数(Closures)循环引用(两个对象相互引用)解析后的代码无法被垃圾回收。垃圾回收器定期扫描对象。原创 2024-02-15 17:10:08 · 729 阅读 · 0 评论 -
【JavaScript】字符串反转的常用方法
将字符串转换为数组,然后使用`reverse()`方法反转数组,最后再使用`join()`方法将数组转换回字符串。通过循环遍历字符串的每个字符,逆序拼接字符来构建反转后的字符串。使用递归函数逐个截取字符串的最后一个字符,并与剩余部分进行拼接。这些方法都可以实现字符串反转。我觉得最香最好用的还是第一种!原创 2024-02-06 17:23:44 · 1163 阅读 · 0 评论 -
【JavaScript知识点学习笔记】深浅拷贝
深浅拷贝是JavaScript一个非常经典的知识点,每次提到深浅拷贝我总是没办法特别清楚的表述出来,包括很多其他的知识点,其实是会的,但是没办法讲的很清楚,学习了费曼学习法,决定在复盘知识点的时候,每天找人讲解知识点,如果我能表达出来且让对方能听明白我讲的东西才算过关!这意味着如果原始对象包含嵌套对象,浅拷贝后的对象仍然会共享这些嵌套对象的引用。如果对象存在循环引⽤,即对象内部包含对⾃身的引⽤, JSON.stringify() ⽅法⽆法正确处理,会导致循环引⽤的属性被序列化为 null。原创 2024-02-17 23:43:09 · 552 阅读 · 0 评论 -
【Javascript】webpack的使用和特性
Webpack具有强⼤的打包能⼒,能够将项⽬中的多个模块打包成⼀个或多个静态资源⽂件。它⽀持各种模块加载器和插件,可以处理各种类型的资源⽂件,并且能够进⾏代码压缩、⽂件合并、按需加载等优化操作,以提⾼应⽤的性能和加载速度。在实际开发中,Webpack 是一个非常强大的前端构建工具,可以用于将各种前端资源(如 JavaScript、CSS、图片等)打包成静态资源。- 根据开发环境和生产环境的不同,使用 webpack 的环境变量进行配置,以实现对应环境下的不同行为,如开发时的热更新、生产时的代码压缩等。原创 2024-02-15 17:18:54 · 843 阅读 · 0 评论 -
Vue的双向绑定数据的原理
在上述示例中,我们通过 Object.defineProperty() 对 data 对象的 message 属性进⾏劫持,并在 getter 和 setter 中添加了相应的⽇志和更新操作。vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式,通过 Object.defineProperty() 来劫持各个属性的 setter , getter ,在数据变动时发布消息给订阅者,触发相应的监听回调。通过数据劫持,Vue能够捕获数据的变化,⽽发布者-订阅者模式则确保了数据变化时的及时通知和更新。原创 2024-02-16 21:02:36 · 612 阅读 · 0 评论 -
【正则表达式
正则表达式构造函数RegExp()和正则表达式字面量的主要区别在于语法和使用方式。正则表达式构造函数RegExp()使用字符串作为参数,需要进行双重转义,即需要使用双反斜杠来表示特殊字符,如 \\d 表示数字, \\w表示字母下划线等。构造函数的参数可以是一个字符串,也可以是两个字符串,第一个字符串是正则表达式模式,第二个字符串是修饰符。如果正则表达式模式是一个变量,只能使用构造函数的方式创建正则表达式。正则表达字面量 // (是左边一个 / 右边一个 / 将表达式包围起来)使用两个斜杠将原创 2024-02-16 22:26:23 · 932 阅读 · 0 评论 -
JavaScript- let var const区别
对于 const 关键字声明的变量 x ,它创建了⼀个只读的引⽤,也就是说它的值不能被修改。在示例中, const x = 10 声明了⼀个常量 x ,⽽在 if 语句块内部再次使⽤ const x = 20 声明了⼀个新的常量 x ,它的作⽤范围也仅限于 if 语句块内部。const 关键字声明的变量创建⼀个只读的引⽤,其值不可修改,但对于复合类型的变量,可以修改其属性或元素的值。声明变量的作⽤域限制在其声明位置的上下⽂中,⽽⾮声明变量总是全局的。声明创建⼀个值的只读引⽤ (即指针)原创 2024-02-16 21:15:51 · 463 阅读 · 0 评论 -
【JavaScript】添加、移除、移动、复制、创建和查找节点
注意,以上⽅法都是基于 document 对象进⾏操作的,如果需要在特定的节点上执⾏这些操。作,可以使⽤相应节点的⽅法,例如 parentNode.appendChild(node)添加、移除、替换、插⼊节点。原创 2024-02-16 21:44:50 · 570 阅读 · 0 评论 -
ES6的重要特性
11 . 管道操作符:提案阶段的特性,引⼊了管道操作符( |> ),可以将表达式的结果作为参数传递给下⼀个表达式,简化了函数调⽤和⽅法链的写法。9. 模块化:引⼊了模块化的概念,可以使⽤ import 和 export 语法导⼊和导出模块,提供了更好的代码组织和模块复⽤的⽅式。7. Promise:引⼊了 Promise 对象,⽤于更好地处理异步操作,解决了回调地狱的问题,并提供了更清晰的异步编程模式。8. 类:ES6引⼊了类的概念,可以使⽤ class 关键字定义类,实现了更接近传统⾯向对象编程的⽅式。原创 2024-02-16 18:27:55 · 803 阅读 · 0 评论 -
JavaScript将整数转化为字符串的常用方法
toFixed()`方法可以将数字转换为字符串,并保留指定小数位数。你还可以传递一个基数作为参数给`toString()`方法(例如,将数字转换为二进制、八进制或十六进制字符串)。这种方法利用了JavaScript的类型强制转换特性,当数字与字符串进行加法操作时,数字会被转换为字符串。字符串模板(ES6新增的功能)也可以用来将数字转换为字符串,通过将数字嵌入到`${}`中。将数字与空字符串(`""`)使用加号(`+`)运算符连接,也可以实现转换。`String()`函数可以将其参数转换为字符串。原创 2024-02-06 17:21:05 · 1932 阅读 · 0 评论 -
【热】如何实现el-table列宽随内容长度自适应最小宽度
非常火急火燎的来写这篇博客!!因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法,要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了!原创 2023-12-12 22:02:06 · 3489 阅读 · 3 评论 -
Viewport Meta 标记:让网页适应各种设备的魔法符号
Viewport(视口)简单来说,就是你在屏幕上能看到的区域。在桌面浏览器中,这通常是整个浏览器窗口,但在移动设备上,情况就复杂了。因为移动设备的屏幕尺寸各不相同,Viewport Meta 标记就变得尤为重要。原创 2023-12-11 21:43:44 · 245 阅读 · 0 评论 -
JavaScript的sort函数
JavaScript 的 `Array.prototype.sort()` 方法用于对数组的元素进行排序,并返回排序后的数组。默认情况下,`sort` 方法将数组元素转换为字符串,并按照字符串的Unicode码点顺序进行排序。这意味着即使数组中的元素是数字,它们也会被先转换成字符串,然后再比较它们的字典序,这可能会导致非直观的排序结果。为了实现更复杂的排序逻辑,`sort` 方法可以接受一个可选的比较函数作为参数。原创 2024-02-06 16:13:34 · 484 阅读 · 0 评论 -
reactive数据不响应
Proxy`本身用于对象拦截,通过`new Proxy`返回的值触发`get`和`set`方法,并通过ES6的`Reflect`进行反射,动态地对被代理对象的属性进行操作。由于`Proxy`是基于对象的拦截,当对象本身是原始值时,拦截无效,响应式也就失效。而`ref`在实现响应式时通过`.value`包裹一层对象,从而解决了这个问题。问题在于每次直接将对象或数组赋值给`reactive`创建的对象时,导致`reactive`创建的响应式对象直接被新赋值的对象代理。法二:另一种解决方法是直接使用`ref`原创 2023-12-17 22:39:39 · 1121 阅读 · 0 评论 -
最近的js复习笔记记录
原创 2023-10-30 15:51:42 · 120 阅读 · 0 评论 -
期约【Promise】相关的术语
如果异步代码正常结束(期约兑现),那这个结果基本上就是代码的返回值。如果异步代码没有正常结束(期约被拒绝),那这个结果就是一个Error对象或者某个其他值(如果非异步代码抛出了异常)。如果期约被拒绝,那这个值是一个错误,会传给使用catch()驻车的或作为then()的第二个参数注册的回调函数。而在讨论JavaScript期约时,对应的术语是得到“兑现”(fullfill)和被“拒绝”(reject)。如果第一个回调被调用,我们说期约得到兑现,而如果第二个回调被调用,我们说期约被拒绝。原创 2023-09-28 17:50:46 · 62 阅读 · 0 评论 -
用JavaScript初始化二维数组
对于c或java来说,初始化二维数组很简单,但js有些不一样。转载 2023-09-19 21:17:20 · 285 阅读 · 0 评论 -
JS38 高频数据类型
JS38 高频数据类型。原创 2023-10-26 19:35:37 · 101 阅读 · 0 评论 -
js双向绑定
题目来源:JS37 双向绑定。原创 2023-10-25 22:22:41 · 248 阅读 · 0 评论 -
【犀牛书】JavaScript 类型、值、变量章节读书笔记
当一个值无法触达时,或者说当程序无法以任何方式引用到这个值时,解释器就知道这个值以及用不到了,会自动释放它占用的内存(但是Javascript程序呀有时需要留意,不要让某些值在不经意间存续过长时间后仍可触达,从而导致它们无法被回收)。有一个例外:当0除以0时是没有意义的值,这个操作的结果是一个特殊的“非数值”(NaN,NotaNumber).此外,无穷除无穷,负数平方根或者用无法转换为数值的非数值作为算术操作符的操作数,结果也都是NaN。与其他JavaScript非原始值一样,函数和类也是特殊的对象。原创 2023-06-07 21:53:58 · 549 阅读 · 1 评论 -
JavaScript和java在词法结构上的不同点
在词法结构上,JavaScript和java有几个重要的不同点。下面是它们之间的主要区别:1.: JavaScript是区分大小写的,这意味着变名"myVariable"和"myvariable"是不同的。而Java则是大小写不敏感的,它将这两个变量名视为相同。2.: JavaScript和Java有一些共享的关键字,如"if"、"else"、"for"等,但它们也有各自独有的关键字。在JavaScript中,常见的独有关键字包括"let"、"const"、"var"等。原创 2023-06-06 18:05:41 · 447 阅读 · 0 评论 -
用问答的方式学习Require
或者,如果你的项目中已经使用了 CommonJS 规范导入模块,你可以考虑使用工具来将这些模块转换成 ES6 模块,以便在 Vue 3 中使用。是 CommonJS 规范中的一种导入方式,而 ES6 模块规范和 CommonJS 规范是不同的,它们的语法和语义有很大的不同。在 Vue 3 中,建议使用 ES6 模块语法来导入依赖。是一个动态导入函数,它不能在静态导入的位置使用。关键字来导入 CommonJS 模块,但是在浏览器环境中,导入模块,你可以使用上面我给出的使用。在 ES6 模块规范中,我们使用。原创 2023-03-22 22:39:49 · 1244 阅读 · 0 评论 -
js实现图片压缩【无需导包】
将图片压缩后,我们会得到一个 Base64 编码的字符串,该字符串包括了压缩后的图片数据以及一些元信息,如图片格式、压缩质量等。可以通过第二个参数来设置图片的压缩质量,该参数的取值范围是0到1,其中0表示最低质量(最高压缩),1表示最高质量(最低压缩,默认值为0.92)。就是如果后续需要把压缩后的图片比如说进行上传操作,我们得得到处理后图片的Base64 编码就好办了,其实这个 Base64 编码就在眼前。这里我再提供一个vue测试代码,可以在控制台中打印出图片压缩前后的size,以及图片压缩后的回显。原创 2023-04-07 03:06:51 · 886 阅读 · 0 评论 -
【CSS】BEM 命名规范
最近团队要考虑代码风格统一Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线:双下划线用来连接块和块的子元素_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密。转载 2023-11-19 20:18:53 · 1627 阅读 · 0 评论 -
CSS预处理器(如Sass或Less):变量、嵌套规则和混合器等高级功能
这些变量方便我们在多个地方重复使用,提高代码的可读性和可维护性。【在less中是使用`@`符号定义变量】原创 2023-11-29 19:31:32 · 810 阅读 · 0 评论 -
JavaScript基础复盘6
JavaScript添加删除数组元素的方法等原创 2023-01-31 15:10:28 · 57 阅读 · 0 评论 -
Javascript基础复盘5
这些对象用来表示和操作结构化的缓冲区数据,或使用 JSON(JavaScript Object Notation)编码的数据。顾名思义,基本对象是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。全局函数可以直接调用,不需要在调用时指定所属对象,执行结束后会将结果直接返回给调用者。这些对象表示按照索引值来排序的数据集合,包括数组和类型数组,以及类数组结构的对象。控件抽象可以帮助构造代码,尤其是异步代码(例如,不使用深度嵌套的回调)。错误对象是一种特殊的基本对象。原创 2023-01-31 13:39:37 · 215 阅读 · 0 评论 -
JavaScript遍历对象——for..in语句
使用 for ...in 语句来遍历,用于对数组或者对象的属性进行循环操作。k是属性名,obj【k】是属性值。原创 2023-01-31 12:58:00 · 197 阅读 · 0 评论 -
Javascript预解析
操作提到了该作用域的最前面,但是没有把赋值提前,所以运行到console.log(num)时,num变量已经存在但没有进行赋值操作,所以输出undefined而不报错。这里在前面直接调用fun(),运行结果是报错了,是因为这里的fun是个变量,不是函数,所以提升是把var fun;被提升到前面后(未进行赋值,也就是未进行函数定义),进行fun(),此时fun()函数未被定义,所以调用fun肯定会直接报错。(1)变量提升:就是把所有的变量声明提升到当前的作用域最前面,不提示赋值操作。原创 2023-01-31 01:16:40 · 261 阅读 · 0 评论 -
JavaScript基础复盘4
JavaScript作用域就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性,减少命名冲突。JS没有块级作用域,{}内写的变量外部也可以使用。原创 2023-01-31 13:03:52 · 337 阅读 · 0 评论 -
JavaScript基础复盘3
在一个程序执行的过程中,各条代码的执行顺序怼程序的结果是有直接影响的。很多时候我们药通过控制代码的执行顺序来实现我们药完成的功能。简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。原创 2023-01-30 23:34:14 · 239 阅读 · 0 评论 -
JavaScript基础复盘2
JAvaScript2原创 2023-01-30 21:23:58 · 56 阅读 · 0 评论 -
JavaScript基础复盘1
JS有三种书写位置,分别为行内,内嵌和外部。注意,引用外部JS文件,script双标签内部不可以写代码了。原创 2023-01-30 20:09:25 · 407 阅读 · 0 评论 -
CSS知识点精学7-小兔鲜项目实现案例
整合之前学习的内容实现了一个小兔儿鲜平台的案例实现原创 2023-01-09 20:27:58 · 1165 阅读 · 1 评论 -
CSS知识点精学6-精灵图、背景图片大小、文字阴影、盒子阴影、过渡
本篇博客讲解了一些样式设置,精灵图、图片背景大小、文字阴影、盒子阴影和过渡。原创 2023-01-09 12:24:59 · 2054 阅读 · 0 评论