Web前端
JudyC
这个作者很懒,什么都没留下…
展开
-
flex1时内容溢出
flex: 1 时内容溢出原创 2022-11-10 15:06:28 · 2238 阅读 · 0 评论 -
antd Table 自适应滚动
antd Table 自适应滚动问题:antd的Table想要表头固定内容部分滚动的话必须给scroll设置固定值如:<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />需清楚地指明300or calc(100vh - 30px),而我需要Table高度自适应父div的高度即父元素div的高度初始化时是不定的,Table超出该div的高度时,内部自动发生滚动解决:const [scr原创 2021-08-11 15:53:43 · 5167 阅读 · 0 评论 -
antd Table拖拽乱序
1.data的每条数据需有index,并按index排序const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', index: 0, }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park',原创 2021-05-06 17:27:00 · 928 阅读 · 0 评论 -
阻止Popconfirm冒泡
在Popconfirm外面再包一层span。<span onClick={(e) => { e.stopPropagation(); }} > <Popconfirm className="ibm-iconBtn" key="delete" title="确认删除该条检验分类吗?" onConfirm={() => deleteLabClass(record.id)} okText="确认"原创 2021-05-06 17:22:25 · 3402 阅读 · 3 评论 -
Cesium Label遮挡
在二维场景下, Label标签被遮挡找了一下相关文档, label并没用 index相关属性.接着改变绘制顺序, 将label置于最后绘制, 仍然会被覆盖.最后使用的是eyeOffset属性, 设为负值则在更上层const label = entities.add({ position: Cesium.Cartesian3.fromDegrees(coor[0], coor[1], coor[2] + 50), label : { text: index + 1 + '',原创 2020-06-22 11:49:23 · 7197 阅读 · 8 评论 -
antd多个表单元素相互验证
遇到表单相互验证的地方比较少, 一般就是密码, 二次输入密码.这种验证是以第二个表单元素为主, 提示错误也只在第二个表单下提示.那么有两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢?场景:最大值: 需大于最小值和中间值最小值: 需小于最大值和中间值中间值: 需介于最小值最大值之间代码:1.render中表单元素<FormItem label="最...原创 2019-12-03 11:51:08 · 4331 阅读 · 4 评论 -
通过URLSearchParams更方便地截取参数
通过newURLSearchParams更方便地截取参数if(window.URLSearchParams){ const params = new URLSearchParams('sex=1&age=24&like=reading') params.get('sex') // '1' params.get('age') // '24' params.set...原创 2019-11-14 15:24:08 · 313 阅读 · 0 评论 -
深拷贝与浅拷贝(学习笔记)
基本类型:Boolean、Null、Undefined、Number、String、Symbol引用类型:Object、Array、Function(深拷贝和浅拷贝)一维数组的深拷贝slice()、concat()、Array.from()一维对象的深拷贝Object.assign()没有undefined、函数以及symbol值的对象深拷贝JSON.parse(JSON.strin...原创 2018-12-18 14:37:12 · 254 阅读 · 2 评论 -
雅虎34条军规(网页优化)
尽量减少 HTTP 请求个数——须权衡使用 CDN(内容分发网络)为文件头指定 Expires 或 Cache-Control ,使内容具有缓存性。避免空的 src 和 href使用 gzip 压缩内容把 CSS 放到顶部把 JS 放到底部避免使用 CSS 表达式将 CSS 和 JS 放到外部文件中减少 DNS 查找次数精简 CSS 和 JS避免跳转...转载 2018-12-10 15:34:24 · 725 阅读 · 0 评论 -
前端监控器Performance
performance的timing对象里,存储了各种与浏览器性能有关的时间数据。const { timing } = performance;const t = {};//DNS查询时间t.dns = timing.domainLookupEnd - timing.domainLookupStart;//解析DOM树时间t.dom = timing.domComplete - ...原创 2018-12-10 13:31:59 · 232 阅读 · 0 评论 -
各种协议(学习笔记)
TCP协议TCP协议是一种面向连接的、可靠的字节流通信协议。可靠性:数据校验:TCP在传输过程中可以通过校验和,确认和重传机制保证可靠传输。 数据顺序性:TCP给数据分节进行排序,并使用累计确认保证数据的顺序不变和非重复。 流量与拥塞控制:TCP使用滑动窗口机制来实现流量控制,通过动态改变窗口的大小进行拥塞控制。三次握手建立连接(客户端和服务端总共发送三个包)第一次握手:客户...原创 2018-12-10 12:51:21 · 490 阅读 · 0 评论 -
微信小程序图片懒加载实现
使用微信提供的 IntersectionObserver 对象IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见.在页面渲染开始时,通过这个api指明需要监听的元素,系统会自动去监听元素位置let data = list;<view wx:for="{{data}}" wx:for-item="item"> <...原创 2019-04-18 15:44:22 · 8170 阅读 · 1 评论 -
JS运行机制(学习笔记)
进程和线程:进程是一个工厂,工厂之间相互独立线程是工厂中的工人,多个工人(线程)协作完成任务工厂内有一个或多个工人-工人之间共享空间工厂的资源->系统分配的内存(独立的一块内存)工厂之间相互独立->进程之间相互独立多个工人协作完成任务->多个线程在进程中协作完成任务工厂内有一个或多个工人->一个进程由一个或多个线程组成工人之间共享空间->...原创 2018-12-07 15:15:30 · 309 阅读 · 0 评论 -
箭头函数的arguments
箭头函数的argumentsES5中的argumentsfunction func(a,b,c){ console.log(arguments[0],arguments[1],arguments[2]) //1,2,3}func(1,2,3)箭头函数是没有arguments的,那么我们用什么来代替呢?let func = (...rest) => { consol...原创 2019-02-20 11:01:35 · 8042 阅读 · 0 评论 -
for...of和for...in的区别
for…of和for…in的区别for…of 遍历获取的是对象的键值,for…in 获取的事对象的键名for…of 遍历当前对象不会遍历原型链,for…in 遍历对象的整个原型链,性能差不推荐for…of返回数组的下标对应的属性值,for…in 返回数组中所有可枚举的属性(包括原型链)...原创 2019-02-20 13:17:58 · 324 阅读 · 0 评论 -
ES6 Module(export与export default)
ES6 Module(export与export default)ES6 Module使用import关键字导入模块,export关键字导出模块ES6 Module是静态的,和var以及function一样具有提升效果ES6 Module自动采用严格模式(顶层的this返回undefined)ES6 Module支持使用export{&lt;变量&gt;}导出具名接口,或export de...原创 2019-02-20 14:09:53 · 846 阅读 · 0 评论 -
提取对象的 key:value 对
提取var obj = {x:1,y:2,z:3};var objEntries = Object.entries(obj);console.log(objEntries); // [[“x”,1],[“y”,2],[“z”,3]]转换回对象var entries = [["x", 1],["y", 2],["z", 3]];var obj = Object.fromEntries(...原创 2019-08-09 18:18:39 · 660 阅读 · 0 评论 -
JS私有类字段
class Dog { #sound = 'Woof! Woof!'; // this is private makeSound() { console.log( this.#sound ); }}// create instanceconst tommy = new Dog();tommy.makeSound() // Woof! Woof!//...原创 2019-08-07 18:05:10 · 377 阅读 · 0 评论 -
node之图片的base64及png转化
base64转pngconst fs = require('fs');const path = 'xxx/'+ Date.now() +'.png';//去掉图片base64码前面部分data:image/png;base64const base64 = data.replace(/^data:image\/\w+;base64,/, "");//把base64码转成buffer对象c...原创 2019-08-07 18:08:05 · 1298 阅读 · 0 评论 -
随机生成某个范围内的随机数(包含边界数)
生成一个0-1的随机数,用:Math.random()生成一个[n,m]范围内的随机数,用:Math.floor(Math.random()*(m-n)+n)生成一个[n,m]范围内且包含n和m的随机数,用:Math.floor(Math.random()*(m-n+1)+n))原创 2017-10-27 13:48:26 · 4512 阅读 · 0 评论 -
跨域(学习笔记)
协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。跨域是指服务端能收到客户端请求并正常返回返回结果,结果被浏览器拦截。PS:如果是协议和端口问题,“前台”无法解决允许跨域加载资源的标签:<img src="XXX"><link href="XXX"><script src="XXX">JSONP需要对方的服务器做支持..原创 2018-12-13 10:40:09 · 297 阅读 · 0 评论 -
长网页截图
注:本文只针对Chrome浏览器。打开 Chrome 浏览器,找到需要截图的页面在该页面右键,选择检查打开命令行:‘Ctrl’+‘Shift’+‘P’(Windows),‘Alt’+‘Command’+‘I’(Mac)命令行输入Screen,在模糊匹配的列表里面选择‘Capture full size screenshot’。ok,这样就截下来啦~~~~~...原创 2018-06-11 10:03:45 · 5904 阅读 · 2 评论 -
事件委托
做项目时遇到的问题:对图片列表中的图片单击删除,一开始是在每张图片上绑定的点击删除事件,后经大佬指点改为使用委托事件。虽然效果相同,但代码质量不同,而且能避免不必要的BUG。上代码:Jquery:<div class="col-xs-7 demo demo-noninputable cjy-InfoEntry-pic" id="cjy-InfoEntry-pic">...原创 2018-12-05 15:08:09 · 201 阅读 · 0 评论 -
快速创建空二维数组
首先来看看Array怎么生成空数组,w3c里面的解释:当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。假设我们要创建一个8*10的二维数组。var a=Array(8);for(var i=0;i<a.length;a++){ a[i]=Array(10);}console.log(a)输出如下:这样就原创 2017-10-26 13:54:04 · 5459 阅读 · 0 评论 -
立即调用的函数表达式
(() => { console.log('Welcome to the Internet. Please follow me.');})();原创 2017-10-30 10:11:26 · 575 阅读 · 0 评论 -
函数声明和函数表达式
建议使用函数声明代替函数表达式,原因:函数声明是可命名的,所以他们在调用栈中更容易被识别。此外,函数声明会把整个函数提升(hoisted),而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。建议:function foo() { } 不建议:const foo = function () { };原创 2017-10-30 10:02:20 · 732 阅读 · 0 评论 -
AntD Modal框销毁(隐藏时清除数据)
Modal组件自带的visible属性只能控制Modal的显示与否,无法真正销毁Modal。要想真正销毁Modal我们可以不控制Modal的visible属性,转而控制Modal这个组件的有无。首先,定义一个控制Modal有无的状态:this.state = { destroy:true //设一开始为不显示状态}通过此状态来判断是否生成Modal组件...原创 2017-10-27 16:03:07 · 19977 阅读 · 5 评论 -
H5+ 调用Barcode(二维码扫描)
webApp项目添加扫二维码的功能:注意:此例子中的scan.cancel()只是结束条码识别,要关闭调用的条码识别控件需要用scan.close()。以及闪光灯功能,详情见下图及链接:http://www.html5plus.org/doc/zh_cn/barcode.html点击打开链接原创 2017-10-27 09:30:27 · 19732 阅读 · 9 评论 -
图标和文字无法对齐处理方法
当使用字体图标和文字时,发现字体图标和文字中线没有对齐,调行高也不可以。最后用的vertical-align:middle。用之前是这样的用之后是这样的so eazy~~~原创 2017-05-19 15:44:16 · 3420 阅读 · 0 评论 -
JS的数组排序
var values = [ 3,1111,8,4,999,2 ];正序:values.sort(function(value1,value2){return value1 - value2;); 倒序:values.sort(function(value1,value2){return value2 - value1; }); 正序之所以不直接用value...原创 2017-11-06 09:30:47 · 396 阅读 · 0 评论 -
JS的find()
ES6的find函数出现之前,我们是这样写的:const persons= [ { name: 'Judy', sex: 'Female'}, { name: 'Tom', sex: 'Male'}, { name: 'Grace', sex: 'Female'}, ] function findPerson(name,sex) { for(let i = 0; i<persons.l...原创 2017-11-06 14:23:01 · 7326 阅读 · 0 评论 -
CSS基础笔记
1.标准的CSS的盒子模型,与低版本IE的盒子模型的不同标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2.box-sizing属性用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C的标准盒子模型,设置元素...原创 2018-03-19 14:57:51 · 302 阅读 · 0 评论 -
前端常见跨域解决方案(全)
转自:https://segmentfault.com/a/1190000011145364作者:安静de沉淀什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样...转载 2018-03-12 16:54:49 · 253 阅读 · 0 评论 -
JavaScript复制内容到剪贴板
转自:https://github.com/axuebin/articles/issues/26作者:axuebin最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑。常见方法查了一下万能的Google,现在常见的方法主要是以下两种:第三方库:clipboard.js原生方法:document.execCommand()分别来看看这两种方法是如何使用...转载 2018-03-12 16:45:29 · 1599 阅读 · 0 评论 -
使用target="_blank"的注意事项
为了安全性考虑,target="_blank"较好的用法如下:<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer nofollow">巴拉巴拉</a>解释:由于在跨域的情况下,opener 可以调用 location.replace 方法引导用户进入恶意网站,加入noopener之原创 2018-03-12 16:23:54 · 6826 阅读 · 0 评论 -
ES6数组实现并集、交集、差集
let set1 = new Set(['a','b','c','d','e','f']);let set2 = new Set(['d','e','f','g','h','i']);//并集let union = [...new Set([...set1,...set2])];//[a,b,c,d,e,f,g,h,i]//交集let intersect = [...new Se原创 2017-11-03 11:25:52 · 4410 阅读 · 2 评论 -
逻辑分辨率和物理分辨率
window.screen.width 在手机端 获取到的是逻辑分辨率的宽度取物理分辨率的话,:window.screen.width * window.devicePixelRatio原创 2017-12-15 16:03:35 · 2920 阅读 · 0 评论 -
扁平化多维数组
方法一:var result = [];var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; function peel(arr){ for(var i=0;i< arr.length;i++){ if(typeof arr[i]==="object" && arr[i].le...原创 2017-12-15 16:45:23 · 585 阅读 · 0 评论 -
chrome浏览器不能显示本地图片办法解决(图片预览)
近期开发项目时有个功能是实现图片预览,但是我将图片路径赋值给img标签的src时,预览的显示是这样的。唉。我就郁闷了,再仔细一看,浏览器给我加了个路径啊。这是什么鬼东西啊。试了一下replace替换掉浏览器加给我的路径也不行,还挺顽固啊你。我还治不了你。呵呵哒,我有base64转码。详情见下:$("#ChosePic").change(function () {原创 2017-05-19 14:39:49 · 7716 阅读 · 4 评论 -
配色方案生成网站
当公司没有UI的时候,这个网站就起作用了。这个网站能很好地将你想要的颜色进行搭配以及预览效果,快快使用起来吧:网站地址:http://paletton.com/#uid=1000u0kldl6ohIDmJsOjLdtik5R原创 2017-05-19 14:00:30 · 1200 阅读 · 0 评论