前端相关
文章平均质量分 71
devwolf
react前端开发。常用的英文名,devwolf
展开
-
【js正则】为什么/0|100/.test(‘101‘)的结果是true
新公司的前端主管塞给我一本pdf的《JavaScript 正则表达式迷你书》(1.1版 - 老姚)五一放假前的最后一小时,我想起来down了看一看。原本的话,js正则相关,我查工具书的时候是翻得正则表达式30分钟入门教程,然后测试的话一般会去(设置里悬中文,语言风格选es)。这个现象,有能力的人肯定一眼就看出来门道了,笔者比较笨拙,得多个环节拆下来一步一步矫正。原创 2024-04-30 17:30:40 · 247 阅读 · 2 评论 -
怎么在平面坐标系中区分左右手(和各个手指匹配上)
诸如pixijs这样的坐标系,在区分左手系还是右手系时,网络上的搜索结果不尽人意。因此笔者从左右手坐标系如何区分、如何和手指匹配、如何变化的切入点入手,阐明了归类方法原创 2023-10-26 11:03:15 · 128 阅读 · 0 评论 -
为什么一些老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 · 431 阅读 · 1 评论 -
js中补零
可以通过padStart和padEnd实现左/右开始填充指定字符达到指定长度。是四舍六入五成双,如果对精度有定制要求,可以尝试如下修改。参考我之前的一篇博客。原创 2022-07-28 18:12:18 · 7641 阅读 · 0 评论 -
初窥.contains 在react中应用的冰山一角
.contains 在react中应用的冰山一角原创 2022-07-15 11:52:25 · 767 阅读 · 0 评论 -
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 · 10128 阅读 · 0 评论 -
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 · 999 阅读 · 0 评论 -
富文本生成的htmlstring在展示端进行图片loading预占位的一种实现方案
产品出现的问题:braft-editor生成的htmlstring格式富文本内容,经由react中的dangerouslySetInnerHTML不做处理直接展示时,img的出现会很突兀。我最终的解决方案:加载富文本内容时,图片优先请求了模糊版,起到了即刻占位的作用,随后富文本内容的图片清晰版通过filter动画逐渐呈现。插件:(1) htmr感谢简书如何把html字符串转成一个React组件? - 简书 提供的思路。这个插件可以适当自定义htmstring的实际渲染规则,比如把im原创 2021-12-22 10:30:12 · 563 阅读 · 0 评论 -
web前端工程师常用工具(自用)
一、.exe应用1.截图Snipaste.exe 可以使用f3来实现贴截图功能的截图软件,参考部分代码、页面样式、原型图标注时常用2.查看.sketch文件Lunacy.exe3.看图ImageGlass,有中文,不能改图片大小qimgv,没有中文,可以改图片大小(目前自己对比两个软件的使用,只遇到过能否改图片文件大小的这个差异)4.markdownTypora.exe...原创 2021-10-12 09:04:20 · 1956 阅读 · 0 评论 -
antd3中InputNumber组件录入去尾四位小数并百分化展现的一种实现(react)
antd对应3.x版本,react对应非hooks写法,本文也对标一些关于“js小数乘除失精”的解决策略。antd3的InputNumber数字输入框业务要求:录入时的数字展示,是一个保留了两位小数的非负百分数(不用补零)-->分析:即真值为4位小数,多录的部分去尾。jsx部分源码(table组件的column部分列配置): { dataIndex: 'col3', title: '费用',原创 2021-02-22 11:08:36 · 2745 阅读 · 0 评论 -
浅谈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 · 290 阅读 · 0 评论 -
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 · 1485 阅读 · 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 · 2029 阅读 · 0 评论 -
【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 · 1345 阅读 · 0 评论 -
原生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 · 1089 阅读 · 0 评论 -
有关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 · 6828 阅读 · 0 评论 -
“*、: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 · 1938 阅读 · 0 评论 -
通过“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 · 1446 阅读 · 0 评论 -
【精简的“点击切换+淡入淡出”】原生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 · 472 阅读 · 0 评论