![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
开发实用经典
文章平均质量分 84
html、html5、css5、javascript、es6、vue、react
夲奋亻Jay
童鞋们,可以的话帮忙点点赞和收藏!非常感谢!需要博主共享哪些前端技术资源的或者有什么难题不好解决,也可以私信,博主在对解决问题和技术突破有很大热情的,很欢迎叨唠!
展开
-
工作中7 个常用的 JS 代码片段
日常开发中,我们经常会用到很多通用的 JS 代码,比如:复制内容、从 URL 中获取指定参数 等这些代码通常有固定实现,即:代码片段。所以,为了方便大家的开发,今天咱们就来看看常用的 7 种代码片段。原创 2024-05-29 10:47:09 · 406 阅读 · 1 评论 -
赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
这篇文章封装了weboskect,完美支持了断网重连、自动心跳的功能,且完全兼容原生写法,无任何学习负担,开箱即用!但美中不足的是,断网重连时间、心跳数据内容目前都是写死的,大家可以根据自己的情况做一些更改,让它更灵活!我的博客只写前端博文,点击我去看更多喜欢的前端博文,欢迎大家一起讨论学习!原创 2024-05-29 10:43:02 · 465 阅读 · 1 评论 -
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
基本的思路是这样的,你也可以根据自己的业务需要,自己修改。比如抽离上面的方法或逻辑,单独封装。你也可以添加接口失败重连的逻辑。你也可以使用数据加密传输,例如sm4等。原创 2024-05-27 09:14:16 · 433 阅读 · 0 评论 -
前端开发怎么编写出优质高性能的代码
编写优质高性能的前端代码是前端开发人员的重要任务,它不仅关乎用户体验,也影响着网站的加载速度和运行效率。以下是一些编写优质高性能前端代码的通用建议: 理解性能指标:了解如何衡量性能,比如页面加载时间、原创 2024-05-12 15:34:31 · 251 阅读 · 1 评论 -
vite项目优化高级特性:代码分割、分块打包、动态导入、按需加载使用案例
Vite 是一个现代化的前端构建工具,它利用了浏览器原生 ES 模块导入特性来提供快速的冷启动和即时的模块热更新。Vite 在开发环境下使用原生 ES 模块,而在生产环境下则使用 Rollup 进行打原创 2024-05-10 12:35:45 · 1106 阅读 · 2 评论 -
webpack项目优化高级特性:代码分割、分块打包、动态导入、按需加载使用案例
在 webpack 中,代码分割、分块打包、动态导入和按需加载是提高应用性能的关键技术。以下是这些特性的使用案例和配置方法。 代码分割(Code Splitting) 代码分割是将代码库分割成多个包,原创 2024-05-10 12:27:08 · 401 阅读 · 0 评论 -
webpack性能分析和原理
在 Vue 2 项目中使用 webpack 进行性能分析和优化是一个重要的环节,因为性能优化可以提升应用的加载时间和运行效率。以下是一些性能分析工具和方法,以及 webpack 优化的原理。原创 2024-05-10 09:56:21 · 749 阅读 · 0 评论 -
webpack高压缩实现案例和原理
LESS 和 Sass 都是 CSS 预处理器,它们扩展了 CSS 的功能,允许使用变量、嵌套规则、混合(mixins)、函数等功能来使 CSS 更易于维护和扩展。以下是一些 LESS 和 Sass 的常用方法封装和使用案例。原创 2024-05-10 09:24:48 · 274 阅读 · 0 评论 -
Css预编译less、sass常用方法封装和使用案例
LESS 和 Sass 都是 CSS 预处理器,它们扩展了 CSS 的功能,允许使用变量、嵌套规则、混合(mixins)、函数等功能来使 CSS 更易于维护和扩展。以下是一些 LESS 和 Sass 的常用方法封装和使用案例。原创 2024-05-09 16:24:24 · 333 阅读 · 0 评论 -
深入理解javascript的 实时通讯WebSocket详解、封装、使用案例
深入理解javascript的 WebSocket详解、封装、使用案例原创 2024-05-09 14:25:54 · 604 阅读 · 0 评论 -
深入讲解javascript的reduce使用、封装和多种场景案例
reduce()是JavaScript中数组对象的一个高阶函数,用于对数组中的每个元素执行一个指定的回调函数,并将结果累积起来。下面我将深入讲解reduce()方法的使用、封装和多种场景案例。 red原创 2024-05-09 11:14:19 · 233 阅读 · 0 评论 -
便于开发快速理解Call 和 Apply的使用
call() 和 apply() 是 JavaScript 中 Function 对象的两个方法,它们用于调用函数,并且都可以接收一个参数列表,但它们在传递参数时的语法有所不同。原创 2024-05-08 10:07:14 · 358 阅读 · 0 评论 -
【Vue3】如何封装一个超级好用的 Hook !
Vue3 官方文档是这样定义组合式函数的。A "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.,一个利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数。 这个概念借鉴自 React 的 Hook。在 16.8 的版本中,React 引入了 React Hook。这是一项特别强大的技术,通过封装有状态的函数,极大提高了组件的编写效率和维原创 2024-05-06 11:07:42 · 1048 阅读 · 2 评论 -
30 个 Javascript 知识点总结,总有你不会的!
一行代码完成结构加赋值 我们日常经常使用结构赋值,一般都是先结构,再赋值,当然我们也可以一行就完成解构加赋值操作,看起来非常简化,当然可读性你懂得! 对基础数据类型进行解构 日常中我们应该用不到这样的原创 2024-05-06 11:05:13 · 281 阅读 · 0 评论 -
常用的前端JavaScript方法封装
常用的前端JavaScript方法封装原创 2024-05-06 09:38:26 · 661 阅读 · 0 评论 -
如何提升 JSON.stringify() 的性能?
在一些性能敏感的场合下(例如服务端处理大量并发),或面对大量 stringify 的操作时,我们会希望它的性能更好,速度更快。这也催生了一些优化的 stringify 方案/库,下图是它们与原生方法的性能对比原创 2024-05-04 07:45:12 · 588 阅读 · 0 评论 -
彻底理解flex弹性布局
Flex是Flexible Box的缩写,意为 弹性布局 ,用来为盒状模型提供最大的灵活性。原创 2024-05-03 07:59:07 · 452 阅读 · 0 评论 -
Vue指令实现原理
自定义指令是`vue`中使用频率仅次于组件,其包含`bind`、`inserted`、`update`、`componentUpdated`、`unbind`五个生命周期钩子原创 2024-05-02 08:21:08 · 1003 阅读 · 3 评论 -
这几个高级前端常用的 API,你用到了吗?
MutationObserverIntersectionObservergetComputedStyle()getBoundingClientRectrequestAnimationFrame原创 2024-05-01 12:08:14 · 672 阅读 · 0 评论 -
Vue3 的七种组件通信方式
本篇文章是全部采用的这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档[1]对两种方式的描述。开始搞事情~原创 2024-04-30 15:13:00 · 689 阅读 · 0 评论 -
分享30个用的最频繁的lodash工具函数~
你们再怎么实现,能实现得比lodash好?所以,我觉得有必要跟各位小伙伴分享一下,我在项目中用的最多的注:此文是总结一些常用的lodash方法,案例从文档拿的,介意的朋友请勿看~原创 2024-04-30 07:35:43 · 652 阅读 · 0 评论 -
快速搞定闭包与递归
快速搞定闭包与递归原创 2024-04-29 12:34:20 · 268 阅读 · 0 评论 -
前端屏幕适配的两种方案
前端屏幕适配原创 2024-04-29 12:21:51 · 551 阅读 · 0 评论 -
前端人必须掌握的抓包技能
时隔 3 年,重新接触了移动端 h5 页面开发,上一次还是大四实习。这一次是 hybrid 开发,涉及到 h5 页面与原生 app 的交互,h5 页面需要与原生打通登录态,以及调用原生app 的接口,比如调用原生相机进行二维码扫描。跟微信小程序开发不同,本地开发时微信有提供微信开发者工具,可以本地模拟调用而我这边需要每次都打包静态文件,上传服务器才能调试,非常麻烦。能不能在原生 app 加载线上 h5 时,跑本地的代码呢?答案是可以的,通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据,再原创 2024-04-29 11:09:43 · 679 阅读 · 0 评论 -
8 个很棒的 Vue 开发技巧
8 个很棒的 Vue 开发技巧原创 2024-04-29 09:50:23 · 358 阅读 · 0 评论 -
前端加载超大图片(100M以上)实现秒开解决方案
前端加载超大图片时,一般可以采取以下措施实现加速原创 2024-04-29 09:41:57 · 1019 阅读 · 0 评论 -
深入使用TypeScript高级用法
作为一门强大的静态类型检查工具,如今在许多中大型应用程序以及流行的js库中均能看到TypeScript的身影。js作为一门弱类型语言,在我们写代码的过程中稍不留神便会修改掉变量的类型,从而导致一些出乎意料的运行时错误。然而TypeScript在编译过程中便能帮我们解决这个难题,不仅在JS中引入了强类型检查,并且编译后的JS代码能够运行在任何浏览器环境,Node环境和任何支持ECMAScript 3(或更高版本)的JS引擎中。最近公司刚好准备使用TypeScript来对现有系统进行重构,以前使用TypeScr原创 2024-04-28 12:45:56 · 1022 阅读 · 0 评论 -
JavaScript开发规范
使用 2 个空格进行缩进,不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。统一使用单引号(‘’),不使用双引号(“”)。推荐不使用分号(js引擎会确定一个分号在什么位置应该存在并且自动添加)原创 2024-04-18 17:16:48 · 779 阅读 · 0 评论 -
HTML、HTML5开发规范
使用 2 个空格进行缩进,不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。统一使用单引号(‘’),不使用双引号(“”)。推荐不使用分号(js引擎会确定一个分号在什么位置应该存在并且自动添加)原创 2024-04-18 17:13:50 · 846 阅读 · 0 评论 -
CSS开发规范
(position, top, right, z-index, display, float等)(font, line-height, letter-spacing, color- text-align等)(background, border等)(CSS3)(animation, transition等)原创 2024-04-18 17:30:02 · 897 阅读 · 0 评论 -
前端开发--命名规范-非常值得大家停留脚步看看
自定义事件应始终使用 kebab-case 的事件名。不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase 或 PascalCase 了。并且v-on事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以将会变成——导致myEvent不可能被监听到。原生事件参考列表。原创 2024-04-18 17:24:20 · 1765 阅读 · 0 评论