- 博客(23)
- 收藏
- 关注
RSS订阅原创 【前端实战】使用 BroadcastChannel API 实现跨标签页通信
是 HTML5 新增的一个 API，用于在同源的不同浏览器窗口、标签页、iframe等之间进行实时通信。更高效：不依赖storage事件，性能更好。无大小限制：没有的 5MB 大小限制。支持复杂数据类型：可以传输复杂的数据结构，如对象、数组等。原生支持跨标签页通信：使用简单，易于实现。通过，我们可以轻松实现跨标签页的实时通信，避免了传统方法的诸多限制。在实际开发中，如果你需要在同源的不同标签页之间进行数据交互，不妨考虑使用。同时，要注意浏览器的兼容性问题，确保你的目标用户使用的浏览器支持该 API。
2025-04-14 12:02:55
922
原创 【JavaScript】超实用！js实现金额数字转中文读法
通过以上的代码实现，成功地完成了一个满足财务标准的金额数字转中文读法的功能。这个函数支持字符串输入，最大可支持到兆级数字，并且可以选择是否对小数部分进行四舍五入。
2025-04-14 10:58:51
282
原创 【前端网络请求】XHR封装，支持文件上传、进度监控、混合字段传输
通过封装简化调用：通过高阶函数减少重复代码。功能复用：一套代码支持文件上传、进度监控、普通请求。可维护性：模块化设计，各函数职责清晰。如果你需要更强大的功能（如拦截器、自动重试），可以在现有代码基础上扩展。
2025-04-13 10:58:19
601
原创 【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程
XHR是「老大哥」：虽然代码多，但兼容性好，适合需要支持古老浏览器的项目Fetch是「新宠儿」：语法简单功能强，现代项目首选，但要记得处理HTTP错误核心流程不变：不管用哪个工具，都是「发起请求→处理响应→处理错误」这三步。
2025-04-13 10:56:31
491
原创 【前端小技巧】实现详情页滚动位置记忆，提升用户体验
在前端开发中，我们常常会遇到这样的需求：当用户在一个页面中浏览了一部分内容，跳转到其他详情页后，再回来时希望能回到之前浏览的位置。今天就通过一段有趣的代码，给大家详细讲解如何实现这个功能，让你的网站更具用户友好性。想象一下，你在一个电商网站浏览商品列表，列表很长，你好不容易找到了心仪商品的详情介绍部分。这时，你突然想看看其他商品的类似介绍，点击跳转过去后，当你再次回到这个商品详情页，页面自动回到了你之前看到的位置，是不是很方便？我们今天要实现的就是这样的效果。在我们的示例代码中，页面有一个导航栏，点击不同的
2025-04-12 15:23:40
1063
原创 【JavaScript】对 Proxy 与 defineProperty 的理解和运用场景
Proxy和都为开发者提供了强大的数据劫持能力。在实际项目开发中，若只是简单劫持属性的读写操作，并且对兼容性要求较高，是不错的选择。要是需要更丰富的功能，如拦截多种类型操作，那么Proxy无疑更为合适。希望通过本文的介绍，能帮助大家深入理解这两种技术，并在开发中灵活运用。
2025-04-12 13:34:26
831
原创 【Javascript】页面并发任务过多？这个并发限制的异步调度器帮你实现控制并发数
通过上述代码，我们实现了一个带并发限制的异步调度器Scheduler。它能够有效地控制同时运行的任务数量，避免资源过度占用。在实际应用中，我们可以根据需要调整的值，以满足不同的并发控制需求。同时，该调度器的实现思路也可以应用到其他类似的场景中，帮助我们更好地管理异步任务。希望本文对你理解异步调度器的实现有所帮助。如果你有任何疑问或建议，欢迎在评论区留言讨论。
2025-04-11 00:16:04
557
原创 【js异步任务】多次触发异步任务时，只留最后一个结果
优化后的单一职责：类仅负责任务状态管理，具体异步逻辑通过参数传入，解耦度高。状态自管理：自动重置状态、统一错误处理，减少手动干预。参数灵活runTask函数兼容两种调用方式（指定延迟+回调 / 仅回调），适配不同场景。在实际开发中，可根据需求替换为真实的异步函数（如axios请求、数据库操作等），快速构建健壮的异步任务管理方案。通过这种封装，既能保持代码简洁，又能高效处理复杂异步场景，推荐在中大型项目中应用。如需进一步优化或定制功能，欢迎在评论区留言讨论！
2025-04-11 00:07:06
370
原创 JavaScript 解析字符串中的 JS 执行方法全解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { padding: 0;
2021-04-21 16:12:02
1494
1
原创 js获取当前日期，或者前N天，后N天的日期
function today(day) { var tempDate = new Date() // 获取今天的日期 tempDate.setDate(tempDate.getDate() + (day || 0)) // 今天的前day天的日期，day自定义 endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate() return endDate}...
2021-04-21 15:25:08
180
1
原创 jeecgboot中，修改请求方式加入阻止重复请求的方法。
全部request.js代码import Vue from 'vue'import axios from 'axios'import store from '@/store'import { VueAxios } from './axios'import { Modal, notification } from 'ant-design-vue'import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'/** * 【指定
2021-04-14 15:53:49
1977
原创 uniapp中swiper组件禁止上下滚动
方法一：swiper使用position: absolute;绝对定位，然后再覆盖一层<view></view>。方法二：给<swiper-item>加事件<swiper-item @touchstart.stop="catchTouchMove"> <view>.........</view></swiper-item>catchTouchMove(){ return;}方法三：可以一起使用^ _
2021-01-18 18:33:45
1682
原创 css3电池充电特效
<html><head> <title></title> <style> html, body { width: 100%; height: 100%; display: flex; background: #e4e4e4; margin: 0; } .container { margin: auto; text-ali
2020-11-27 10:29:19
793
原创 a-input-number设置金额格式，保留2位小数点
<a-input-number @change="onChange" :default-value="1000" placeholder="请输入总金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')" :precision="2" />
2020-11-27 10:27:13
7755
2
原创 jeecg配置开发环境,测试环境,生产环境
1、添加环境文件2、修改package.json文件配置3、修改public/index.html文件
2020-11-27 10:16:30
971
原创 使用jq仿antd Message全局提示功能
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>message</title> <style> /* 全局提示--start */ .mes
2020-07-10 22:03:41
583
原创 jq中动态加DOM后进行循环倒计时
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>循环倒计时</title></head><body> <div id="app"&g
2020-07-10 09:47:24
267
原创 React中添加tab切换事件，ts写法
import React, { Component } from 'react';class Sidebar extends Component { state = { activeUrl: '/', routerList: [ { url: '/', icon: '', pathName: 'home' ...
2019-03-28 10:07:39
2422
原创 Angular中监控DIV层中的scroll事件
1、先添加 angular 生命周期钩子：ngAfterViewInit() 钩子是在组件视图或者子组件视图初始化完成之后调用。 ngOnDestroy() 钩子是当Angular每次销毁指令/组件之前调用。 ngAfterViewInit() { this.ngScroll(); } ngOnDestroy() { this.rmScroll();...
2019-03-05 16:49:40
3226
原创 解决cordova在android 9中提示Detected problems with API 弹窗
1.找到文件CordovaActivity.java： 2.首先导入下边代码，不然打包出错：import java.lang.reflect.Method;import java.lang.reflect.Field;3.添加方法调用： public void onCreate(Bundle savedInstanceState){ ... //忽略...
2019-02-19 12:13:53
1375
原创 jquery极致简单的tab切换
简单、容易理解，适合jq初学者。保存html代码于本地，既可运行查看效果。jquery极致简单的tab切换 body{margin: auto;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} ul,li{list-style:
2018-02-06 17:43:29
285
原创 解决Swiper4(缩略图控制 / 无限循环)缩略图小于4张出错解决方法
#这段代码和官方案例有3处修改，Swiper4版本#1、做了页面上是否有“swiper-container”的判断，目的防止页面上没有类名出现js报错。#2、定义了“num”变量，目的给loopedSlides传动态值，这样改变swiper-slide的数量时不用再去修改它。#3、判断了swiper-slide的数量是否大于3个，并给缩略图中的swiper都加进centeredSlid
2018-02-06 16:17:00
8461
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人