- 博客(29)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 web前端工程师常用工具(自用)
一、.exe应用1.截图Snipaste.exe 可以使用f3来实现贴截图功能的截图软件，参考部分代码、页面样式、原型图标注时常用2.查看.sketch文件Lunacy.exe3.看图ImageGlass，有中文，不能改图片大小qimgv，没有中文，可以改图片大小（目前自己对比两个软件的使用，只遇到过能否改图片文件大小的这个差异）4.markdownTypora.exe...
2021-10-12 09:04:20
1182
原创 怎么在平面坐标系中区分左右手（和各个手指匹配上）
诸如pixijs这样的坐标系，在区分左手系还是右手系时，网络上的搜索结果不尽人意。因此笔者从左右手坐标系如何区分、如何和手指匹配、如何变化的切入点入手，阐明了归类方法
2023-10-26 11:03:15
81
原创 为什么一些老js代码会常出现that这种变量名
基于笔者个人的开发阅历来总结，在vue中见过的最多。笔者以前维护的老旧vue项目常用一些还在回调地狱的老库，需要 var _this = this;“早期的js开发者，在遇到使用_this的同样情形下，诞生了that的用法。当然，也可能和《JavaScript高效图形编程》里截图的一样，在模拟类的时候，用来取缔真正的this，进行别的处理。用this来举例的话，ruby中有self，php中有self和this，而js中的this更可能源于“JavaScript”这个名字中的“java”
2022-12-21 15:46:02
323
1
原创 js中补零
可以通过padStart和padEnd实现左/右开始填充指定字符达到指定长度。是四舍六入五成双，如果对精度有定制要求，可以尝试如下修改。参考我之前的一篇博客。
2022-07-28 18:12:18
7518
原创 JS中的Math.trunc()以及浅谈js计算失精常用函数
目录【mdn中关于Math.trunc()的描述】：【场景】【常用的其他函数以及其效果】1.Math.round()2.Math.ceil()3.Math.floor()4.Math.trunc()5.Number.prototype.toFixed()--“toFixed的四舍六入五成双”6.Number.prototype.toPrecision()【mdn中关于Math.trunc()的描述】：不像Math的其他三个方法：Math.floor()...
2022-03-21 15:46:52
8909
原创 React滑动条扫描图片组件(.tsx + .less, hooks组件)
ps:滑动条样式直接搬运的How V-Ray can transform a sunny 3D environment to stormy | Chaos组件实现原理:visibility: "hidden"一份左半的图片兜底占位，左右两半图片都绝对定位。配置滑动条的鼠标下按、抬起事件，并在鼠标下按时监听mousemove事件。为了实现“即使鼠标移动到滚动条、浏览器外、浏览器内的f12控制台处松开”也能取消鼠标拖拽，事件监听直接配在了document上，而不是docum.
2022-01-07 15:13:24
966
原创 富文本生成的htmlstring在展示端进行图片loading预占位的一种实现方案
产品出现的问题:braft-editor生成的htmlstring格式富文本内容，经由react中的dangerouslySetInnerHTML不做处理直接展示时，img的出现会很突兀。我最终的解决方案：加载富文本内容时，图片优先请求了模糊版，起到了即刻占位的作用，随后富文本内容的图片清晰版通过filter动画逐渐呈现。插件:(1) htmr感谢简书如何把html字符串转成一个React组件？ - 简书 提供的思路。这个插件可以适当自定义htmstring的实际渲染规则，比如把im
2021-12-22 10:30:12
517
原创 antd3中InputNumber组件录入去尾四位小数并百分化展现的一种实现(react)
antd对应3.x版本，react对应非hooks写法，本文也对标一些关于“js小数乘除失精”的解决策略。antd3的InputNumber数字输入框业务要求:录入时的数字展示，是一个保留了两位小数的非负百分数（不用补零）-->分析：即真值为4位小数，多录的部分去尾。jsx部分源码(table组件的column部分列配置): { dataIndex: 'col3', title: '费用',
2021-02-22 11:08:36
2558
原创 浅谈flex属性:扩展与缩减两种不同计算
本文契机来自于前端面试题合集中的 155题 与 156题，解答同样也来源于次笔者个人而言，比较容易理解“扩”的例子，所以先来总结“缩”当子项的flex-basis总和超过父项宽，则flex-shrink生效（缩）<div class="container"> <div class="left"></div> <div class="right"></div></div><style type...
2021-02-18 13:46:13
251
原创 react脚手架项目craco可配置化后如何应用tailwindcss【待后续更新完善】
一些关键插件的版本:全局插件:create-reat-app:^3.4.1npx:^6.9.0项目插件```"@craco/craco":"^5.6.4","craco-less":"^1.17.0","postcss":"^8.1.4","postcss-loader":"^4.0.4","tailwindcss":"^1.9.6","typescript":"~3.7.2"```《craco配...
2020-10-30 16:43:34
1395
8
原创 html5运用navigator对象使浏览器请求摄像头权限
前言：上头有要求让我尝试是否可以写一个“不依赖html5plus”的拍照功能，所以我就试着整了一个demo。关于demo：本文提供 【在线版】和 【angular8的ts版】。说实话，个人总结这个demo也就图一乐(总算有契机去初始video标签了)，windows笔记本里开浏览器跑会调笔记本摄像头，但在手机上只可以调前置摄像头，没去深入研究手机端如何调后置摄像头正文:在线项目地址:https://jsrun.net/5j6Kp/edit相关资料：video标签-MDN资料navi.
2020-10-29 15:41:32
1868
原创 js中“函数的四种方法“，以及“类的三种方法“
在线地址http://js.jsrun.net/66bKp/edit参考https://blog.csdn.net/Stars_in_rain/article/details/107248637并做了修正【函数】中四种方法：1.内部方法（类似私有方法，因为我很少见到这种叫法，所以此处用类似）:定义在函数内部的方法，内部方法只能被内部的方法调用。2.实例方法（也叫对象方法）:在构造函数中this指向的是他的实例对象，函数定义时，定义函数中最外层this上方法便是实例方法，只有实例才
2020-10-20 16:10:29
660
原创 浅谈: 关于js中的‘深拷贝与浅拷贝’
但从展开运算符的例子就可以看出来，js中相当多的方法在只遍历一层的时候是深拷贝，深层遍历的时候是浅拷贝。因此很容易陷入一个'眼见为虚'的陷阱——即使观测到一个方法是深拷贝，它也是在特定条件的下的，比如‘仅仅在只遍历一层、且是基本类型数据’的时候是深拷贝方法。如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝。即深层遍历的时候（非只遍历一层），它拷贝的是引用，此时便是浅拷贝。网络上有一个很常见的说法“
2020-10-20 09:50:41
228
1
原创 【PHP】session_destroy()的执行会销毁session_id()
在demo地址http://php.jsrun.net/TL6Kp/edit慕课问答的回复https://www.imooc.com/qadetail/254487?t=548410#id_548410指出php进阶篇4-7的教程错误，回复内容如下:w3c原话https://www.w3cschool.cn/php/php-sessions.htmlhttp://www.zixuephp.com/html/phphuihua/20150824_41386.html“ses...
2020-09-28 09:53:45
549
原创 【web前端开发】vs code插件推荐(以及一些使用技巧)
0.Chinese (Simplified) Language Pack for Visual Studio Code说明：简体中文版1.Beautify说明：使用快捷键格式化代码时生效的风格2.Bracket Pair Colorizer 2说明：使闭合的每组{}、[]、()显示相同的颜色，并且不同组的括号与括号之间颜色区分开。3.Highlight Line说明：高亮横行显示当前光标所在行4.GitLens — Git supercharged说...
2020-09-27 15:22:20
1259
原创 原生js:使用map处理getElementsByTagName返回值,并且操作dom时使“感叹号important“生效
为什么document.getElementsByTagName返回的值无法使用数组方法map，因为getElementsByTagName返回的是一个类数组对象NodeList类js数组无法直接使用数组的方法map，需要通过Array.from转换成js数组。【不知出于何种原因】无法直接Array.from(document.getElementsByTagName('img'));需要拆分下拉写。例子： let a = document.getElementsByT...
2020-09-27 13:16:56
1040
原创 有关then的“链式调用”
let str1 = 'str1 ';const func1=(str1)=>new Promise((resolve,reject)=>{ resolve(str1 + 'str2 ');})const func2=(str2)=>new Promise((resolve,reject)=>{ resolve(str2 + 'str3 ');})const func3=(str3)=>new Promise((resolve,reject...
2020-09-25 14:37:03
6479
原创 “*、:root、html三者权重问题“以及“css样式继承的权重“以及“CSS 自定义属性（原生css中对变量的支持）”
前言：百度查啥的时候瞥到的一个糟糕回答的慕课提问，就“我行我上了”https://www.imooc.com/qadetail/68527?t=547070#id_547070正文:首先，这几个选择器是干嘛的，:root也就是选择了html的伪元素选择器(:root选择器用匹配文档的根元素,在HTML中根元素始终是HTML元素。)与html标签选择器区别是权重不同——:root权重是(0,1,0),html权重（0,0,1）:root的高位比html的高位的数值要大.
2020-08-31 08:54:04
1762
原创 通过“css点击穿透“优化[移动端fixed导致的问题]
移动端position:fixed 解决方案，参考https://www.cnblogs.com/Megasu/p/4329430.htmlCSS 解决z-index上层元素遮挡下层元素点击事件问题，参考https://www.cnblogs.com/shouke/p/12018403.html-笔者做的优化:【原理】在 出现问题的fixed定位元素 中设置一个absolute定位的子元素，给这个子元素"随便写点内容"并设置color透明(若想改位置可以最后设透明)，最后为了不影响页面交互.
2020-08-21 08:53:20
1306
原创 【精简的“点击切换+淡入淡出”】原生js+少量dom操作css类实现
jsrun在线地址:http://jsrun.net/uTLKpHtml代码:<div id="father"> <div class="coming" id="child1">偶数点击</div> <div class="coming hided" id="child2">奇数点击</div><p style="padding-top: 70px;">============================
2020-08-20 09:35:40
399
原创 ts模板下craco化配置项的antd4项目（脚手架是create-react-app）
前言：最近有时间准备为年会提前准备一个纯前端的抽奖系统，看见antd4官方忽然推荐了新的脚手架可配置化方案，就开荒了（当然，这会儿这个插件没啥中文文档，也许后面出了中文文档或者优化了配置设置就不需要这篇文章了）本文中craco相关的，也就ts+react+webpack+craco下如何配置alias快捷引用菜单、修改默认打包文件夹buildpackage.json内容:{ "name": "react-antd-lottery", "version": "0.1.0", "p
2020-08-07 08:41:42
2375
4
原创 解决antd中Povper包裹Input结合Form.Item出现的箭头定位误差
如果在Form.Item中使用Popover包裹Input会导致无法触发rules （这里指直接把Popover包裹Input写在Form.Item里面），只得Popover包Form.Item包Input但是存在标题中提到的rules验证开启时的气泡箭头定位误差（如图）然后给官方提了Issues——得知，Popover是官方封装了自己的Tooltip（猜测，毕竟看到了相似的API），然后Tooltip底层便是rc-tooltip虽然还没来得及看完文档测试demo，官方的...
2020-08-06 08:37:43
1237
原创 react ^16.12.0 + antd ^4.2.3 如何实现对Form下面的Form.Item进行动效展示【使用rc-queue-anim】
yarn add rc-queue-anim实际项目里笔者使用的是"rc-queue-anim":"^1.8.5"出自“Ant Motion”官网链接https://motion.ant.design/api/queue-anim-cn属于其中的“进出场动画”（之前以为是css样式动画，装了rc-tween-one研究半天Animate没有生效）rc-queue-anim的话，api很友好，子级元素记得手动加key，其他也没啥要注意的import QueueAnim from...
2020-07-31 14:07:45
890
1
原创 【纯前端】原生js实现照片水印
场景/契机：react项目使用了react-photo-view来实现图片查看，但是该组件无法在图片本身添加水印，又要求纯前端解决。为了纯前端得到一个含有水印的url故有此操作。演示地址:http://jsrun.net/9t2KpHTML代码：<img id="showimg">JS代码:let previous_url = "http://i2.tiimg.com/704774/ce778c4938b3c7e2.jpg";const reader = ne.
2020-06-03 13:30:04
2868
原创 【JS新特性】关于 可选链?. 与 空值合并运算符??
举例let a = {a:"1",b:"2"}console.log(a?.a)契机：另一个组的同事在一个 angular 项目里发现了这个语法的使用，之前查半天无果，便在v2ex自己发了帖子https://www.v2ex.com/t/663072?p=1收获颇丰：?.操作符，译为可选链, MDN的科普链接为https://developer.mozilla.org/...
2020-04-21 15:44:01
868
原创 create-react-app配置按需引入antd、支持.less、打包输出的文件夹从build变成dist、打包后文件引用报错时地址的修改
create-react-app如何修改webpack配置一共有三种第一种,执行eject不可逆的操作来保留配置文件，这个网上很多。-----第二种,和第三种都是不执行eject的，在根目录下新建的config-overrides.js文件上做修改。第二种【仅这种笔者提供确保可执行的代码】：使用 react-app-rewired 插件，并在此基础上使用 customize-cr...
2020-04-21 15:15:58
1146
原创 【react插件 -- mirrorx】报错Cannot read property 'data' of undefined
解决办法：除了看看有没整mirror.defaults({historyMode:'hash'})也看一下对document.getElementById('root')的render方法是不是从mirrorx里import的，即
2020-04-09 09:37:21
230
原创 现在自己的图解js原型链【大概也许应该是最简整合图了吧】
今天在v2ex的javascript分区摸鱼的时候撇到一则提到关于原型链的，忽然大腿一拍，这个不就是自己大二那会儿看弃坑的文章么，“深入理解javascript原型和闭包（完结）”博客园链接：https://www.cnblogs.com/wangfupeng1988/p/3977924.html那会儿自己理解吃力时后来又从下面两篇普及到了“函数对象和普通对象”的概念：“最详尽的 JS...
2019-08-09 13:40:37
137
赛门铁克卸载工具cleanwipe.rar
2020-08-26
关于win7旗舰版null.sys.zip
2019-07-08
windows7旗舰版————null.sys
2019-07-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人