- 博客(52)
- 收藏
- 关注
RSS订阅原创 封装一个Element-ui生成一个可行内编辑的表格(vue2项目)
大致功能介绍,封装自定义指令,点击获得焦点,显示输入框,失去焦点显示文本内容,类型是字典决定类型,图片可以显示图片名还是上传图片。这个封装的是一个供整个项目使用的表格,可多次复用.放在一个全局使用的公共组件文件下.这里还有封装了一个文件上传的组件嵌套在表格中,算是拓展。
2023-10-17 20:59:10
1564
原创 如何用js检测用户的浏览器和设备类型
最后，该函数返回一个字符串，其中包含设备类型和浏览器名称的组合，例如 "Mobile端WeChat(微信)" 或 "PC端Chrome(谷歌)"，或者 "PC端other"（如果无法识别用户的浏览器或设备类型）。代码中包含了一系列条件语句，每个条件语句检测一个特定的浏览器或应用程序的标识字符串，例如微信、支付宝、QQ、新浪微博等。具体来说，它首先检测用户的设备类型，如果用户是在移动设备上访问网页，就会将。设置为 "Mobile端"，否则设置为 "PC端"。接下来，它检测用户所使用的浏览器，并将。
2023-09-22 17:23:55
395
原创 移动端调试工具vConsole
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。在public文件的index.html引入，并使用，需要的时候打开不需要就注释。在main.js中引入刚刚新建的vconsole.js。安利一款好用的移动端调试工具vConsole。官网:https://alloyteam.
2023-09-12 16:58:23
448
原创 获取当前时间并转换为想要的格式
转换为YYYY-MM-DD HH:MM:SS / YYYY.MM.DD HH:MM:SS 格式。转换为YYYY年MM月DD日/YYYY.MM.DD格式。转换为YYYY-MM-DD格式。
2023-09-06 15:44:39
345
原创 手写一个防抖节流函数及其使用场景
搜索框搜索输入。只需用户最后一次输入完，再发送请求手机号、邮箱验证输入检测高频事件 例如 resize 事件、scroll 事件手机号、邮箱验证输入检测都可以通过使用 setTimeout 来实现降低回调执行频率。节省计算资源函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 来实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
2023-09-06 11:51:05
111
原创 怎么实现数据中只有数字和文字,去除其他符号
你可以根据需要调整正则表达式来适应不同的字符集。在Vue.js中，将这段代码集成到你的组件中，以便在需要时处理字符串。，它匹配了除了字母（大小写）、数字和中文字符（包括汉字）之外的所有字符，并使用。，最终得到去除这些特殊符号的字符串。匹配除了这些字符之外的所有字符。上面的代码使用了正则表达式。方法将它们替换为空字符串。匹配字母、数字和中文字符，在方括号内表示取反，所以。用正则表达式即可完成。
2023-08-24 14:39:51
209
原创 小程序打包上线流程
3. 上传过程：将打包好的wxapkg文件上传到小程序平台，上传的过程中需要填写小程序的基本信息，包括小程序名称、描述、类目、开发者信息等。4. 审核过程：上传完成后，小程序平台会对小程序进行审核，审核的内容包括小程序的安全性、功能性、用户体验等。4. 审核：上传完成后，小程序平台会对小程序进行审核，审核的内容包括小程序的安全性、功能性、用户体验等。2. 打包过程：小程序的打包过程是将前端代码和后端代码打包成一个wxapkg文件，这个文件包含了小程序的所有资源文件和代码。三、小程序的打包上线注意事项。
2023-08-23 20:35:00
2243
原创 单行多行文本溢出显示省略号
是一个非标准的WebKit属性，在某些浏览器中可能不被支持。为了兼容性，你可能需要添加一些浏览器前缀或考虑使用JavaScript等其他方法来实现多行文本的省略号显示。由于上面的二个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个 webkit- 来兼容一部分浏览器。属性来控制文本的换行和溢出隐藏。属性来实现文本溢出显示省略号。在CSS中，你可以使用。
2023-07-25 22:31:59
400
原创 vue中的动态路由怎么配置
route 是“路由信息对象”，包括 path，params， hash，query， fullPath, matched，name 等路由信息参数。也就是普通配置配置路由格式:/router传递的方式:对象中使用query的key作为传递方式传递后形成的路径: /route?$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。通过$route.params.userid获取传递的值。传递后形成的路径:/router/123。配置路由格式: /router/:id。
2023-07-25 22:17:05
1971
原创 什么是BFC,对BFC的理解
先来看两个相关的概念:Box: Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的，这个Box就是我们所说的盒模型。Formatting context: 块级上下文格式化，它是页面中的一块染区域，并且有一套染规则，它决定了其子元素将如何定位，以及和其他元索的关系和相互作用。块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视化CSS染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
2023-07-22 15:59:09
211
原创 flex 弹性布局
Flex是FlexibleBox的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align届性将失效。采用Flex布局的元素，称为Flex容器 (flex container) ，简称"容器"。它的所有子元素自动成为容器成员，称为Fex项目 (flex item) ，简称"项目"。
2023-07-22 15:05:57
117
原创 浅聊webpack的工作原理
参考文献: https://webpack.docschina.org/concepts/WebPack 是一个模块打包工具，可以使用 WebPack 管理模块。在 webpack 看来，项目里所有资源皆模块，分析模块间的依赖关系，最终编绎输出模块为 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。webpack是一个用于现代JavaScript应用程序的静态模块打包工具静态模块这里的静态模块指的是开发阶段，可以被webpack。
2023-07-20 10:24:46
1501
原创 什么是暂时性死区?
暂时性死区（Temporal Dead Zone，简称TDZ）是指在 JavaScript 中使用 let 或 const 声明变量时，变量在其声明之前不能被访问或使用的特性。在 JavaScript 中，变量声明提升是指在执行代码之前，变量声明会被提升到作用域的顶部。然而，使用 let 或 const 声明的变量会受到暂时性死区的限制。具体来说，当程序执行到包含 let 或 const 声明的代码块时，会创建一个称为暂时性死区的区域，该区域从声明开始直到块结束。
2023-07-16 23:35:41
1694
原创 快速理解并实现权限控制
权限控制是指在一个系统或应用中对用户或角色的操作进行限制和管理的过程。它用于确保只有经过授权的用户或角色能够执行特定的操作或访问特定的资源。权限控制是信息安全和访问控制的重要组成部分。权限控制的主要目的是保护系统的安全性和完整性，防止未经授权的用户获取敏感信息、执行非法操作或对系统进行恶意操作。通过权限控制，可以限制用户或角色的访问权限和操作权限，确保系统只能被授权的用户或角色使用，提高系统的安全性。
2023-07-16 17:12:18
2270
原创 组件间常见的传值方式
parent 和 $children（父子组件之间的直接引用）：通过parent属性可以直接访问父组件的实例，通过$children数组可以直接访问子组件的实例。$refs（通过引用访问组件实例）：通过ref属性可以为组件添加一个唯一的引用标识，在父组件中可以通过refs属性访问到子组件的实例。Emit（子组件向父组件传值）：子组件通过$emit方法触发自定义事件，父组件通过监听这些事件来接收子组件传递的值。Props（父组件向子组件传值）：使用props属性来向子组件传递数据。
2023-07-15 20:44:57
804
原创 v-if和v-show的区别?
由于v-show只是通过CSS控制元素的显示和隐藏，不会引起元素的销毁和重建，因此在频繁切换显示状态的场景下，v-show比v-if更具性能优势。请注意，由于`v-if`在条件为`false`时会销毁和重建元素，而`v-show`仅仅是通过CSS控制显示和隐藏，因此在一些特定的场景和需求下，选择合适的条件渲染指令非常重要。这对于节省内存和提高渲染性能是有益的。2.v-show:如果需要频繁切换元素的显示状态，或者条件经常改变，则使用`v-show`可以避免不必要的DOM操作，提供更好的切换性能。
2023-07-15 20:08:51
385
原创 在Vue2中v-model和.sync的区别
它们在使用方式和作用上略有不同，但都能有效地实现数据的双向传递，提升了应用程序的开发效率和用户体验。是一种简洁的双向数据绑定语法糖，适用于子组件内部与父组件数据的双向绑定。是用于实现父子组件间的双向数据绑定的两种不同方式。是一种手动的父子组件数据同步方式，适用于需要手动控制数据流的场景。是一个修饰符，通过在子组件接收父组件的属性时，使用修饰符。已经被废弃，而推荐使用事件的方式进行父子组件间的数据传递。当在子组件的输入框中修改内容时，父组件的。的值时，会自动更新绑定的父组件中的数据。来通知父组件属性的变化。
2023-07-15 16:57:36
888
2
原创 Javascript 如何实现继承？
通过来划分不同的继承方式，最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式，而extends的语法糖和寄生组合继承的方式基本类似。
2023-07-15 16:33:15
146
原创 WebSocket 的理解？应用场景？
WebSocket 是 HTML5 下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。它与 HTTP 一样通过已建立的 TCP 连接来传输数据，但是它和 HTTP 最大不同是：WebSocket 是一种双向通信协议。在建立连接后，WebSocket 服务器端和客户端都能主动向对方发送或接收数据，就像 Socket 一样；WebSocket 需要像 TCP 一样，先建立连接，连接成功后才能相互通信。
2023-07-14 19:42:38
176
原创 interface和type的区别
更适用于定义对象的形状和结构，以及类的实现。它在类型声明合并、扩展和语义性方面有一些优势。则更适用于定义复杂的类型别名，包括联合类型、交叉类型等。它在表达能力和灵活性方面略微超过了。：可以通过同名合并来扩展接口。当多个同名接口被定义时，它们会自动合并为一个接口。在实际使用中，可以根据具体需求和代码风格选择合适的关键字。是用于定义类型的关键字，它们有一些区别和不同的使用场景。：同名的类型别名会直接报错，不允许重复定义。在 TypeScript 中，
2023-07-13 23:26:46
137
原创 Hash 模式和 History 模式的区别?
Hash 模式和 History 模式是前端路由中常用的两种模式，它们在 URL 的形式和处理方式上存在一些区别。
2023-07-13 22:22:01
316
原创 vue3的hooks和vue2的mixins有什么区别
组合性和灵活性：Composition API 的 Hooks 允许开发者根据逻辑功能来组合和复用代码，可以将相关的逻辑和状态封装为自定义的 Hook 函数。语法和用法：Hooks 是在 Vue 3 的 Composition API 中引入的一种函数式编程的方式，而 Mixins 是在 Vue 2 中的一种对象混入机制。这两个示例展示了使用 Hooks 和 Mixins 的代码风格和组织方式的不同。Hooks 使用函数式的方式来定义逻辑和状态，而 Mixins 则是通过对象的方式进行组合和共享代码。
2023-07-13 18:19:57
1541
原创 vue3组合式API比起vue2选项式API的好处？
当使用Vue 3的组合式API时，相较于Vue 2的选项式API，可以更灵活地组织和复用代码逻辑，提高代码的可维护性和可测试性。选项式 API 以“组件实例”的概念为中心 ，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。总结:Vue 3的组合式API相对于Vue 2的选项式API提供了更好的代码组织和复用方式，增强了可维护性和可测试性。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。这样的实现方式会将逻辑代码分散在不同的选项中，使得代码组织不够紧凑和清晰。
2023-07-13 18:07:34
501
1
原创 如何统计字符出现频率
如果想要将它们视为相同的字符，可以在计算频率之前将字符串转换为小写或大写。如果存在，我们将对应的值加1；如果不存在，我们将创建该键，并将其值设置为1。需要注意的是，这个示例代码中，所有字符都被视为区分大小写的，所以。方法对字符数组进行迭代，并在每次迭代中更新一个累加器对象。在每次迭代中，我们检查累加器对象中是否已经存在当前字符。方法来统计字符出现的频率。将字符串转换为小写形式，然后再进行统计。，其中包含了字符出现的频率。，该对象用于存储每个字符的出现频率。，其中所有的字母都被转换为小写形式。
2023-07-12 23:21:25
627
1
原创 如何配置自己的eslint规则
通过配置适当的规则，可以检查常见的错误模式、不推荐的语法使用、潜在的性能问题等。提高代码质量：通过配置适当的规则，ESLint 可以强制执行最佳实践和规范，从而提高代码的质量。规则可以涵盖代码结构、命名约定、变量声明、错误处理、代码注释等方面，帮助你写出更可靠、可维护的代码。通过配置自己的规则，可以与项目中使用的工具集成，从而在开发过程中获得更好的开发体验和支持。统一的代码风格：通过配置 ESLint 规则，团队可以制定一致的代码风格和规范，使项目代码风格统一，易于阅读和维护。
2023-07-11 18:07:23
542
原创 用v3+ts写一个mini版todos(不用pinia)
这些都是 Web 开发中常见的基本技能和概念，通过编写一个待办事项应用程序，可以锻炼这些技能，将它们应用到实际的项目中。编写一个小型应用程序还可以提高你的编码能力、逻辑思维和问题解决能力。可以练习一个基本的增删改查,不用pinia可以更好的练习组件通信。
2023-07-11 17:13:07
70
原创 数组扁平化的常用方法
数组扁平化是指将多维嵌套的数组转换为一维数组的操作。当数组中包含嵌套的子数组时，扁平化操作会将子数组的元素提取出来，形成一个新的一维数组。例如:const nestedArray = [1, [2, 3], [4, [5, 6]]];通过数组扁平化，我们可以将它转换为一维数组：const flattenedArray = [1, 2, 3, 4, 5, 6];
2023-07-11 01:09:01
96
原创 用js写一个函数来判断数据的基本类型
这个函数将返回变量的数据类型，例如"number"、"string"或"object"。请注意，JavaScript中的。操作符都会返回"object"。如果要更精确地判断变量的类型，可以使用其他方法，如使用。操作符并不是完全准确的，它有一些特殊的行为和限制。例如，对于数组、null和函数，要编写一个函数来判断变量的数据类型，可以使用JavaScript的。操作符来获取变量的数据类型。然后，将类型作为字符串返回。这个函数接受一个变量作为输入，并使用。
2023-07-10 22:50:29
142
1
原创 用v3和ts快速封装一个的axios
如果错误的 HTTP 状态码为 401（未授权），则会删除用户信息并将用户重定向到登录页面，并在重定向时携带当前页面的地址，以便在登录后回跳到原来的页面。总的来说，这段代码封装了一个基于 Axios 的 HTTP 请求模块，提供了请求拦截器、响应拦截器和发送请求的方法，使得在项目中发送 HTTP 请求更加方便和统一化。是 10000，表示业务逻辑成功，将会将响应数据作为 Axios 请求的成功结果返回。函数是一个封装了 Axios 请求的函数，用于发送具体的请求。在拦截器的回调函数中，首先检查响应的。
2023-07-10 18:04:33
244
3
原创 for in 和 for of 有什么区别
循环只能用于可迭代对象，而不能直接用于普通对象。如果想要遍历普通对象的属性，仍然需要使用。是两种用于遍历数据结构的循环语句，它们在用法和功能上有一些区别。
2023-07-10 15:13:01
221
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人