- 博客(33)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 js实现浏览器不同页签之间通信
1.创建一个SharedWorker实例，并在其中编写处理消息的代码。一. 使用BroadcastChannel。二. 使用SharedWorker。
2024-03-29 13:59:44
309
原创 js 大文件切片，中止上传，上传进度，断点续传
背景介绍：当涉及大文件上传时，一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担，还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传，并解释如何处理断点续传、并发控制以及上传取消等问题，用到的知识点有大文件切片、中止上传 、上传进度、断点续传、并发数量控制。
2023-08-10 17:42:13
1139
1
原创 手写一个EventBus
手写一个EventBus观察者模式和发布订阅模式具体的写法和区别没有官方的定义，下面这种写法反而更常见。class EventBus { map = {} on(type, handler) { this.map[type] = (this.map[type] || []).concat(handler) } fire(type, data) { this.map[type] && this.map[type].forEach(handler
2022-09-30 14:17:15
140
原创 js复制功能
function (item) { var input = document.createElement("input"); // 创建input对象 input.value = item.configure; // 设置复制内容 document.body.appendChild(input); // 添加临时实例 input.select(); // 选择实例内容 document.execCommand("Copy"); // 执行复制 document.body.removeChild(
2022-04-29 15:54:28
223
原创 文件上传&下载
downloadFile(id).then(res => { const link = document.createElement('a') link.href = window.URL.createObjectURL(res) link.download = data.enclosureName document.body.append(link) link.click() window.URL.revokeObjectURL(link.href)}).catch(err
2022-04-10 16:19:51
358
原创 git 仓库迁移
#删除远程仓库git remote rm origin#添加新的仓库地址git remote add origin git@gitee.“地址”#本地切换到对应分支git checkout “分支名”#推送到对应分支git push -u origin “分支名”
2022-03-29 10:22:38
64
原创 从零搭建qiankun
在说qiankun之前先了解下Single-spa ,Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如:在同一页面上使用多个前端框架 而不用刷新页面 (Vue,React, AngularJS, Angular, Ember, 你正在使用的框架)独立部署每一个单页面应用新功能使用新框架，旧的单页应用不用重写可以共存改善初始加载时间，迟加载代码qiankun 是一个基于 singl
2021-10-14 19:34:29
361
原创 css切入动画
1.自下而上.class{ animation: slide-down 0.3s ease-in-out;}@keyframes slide-down{ 0%{transform:translateY(100%);} 100%{transform:translateY(0px);}}2.自上而下.class{ animation: slide-up 0.3s ease-in-out;}@keyframes slide-up{ 0%{transform:translateY(
2021-06-23 16:49:43
692
原创 微信小程序toast组件，toast展示不全？
背景：因为小程序toast提示只支持2行，有些情况下，后台返回超过2行toast提示，在电脑端编辑器显示没有问题，但是放到真机上测试会出现展示不全，索性写了一个toast组件，成功解决此问题，我写的toast组件是支持点击穿透，想弄成可配置项可自行添加，css穿透属性为（pointer-events: none;）toast组件使用1.组件基本用法<toast wx:if="{{innerText.length}}" bindHideToast="bindHideToast" innerTex
2021-05-21 15:22:59
2763
原创 echarts立体柱状图
var xData2 = ["容城谷庄", "雄县七间房", "安新三台", "雄县张岗", "安新寨里", "ewewe"];var data1 = [30, 20, 30, 20, 20, 40];option = { backgroundColor: '#021132', grid: { left: 100, bottom: 100 }, xAxis: { data: xData2, axisTick
2021-04-09 10:51:38
725
原创 wx.redirectTo销毁中间页
在开发过程中遇到有流程的页面，左上角返回可以指定返回的页面，但是物理返回键就没法干预了，大概的逻辑是这样的A->B-C,C页面使用物理返回键返回至A页面，A页面再返回不会返回至C页面，花费一点时间看了微信小程序文档，经过自己摸索发现wx.redirectTo可以实现该需求。C页面代码/** * 生命周期函数--监听页面卸载 */ onUnload: function () { wx.redirectTo({ url: 'A页面相对路径?back=1' })
2021-04-02 15:18:38
936
原创 微信小程序弹窗组件
弹窗组件使用1.组件引入方式，需要引入组件的json中添加组件的相对位置{ "usingComponents": { "modalView": "相对位置" }}2.组件基本用法两个按钮<modalView show="{{showComponents}}" modalValue="{{modalValue}}" bindCancel="bindCancel" bindConfirm='bindConfirm'></modalView>一个按钮&l
2021-04-01 15:03:27
983
原创 Echarts Y轴遮挡解决方案
这里写自定义目录标题Echarts Y轴遮挡解决方案被遮挡图片展示实现过程Echarts Y轴遮挡解决方案背景：在做手机端的时候要实现图表展示，但是Echarts有个通病，就是对小屏幕的浏览器不太兼容，开始尝试设置绑定div的样式，加上padding :0发现不管用，用谷歌浏览器调试发现Echarts是用cavas绘制的，根本不能通过添加样式解决问题，后来花了一点时间研究，成功解决了两侧遮挡的问题被遮挡图片展示实现过程在option中添加以下代码：grid: { left: '
2020-12-04 15:59:54
6591
原创 视频全屏播放不显示遮罩？
video全屏播放显示遮罩需求是这样的，视频播放完成后会弹出一个遮罩，当视频不是全屏的时候，遮罩可以正常显示，但是当视频是全屏的时候，遮罩不会显示出来，我当时在网上查了很多资料，都没能给出一个合理的方案，于是我就从video插件开始入手，于是我找到了解决方案，就是video.js。为什么我们不能通过z-index实现呢？video在全屏播放时候设置z-index不管用，因为全屏播放当前视频的显示会比任何元素的显示层级高，并且根本就不能在样式中找到z-index，设置z-index就更不管用了。所以不管
2020-08-12 16:00:18
1368
1
转载 浅谈Event Loop
讲Event Loop之前，先说一下JS的特点，Javascript是一个单线程非阻塞（只有一个主线程，也就是它一次只能执行一段代码）、异步、解释性脚本语言。如果遇到耗时特别长的任务，网页就短时间不会有响应，造成一种“假死”的现象。你也许会问，JavaScript为什么是单线程，难道不能实现为多线程吗？这跟历史有关系。JavaScript从诞生起就是单线程。原因大概是不想让浏览器变得太复杂，因为多线程需要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来说，这就太复杂了。后来就约定俗成，J
2020-06-21 16:45:49
136
转载 代码规范
原文链接：https://blog.csdn.net/caijunfen/article/details/86548895### Vue 开发规范目录及说明本文档为前端 vue 开发规范规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范规范目的为提高团队协作效率便于后台
2020-06-06 12:13:45
1481
原创 element 表格切换页面数据回显
在写业务过程中，遇到的需求是，element 表格切换分页器、和切换当前页面保留之前选中数据。首先先介绍一下事件，官方文档里有，会的可以直接跳过。@selection-change表示当前页选中的数据@row-click表示点击当前行的事件（这个很重要，如果没就不会回显数据），并且返回值必须是当前行的唯一值<el-table :data="tableData" ref="multipleTable" @selection-change="ha
2020-05-23 10:27:09
1106
1
原创 面试题目：JS数组扁平化、去重、排序
已知数组let array = [[1,5,4,8],[[5,4,8],[5,10,12,15,4,[9,[4]]]],45,2,4,1]，用js编写一段代码将这个array扁平化，得到一个无重复且升序的数组。1.首先是将该数组扁平化处理let newArr = array.toString().split(',')或者使用正则let newArr = JSON.parse("[" +JSON.stringify(array).replace(/(\[\]\,)|[\[\]]*/g, "") +
2020-05-14 13:06:25
238
原创 js判断两个数组有共同参数
1.使用内置的ES6函数some（）遍历第一个数组的每个元素并测试该数组。2.在第二个数组中使用内置函数include（）来检查元素是否在第一个数组中。3.如果元素存在，则返回true，否则返回falselet array1= ['a', 'b', 'c', 'd']; let array2= ['e', 'f', 'g', 'h'] compare(arr1, arr2) { return arr1.some(item => arr2.includes(item)) }
2020-05-14 11:45:10
988
原创 js创建对象的几种方式
1.字面创建var person ={ name: "李磊", age: 21, sex:"男", say: function(){ alert(this.name); } };2.调用构造函数var person = new Object();person.name = ...
2020-01-07 15:36:37
103
原创 vue+electron打包后页面空白
本地pc开发测试都是正常的，但是在把代码打包之后，访问项目首页总是白屏，特别的费解。上面的图片是我打包后的截图，页面是空白的，控制台也不报错。分析原因第一种：一般情况下首先先确定是不是路径的问题，如果是路径问题的话修改路径。第二种：由于把路由模式mode设置成history了，默认是hash。解决办法：如果router/index中配置的默认模式是history,那么打包后就是空...
2019-12-05 14:44:18
10933
1
原创 基于vue cli3实现甘特图拖拽
基于vue cli3实现甘特图拖拽因为工作中要用到甘特图，所以我在网上搜索可以用的甘特图，搜索了好多，但是网上搜到大多数都很鸡肋，不能直接使用，最后我在github上搜索到一个相对成熟的甘特图。附上链接https://github.com/w1301625107/Vue-Gantt-chart刚开始我看不懂这个博主写的代码，于是想自己写，但是尝试了几天，最后还是以失败告终。没办法活是我自己的，...
2019-11-14 17:50:34
5560
13
原创 基于vue-cli3实现视频自动播放和监听播放进度
**基于vue-cli3实现视频自动播放和监听播放结束**近期有个需求，大致内容是进入答题页面前要自动播放一段视频，视频播放完毕，方可答题，下面是我实现的过程。视频路径一定要在public文件下，public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀。autop...
2019-10-17 13:03:55
11141
9
原创 vue+element ui 实现跨题跳转
vue+element ui 实现跨题跳转在我们平时开发过程中，常规编写答题是做完上一道就会跳转到下一道题，但是我最近遇到的需求是有一定的逻辑性，比如我选择不同的选项，会跳转到相对应的题目，由于代码量过多，所以我把部分关键代码展示出来，下面是我实现的过程。我的题有单选和多选，所以我用v-if判断显示和隐藏。:disabled="disabledInspect"是控制答题过程的可操作性，也就是...
2019-09-19 20:32:28
1618
2
原创 vue+element ui 实现新建编辑共用一个模态框
vue+element ui 实现新建编辑共用一个模态框在我们开发过程中常常会遇到新增和编辑模态框布局类似，只是一个带参一个不带参的区别，那么我们写两个模态框也可以实现，为什么不这么做呢？答案是我能用一百行可以实现的功能，为什么要用两百行实现呢？有的人说多写一个模态框无所谓，那么有五十个页面呢？所以为了我们方便开发，减少代码量，新增和编辑公用一个模态框是很有必要的，下面就展示一下我是如何实现的...
2019-08-28 10:36:16
6094
史上最全 leaflet Demo 合集
2023-04-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人