- 博客(106)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 react性能优化篇之useCallback的使用场景及其深度解读
useCallBack不要每个函数都包一下，否则就会变成反向优化，useCallBack本身就是需要一定性能的useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变useCallBack需要配合React.memo使用作者：工边页字链接：https://juejin.cn/post/7107943235099557896来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...
2022-08-26 10:12:45
14564
8
原创 点击div、span、p等文本标签时隐藏光标的方法
/* 隐藏鼠标点击这些元素时出现的光标 */div, span, p { caret-color: transparent;}
2022-03-04 13:26:45
1065
转载 修改bootstrapTable(refresh)时候刷新的请求参数
monthPlanTable.getTableObj().bootstrapTable('refresh')默认请求数据{"sortOrder":"ASC","pageSize":10,"pageNumber":1}有时候跟我们后台接口参数名称有点区别，需要重新设置，方法如下：monthPlanTable.getTableObj().bootstrapTable('refresh',{ query: {pageSize: 12,pageNum:1,yearPlanId:yearPlanId}})
2022-03-04 13:24:12
1203
原创 js给元素添加css样式，加important不生效问题
需要在js里设置css样式，加important，发现并不生效，甚至样式都没有加上：// 点击事件 myChart.on('click', function(params) { var color = params.color; var id = params.data.id; $(`tr[data-uniqueid="${id}"]`).css('background', color+'!important'); })后来发现这样写是正确的：// 点击事件.
2022-01-24 13:30:11
2542
原创 iframe父子页面互相调用方法、获取变量、获取元素
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。1、iframe子页面调用父页面（1）方法parent.func()（2）变量parent.value（3）jquery元素$("div",parent.document)2、父页面调用iframe子页面（1）方法$("#childrenIframeId").eq(0)[0].contentWindow.func();（2）变量$("#ch
2021-12-22 09:34:16
3618
转载 销毁iframe
读到篇文章，mark一下。iframe src不设置为about:blank，内存不会释放掉，还必须用 iframe.document.write(''); 这样才能将内容清空但是这样处理之后任然会有500-1000K左右的内存残留，这就是ie6的iframe bug，动态创建的iframe总会耗费掉一些内存。function clearIframe(id){var el = document.getElementById(id),iframe = el.contentWind
2021-12-17 15:59:13
3514
转载 JS 获取浏览器窗口大小
常用:JS 获取浏览器窗口大小// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (window.innerHeight)winHeight = window.innerHeight;els
2021-11-24 13:21:56
8126
原创 用html自定义横向条形图
// 进度条图表function progressCharts(interfaceCharts, list) { var html = '<div id="progress_inner" class="progress-inner">', artArr=[], max=0; // 获取最大值 for(var i=0; i<list.length; i++) { artArr.push(list[i].art); } max = Math.max.apply(.
2021-10-25 10:46:31
1061
原创 echarts 在markpoint气泡里显示的最大值加上单位
markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ], label: { normal: { formatter: function(param) { return (.
2021-10-25 10:40:58
746
原创 echarts图例过长截断加省略号，并增加title
legend: { show: true, data: legendArr, type: 'scroll', orient: 'vertical', left: 10, top: 300, // selectedMode: 'single', formatter: function (name) { // if (!name.
2021-08-17 14:29:47
936
原创 echarts图例完全自定义（不用自带的图例）以及点击某一个图例只显示当前折线的功能
1，主要问题图例又多又长，如下图，echarts上的图例过多时是有分页，但是我这个分页又太多，看最后一条要点击好久，所以想着有滚动条方便一些。而且点击某一个图例只显示当前的折线，取消某一条的点击时展现左右折现。下面不多说，直接上代码吧，主要是应用legendselectchanged和chart.dispatchAction，大家可查看官网。2，代码<!DOCTYPE html><html lang="en"><head> <meta.
2021-08-17 14:19:43
2267
1
原创 echarts图悬浮窗数据自定义
tooltip: { trigger: 'axis', enterable:true, //鼠标是否可进入提示框浮层中 confine:true, //是否将 tooltip 框限制在图表的区域内 // alwaysShowContent: false, //是否永远显示提示框内容 .
2021-08-04 16:33:11
918
转载 echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts，当然也被其中的各种属性整的头大，记录一下其中遇到的问题。tooltip：鼠标悬浮时显示的提示框。今天想要记录的是【自定义提示框的内容】，如下图，鼠标悬浮时提示框内显示的内容格式为：年份 类型 <br> 装机容量：数据 单位<br> 增长率：百分比，那么如何才能自定义出来咱们想要的效果呢，代码如下： 1 2 3 4 5 6 7 8 9 10 11
2021-08-04 16:27:19
6125
转载 git | 修改分支名字
假设分支名称为oldName想要修改为 newName1. 本地分支重命名(还没有推送到远程)git branch -m oldName newName2. 远程分支重命名 (已经推送远程-假设本地分支和远程对应分支名称相同)a. 重命名远程分支对应的本地分支git branch -m oldName newNameb. 删除远程分支git push --delete origin oldNamec. 上传新命名的本地分支git push origin..
2021-07-20 10:22:35
108
转载 [git] 已经push的commit如何修改message
背景在使用git提交代码的时候，可能会出现message写错的状况，若是此时commit已经push到远程服务器了，修改起来就比较麻烦了。git下面整理了一下，修改历史中某几回commit的message的通用办法。服务器命令如下修复方式中，总共涉及这些命令，spa$ git log$ git rebase -i HEAD~5$ git commit --amend$ git rebase --continue$ git push -f注：在修复历史commit me
2021-07-12 16:20:07
2448
1
原创 js根据多个查询条件筛选数据
// 根据查询条件筛选数据function getJsonObj(params,dataArr) { var newArr = dataArr.filter(function(p) { var isFlag = false; for(key in params){ if(params[key] == ""){ isFlag = true; }else{ isFlag = params[key] == p[key]; } .
2021-07-12 13:08:48
849
原创 记录window系统命令
之前因为要下载低版本的谷歌浏览器做测试，不小心下了流氓安装包，捆绑了一大批流氓软件。卸载后还自动下载，循环往复，搞得我很崩溃……由于实在不想重做系统，于是我痛下决心要解决它们。以下分享我和流氓软件的对决。...
2021-07-07 13:54:46
81
原创 js正则表达式匹配任意字符（包括换行符）
相匹配html注释行中间的注释信息(<!--注释注释注释-->)，一开始是这么写的：let regExp=/\<\!\-\-(.*?)\-\-\>/g; 死活匹配不上，后来经过查找是发现注释中有换行符，没有被匹配。发现JavaScript中点号不匹配换行符。所以把点号换成[\s\S]就可以啦！let regExp=/\<\!\-\-([\s\S]*?)\-\-\>/g; ...
2021-07-07 13:43:52
2817
原创 chrome浏览器无法携带cookie的跨域问题解决
由于项目需要，不能在后台配置解决跨域，所以只能在浏览器上下手，着实折磨了我好一阵子。1. 问题描述平台跳转其他平台页面，并自动登录浏览器： chrome2. 解决方法 2.1 经查阅资料, chrome浏览器有跨域拦截，即sameSite。不同域下无法携带cookie。解决方法为在谷歌浏览器地址栏中输入chrome://flags/，将关于sameSite的属性设置为disabled，重启浏览器即可。这是针对80版本以上的chrome浏览器。 2.2...
2021-06-22 13:43:16
5973
3
原创 css文本超出宽度，省略号显示（包括展现两行）
// 一行.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}// 两行.ellipsis2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; .
2021-06-15 10:21:39
110
1
原创 js给div赋值时，值中含有html标签导致的问题
1，问题描述let value = '<a>.......</a>';$('div').taxt(value);// 期望展现// <a>.......</a>// 实际展现// .......html将a标签识别为标签，导致展现形式不是期望值。2，解决方法将“<” 和 “>” 进行转义，即可。如有需要，也可转义双引号。如下代码：let titleStr = value.replace(/</g, '&a
2021-05-14 14:41:26
296
转载 js获取当前时间的年月日时分秒以及时间的格式化
1.获取当前时间var myDate = new Date();2.获取时间中的年月日时分秒myDate.getYear(); // 获取当前年份(2位)myDate.getFullYear(); // 获取完整的年份(4位,1970-????)myDate.getMonth(); // 获取当前月份(0-11,0代表1月)myDate.getDate(); // 获取当前日(1-31)myDate.getDay(); /
2021-05-14 11:30:30
3836
原创 js 复制文本框内容
ElementObj.select();//选中input框或textarea文本域的内容document.execCommand("Copy");// 执行浏览器复制命令说明：1，ElementObj为输入框或文本框的js对象；2，只能复制 input 或 textarea 的内容，div等元素内的文本不可复制，如果想要复制的话，可以将内容赋值到隐藏文本域中。...
2021-05-14 11:24:39
663
原创 JS中switch case，多个case对应同一操作的写法
let paramArrayPOPParam = 0; switch (tabType) { case 'list_selRefOppPop': paramArrayPOPParam = 1; break; case 'list_selRefTranPop': // 多个case对应同一个操作 case 'list_selRefSrvPop': case 'list_selRefFuncPop': paramArrayPOP..
2021-04-25 16:14:34
1739
原创 tab页过多，展现按钮可左右移动tab页
1，结果如下图，tab太多，一行放不下，右侧展现左右按钮，鼠标移上tab页可左右移动2，代码/** * 功能按钮过多时，可左右移动 * @param {*} id 按钮区域id * @param {*} dom 按钮元素 * @param {*} btnclass 按钮样式 * @param {*} mp 每个按钮需要增加的宽度 * @param {*} n 隐藏按钮增加的个数 */ function btnShowOrHide(id, dom, btnclass='', m.
2021-04-22 15:12:41
1692
原创 echarts图 宽高自适应
let chartDom = document.getElementById(options.id);let myChart = echarts.init(chartDom);// 根据数据计算高度，宽度let autoHeight = numArr.length * 30; //每个节点高度设为30let autoWith = numLevel * 180; //每个层级宽度设为180//重新渲染myChart.resize({height:autoHeight, width: auto.
2021-04-22 09:25:21
281
原创 echarts 解决浮窗被遮挡
1，问题如下图，echarts 鼠标移上去展示的浮窗，超出容器时被遮挡。2，解决办法tooltip: { //提示信息 trigger: 'item', triggerOn: 'mousemove', confine: true //解决浮窗被截断问题 },3，官网解释4，最终效果...
2021-04-22 09:12:48
3464
2
原创 jquery 判断元素是否显示隐藏
1. 隐藏方式是通过css的 display:none || block实现的//隐藏if( $("div").css("display")==='none')//显示if( $("div").css("display")==='block')2. 隐藏方式是通过其他方式实现的，包括display: none ||block// 判断是否隐藏$("#div").is(":hidden"); //判断是否显示$("#div").is(":visible")...
2021-04-20 13:47:50
1783
原创 echarts 树状图
// 树结构function creatTreeCharts(options) { // 获取参数 options = this.getOptions(options); // 初始化树 this.initTree(options);}creatTreeCharts.prototype.getOptions = function(options) { // 参数 options = $.extend({}, { id: 'main', menuFloor.
2021-04-13 15:52:38
1125
原创 jquery 绑定未来元素事件
1，用js动态生成dom元素很常见，那么给这种动态生成的元素如何绑定事件呢？首先排除click，是肯定不好用的。下面来介绍集中方法。1) 直接行内绑定<div onClick="doSomething()"></div>2) delegate先看下官方解释$('body').delegate('div','click',function(){ // do something……})3）onon绑定结合了click和delegate二者的功
2021-03-16 15:53:34
1044
原创 js 深拷贝和浅拷贝
一、先看个例子这个问题相信大家都遇到过，首先定义个对象obj，然后在定义个对象obj2，将obj赋值给obj2，本意是想不破坏原对象obj，而对obj2的数据进行一些列操作。然而事与愿违，当我操作obj2.b.c = 3的时候，打印obj，发现obj的数据也被改了。这将导致一些列问题。这是因为var obj2 = obj，是浅拷贝。二、深拷贝和浅拷贝的区别浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；深拷贝（deep copy）：复
2021-03-16 15:13:02
135
转载 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQ
2021-03-12 16:41:25
151
原创 js new操作符都做了哪些事情
1，先来看段代码function Fn() { this.a = 1;}let fn = new Fn();console.log(fn)输出为：我们都知道 fn 是 new Fn 出来的 Fn 的实例对象。那么在这个过程中，new 到底做了什么呢？2，我们先来看我们已知到了什么1）fn 是一个对象2）fn.__proto__ === Fn.prototype3）构造函数 Fn 中的this指向为它的实例 fn4）返回这个对象那么这些已知点，就是 .
2021-03-12 15:26:52
846
1
原创 开发实用网站收藏
1，BootCDNhttps://www.bootcdn.cn/2，Can I Usehttps://caniuse.com/检查浏览器兼容性3，代码压缩https://tool.oschina.net/jscompress/4，url编码解码等http://www.bejson.com/enc/urlencode/#6
2021-03-08 16:32:37
58
转载 js 一维数组，转成嵌套数组
// 情况一：// 数据源var egs = [ {name_1: 'name_1...'}, {name_2: 'name_4...'}, {name_3: 'name_3...'}, {name_0: 'name_0...'}, ].reverse()// 最终想要的数据形式 // {name_1: 'name_1...', // children.
2021-03-08 13:40:43
737
原创 HTML5 WebSocket 的使用
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。1，用处webSocket是一种网路通信协议（TCP 的协议），他能弥补HTTP “只能由客户端发起通信，而做不到服务器主动向客户端推送信息” 的缺陷。比如聊天室场景，如果用HTTP协议的话，解决办法是“轮询，每隔一段时间就要发送一次请求，获取有没有最新的消息，这种方法效率低，并且浪费资源。而webSocket，它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信...
2021-03-01 13:47:18
238
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人