- 博客(45)
- 收藏
- 关注
RSS订阅原创 防抖和节流使用场景
防抖的基本思想是，在函数需要频繁触发时，只有当事件触发完毕后一定时间内没有再次触发，才会执行该函数。节流的基本思想是，在函数需要频繁触发时，确保在一定时间间隔内只执行一次该函数。拖拽事件：拖拽元素时，mousemove 事件可能会非常频繁，使用节流确保拖拽事件处理函数在一定时间间隔内执行。防抖 适合处理频繁触发的事件，确保在事件结束后执行操作，常用于输入框搜索、按钮点击、延迟执行等场景。滚动事件：页面滚动事件可能会导致频繁触发，使用节流可以减少滚动事件处理函数的执行次数，优化性能。节流（Throttle）
2024-07-09 13:47:12
225
原创 3D 可视化大数据
Three.js 提供了丰富的功能和易于使用的 API，支持多种光照、阴影、材质和动画效果，非常适合用于大数据的可视化。D3.js 是一个用于数据驱动文档的 JavaScript 库，尽管主要用于创建基于 SVG 的数据可视化，但也可以结合 WebGL 或者 Three.js 实现更复杂的 3D 可视化。大数据的可视化通常需要处理大量的数据。综上所述，实现 Web 上的 3D 可视化大数据需要结合 WebGL、Three.js 或者其他适合的前端库和技术，以及合理的数据处理和优化策略。
2024-07-06 14:17:52
467
原创 tsconfig.json的include和exclude作用
如果不指定include属性，则默认当前目录下除了exclude之外的所有.ts、.d.ts、.tsx文件都会被编译。这意味着，通过include属性，开发者可以精确控制哪些文件应该被包含在编译过程中，这对于大型项目或特定功能模块的编译特别有用。exclude属性：指定不需要被编译的目录或文件。这在排除某些不必要的文件或目录时非常有用，例如测试文件、临时生成的代码或其他不需要编译的资产。通过exclude属性，可以确保这些文件不会被误编译，从而保持编译过程的效率和准确性。
2024-07-04 18:31:45
283
原创 在 JavaScript 中，??（双问号运算符）和 ?.（可选链运算符）区别
在这个示例中，user.social?.twitter 如果 user.social 存在且具有 twitter 属性，则返回 twitter 的值。在以上示例中，如果左侧的值为 null 或 undefined，则?它的作用是为了提供一种默认值的设定，当左侧的操作数为 null 或 undefined 时，使用右侧的操作数作为默认值。. 运算符用于在链式访问属性或方法时，避免因为中间属性不存在而导致的错误，而是安全地返回 undefined。
2024-07-04 15:21:09
407
原创 vue3动态组件defineAsyncComponent
当有多个页面有相同展示模块内容，可以使用动态组件defineAsyncComponent优化代码加载页面。
2024-04-07 00:54:03
281
1
原创 处理表单嵌套循环多个表单子组件校验提交方案，适用所有提交父组件循环嵌套多个子组件表单
3.使用 Promise 返回数据： 子组件向父组件传递校验结果时，可以返回一个 Promise 对象，在 Promise 对象中 resolve 传递校验结果数据。2.使用 Watcher 监听数据变化： 在父组件中使用 Watcher 监听子组件传递的校验结果数据，一旦数据变化就执行相应的操作返回结果。表单嵌套循环多个相同表单（父组件循环嵌套多个子组件表单）校验，使用循环form时，由于子组件提交异步问题，父组件没有不能获取最新的返回结果。1.提交的地方使用延时器处理异步获取正确的结果。
2024-04-07 00:45:36
305
原创 Vue 3 的hooks，实现了 ECharts 折线图实例的初始化、重置大小和销毁等功能。
最后通过 return 返回了一些可以在组件中使用的属性和方法，包括 chartRef、state 对象的响应式属性、以及 echartsResizeFun 方法。在 useEcharts 中，利用 Vue 3 的生命周期钩子函数和响应式数据，实现了 ECharts 实例的初始化、重置大小和销毁等功能。定义了一个名为 useEcharts 的自定义 Hook，用来管理 ECharts 实例的初始化、更新和销毁。引入了 ECharts 库和 Vue 3 中的一些 Hooks 和方法。
2024-03-20 10:32:51
337
原创 快速删除node_modules
不管你选择哪种方法，删除 node_modules 目录后，你可以重新运行 npm install 命令来重新安装依赖。这样可以保证你的项目处于干净的状态并重新获取所需的依赖项。请确保在删除 node_modules 目录之前备份任何重要的文件或数据。你也可以使用一些第三方工具来帮助快速删除 node_modules 目录，例如 rimraf。进入你的项目目录，确保当前目录下包含 node_modules 目录。进入你的项目目录，确保当前目录下包含 node_modules 目录。
2024-03-15 18:37:08
3304
原创 devDependencies和dependencies区别
总的来说，dependencies 是生产环境必需的包，而 devDependencies 是开发环境中需要的包。当你使用 npm install --save-dev 或 npm install -D 命令来安装一个包时，该包会被添加到 devDependencies 中。在部署应用程序时，只会安装 dependencies 中列出的包，而不会安装 devDependencies。在部署应用程序时，devDependencies 中列出的包不会被安装，因为它们只在开发阶段需要。
2024-03-15 18:20:17
480
原创 wx.qy企业微信静默登录
有个坑在企业微信手机小程序正式环境点击三个小点的退出，在进入小程序页面就不会触发执行了，说是静默放到onshow里面，可是onshow函数上传图片或者文件页面都会触发全局的onshow函数，这里没有处理，有处理方案的大佬可以留言。
2024-03-09 16:40:31
261
原创 前端为什么使用svg替代css的icon图标
尽管 Font 图标在过去被广泛应用，但随着 SVG 图标的兴起和优势的体现，越来越多的项目选择使用 SVG 图标以解决上述问题。性能问题： 使用 Font 图标需要下载整个字体文件，而且可能会包含项目中用不到的图标，导致字体文件过大，影响页面加载性能。维护成本： 随着项目的发展和需求的变化，维护大量的 Font 图标可能会变得复杂，而且更新图标也需要更新整个字体文件。屏幕支持： 在一些低分辨率屏幕或特定浏览器中，Font 图标可能显示不清晰，失真或模糊，影响用户体验。
2024-03-09 16:21:18
249
原创 el-Message消息提示每次只弹出一个 + 设置全局message弹框的格式跳转并关闭
el-Message消息提示每次只弹出一个 + 设置全局message弹框的格式跳转并关闭
2022-11-04 12:21:35
1270
1
原创 本地存储封装
/** * @file 本地存储公共函数，不支持localStorage的fallback to sessionStorage * */export function setItem(itemKey, value) { if ( window.localStorage && itemKey != 'token' && itemKey != 'userInfo' && itemKey.indexOf('passwor
2022-02-25 13:03:09
414
转载 aixos拦截和响应这个你得知道
axios拦截响应在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。环境的切换我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。// 环境的切换if (process.env.
2022-02-25 13:01:36
212
原创 vue时间戳转格式化时间处理封装调用
mixin使用定义mixin.js文件export const dateFormat = { methods: { // 格式化时间格式 YYYY-MM-DD hh:mm:ss W星期 Q季度 S毫秒 formatTime(times, fmt) { //定义一个日期对象; var dateTime = new Date(times) //年 if (/(Y+)/.test(fmt)) { fmt =
2022-02-25 12:56:54
807
转载 前端开发浏览器兼容问题解决方案汇总
市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是自己的Presto内
2021-12-13 14:45:45
1351
原创 ES6和ES7及ES8新特性最新规范知识详细总结
一、ECMASript 相关介绍ECMA概述[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWfWai55-1637595380774)(images/微信截图_20201004101830.png)] Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其
2021-11-22 23:38:12
3653
1
原创 前端开发-Less快速掌握上手知识总结
一、Less概述Less官网网站http://lesscss.cn/https://less.bootcss.com/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrIXUheJ-1637595223146)(images/less_logo.png)]什么是LESS？LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言，可扩展
2021-11-22 23:34:11
2034
原创 前端开发-MongoDB快速掌握上手知识总结
01_MongoDB 基础入门数据库概述数据管理的发展历史数据库概念的演变与诞生经历了漫长的发展过程，从最开始的人工管理，到文件系统，再到数据库系统。每一个阶段的到来都伴随着新的技术突破。人工管理阶段20 世纪 50 年代，那是还没有诞生操作系统，计算机只是用于进行大规模复杂运算的机器，所有的数据都是通过外部磁带、卡带手工存储。导致的问题是，数据只归属于某一个程序，数据没有结构之分，所有的数据都以二进制的方式顺序存储在物理存储设备上，读取时也只能以固定的字节数进行读取，否则就会数据错乱。除此之
2021-11-22 23:26:55
769
原创 前端开发-CSS快速掌握上手知识详细总结
01_CSS基础前言最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)]HTML:结构层,Hyper Text Markup Language,超文本标记语言CSS:表现层,Cascading Style Sheets，层叠样式表JS:行为层,JavaScript，客户端脚本语言**网页的结构层（stru
2021-11-22 23:21:09
4880
原创 解决国内NPM安装依赖包速度慢问题，使用淘宝镜像
解决国内NPM安装依赖速度慢问题不知道各位是否遇到这种情况，使用NPM（Node.js包管理工具）安装依赖时速度特别慢，为了安装Express，执行命令后两个多小时都没安装成功，最后只能取消安装，笔者20M带宽，应该不是我网络的原因，后来在网上找了好久才找到一种最佳解决办法，在安装时可以手动指定从哪个镜像服务器获取资源，我们可以使用阿里巴巴在国内的镜像服务器，命令如下：npm install -gd express --registry=http://registry.npm.taobao.org只需
2021-11-17 17:54:55
384
原创 vue路由商品跳转详情页,地址栏添加id会出现id不正常显示，页面上通过地址栏传值时出现乱码的解决方法，id=%5Bobject%20PointerEvent%5D
路由商品跳转详情页,地址栏添加id会出现id不正常显示，解决了事件没有传id
2021-11-06 22:04:16
847
原创 SassScript快速上手掌握的详细知识点
SassScript在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。弱类型语言, 对语法要求没那么严格一、注释Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。插值语句 (in
2021-11-05 16:21:47
154
原创 sass详细知识点介绍（环境配置）
相关介绍一、CSS预处理器出现的原因无法嵌套书写导致代码繁重、冗杂、逻辑混乱。没有变量和样式复用机制，属性值只能以字面量的形式重复输出。# 总结：代码复用性低；不易于维护# 注：现在，现在的CSS是可以定义变量的！！！:root{ --red: #f3e1e1;}二、出名的CSS预处理器介绍1. SCSS/SASSSASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，
2021-11-05 16:20:12
1022
转载 vue插件汇总很全，赶紧收藏下
很全的vue插件汇总，赶紧收藏下原文博客转载：https://tangjiusheng.com/vue/155.htmlVue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview
2021-11-01 17:59:10
372
原创 前端开发-HTML快速掌握上手知识总结
网页的组成html,css,js三部分组成.html:结构css:行为js:表现*:w3c制定了html/css语法和标准,ECMA制定了行为标准.qq截图认字小技巧在选项栏里点翻译可以识别图片翻译字体复制vscode编辑器使用点击文件选项===》将文件夹添加到工作区 ====》选择文件路径或者拖拽文件####编辑器的扩展插件汉化插件 chinese打开浏览器 open in browser笔记插件Markdown All in OneMarkdown
2021-11-01 17:40:24
294
原创 javascript前端开发人员值得知道的知识点（包含vue，react，js，算法）等
原理思想diff算法React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度策略一（tree diff）：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。策略二（component diff）：拥有相同类的两个组件 生成相似的树形结构，拥有不同类的两个组件 生成不同的树形结构。策略三（element diff）：对于同一层级的一组子节点，通过唯一id区分虚拟DOM虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了
2021-11-01 17:25:04
1138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人