- 博客(243)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 rect用forwardRef和useImperativeHandle实现父调用子组件方法
【代码】rect用forwardRef和useImperativeHandle实现父调用子组件方法。
2023-12-08 18:51:06
165
原创 React 简析useEffect return执行时机
当执行 n + 1 之后，先执行 console.log("B挂了")，再执行执行 console.log("B")， 再执行 console.log("App挂了")， 最后执行console.log("App")， 程序结束。当组件 App内，使用 useState 创建的变量，发生变化时，会造成重新render，也就导致原组件（包含子组件）的销毁，以及新组件（包含子组件）的诞生。当执行 m + 1 之后，先执行console.log("B挂了")，再执行console.log("B")， 程序结束。
2023-11-22 18:05:47
1250
转载 JS中的异步编程与Promise
requestAnimationFrame 的位置在事件循环中的具体位置是视浏览器的实现而定，但一般来说，它在宏任务执行完，渲染之前，这使得其可以获取到最新的布局和样式信息。Promise起初是由社区提出并实现的，最早的版本是由 Kris Kowal 提出的 Q 库，后来被 ES6 正式接受，并成为了浏览器的原生对象。Promise 的状态一旦改变，就会一直保持那个状态，不会再次改变。是 JavaScript 内部的一个处理过程，系统会在此处不断地循环等待，检查任务队列中是否有任务，如果有，就处理它。
2023-10-20 11:04:52
132
转载 window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题。父页面的参数，但是原因两个的域名不一样，所以会出现。
2023-08-01 11:41:30
4161
原创 自适应大屏
因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。一些canvas渲染的图表也会有事件偏移，而图表不同于地图，当使用ignore时，过大的图表可能会显示不全，因此可以使用。* - dh：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080。* - el：渲染的dom，默认是 "#app"，必须使用id选择器。以上使用的是默认参数，可根据实际情况调整，可选参数有。
2023-07-31 14:44:25
327
原创 css3的filter图片滤镜使用
默认：第一个图标为选中状态，其他三个图标事未选中状态样式：选中状态是深蓝，未选中状体是浅蓝交互：鼠标放上去选中，其他未选中，鼠标离开时候保持当前选中状态实现：目前只有一下四个图标，需要用css3的滤镜实现。
2023-07-27 17:04:12
1364
原创 mathjs处理精度丢失问题
大多数函数可以根据输入的类型确定输出的类型：一个数字作为输入将返回一个数字作为输出，一个 BigNumber 作为输入返回一个 BigNumber 作为输出。，可以在实例化 math.js 时配置。要配置默认使用 BigNumbers 而不是。可以使用以下函数创建 BigNumber，解决js计算的精度问题。BigNumber 的默认精度为 64 位，可以使用选项配置。Math.js 可以在 node.js 和浏览器中使用。未使用大数bignumber，计算结果会出现精度问题。
2023-05-26 15:30:53
1744
原创 数组去重的几种方法
has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false。两两比较，如果后一个对象的id值和前一个对象的id值相等，就把后面的对象删除。set方法可以向Map对象添加新元素 map.set(key, value)values方法可以返回Map对象值的遍历器对象。第一种：双层for循环。
2023-04-23 17:52:49
776
1
原创 typescript的keyof的用法
你可以声明一个类型参数，且它被另一个类型参数所约束。比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象。第二种：与typeof一起用，可以返回对象key的联合类型，也可以和。如果把getInfo写成getInfo1,则会 报下面的错误。第四种：keyof也支持基本数据类型，如下。上，因此我们需要在这两个类型之间使用约束。第一种：与接口一起用，返回联合类型。第五种：在泛型约束中使用类型参数。第三种:与类一起使用。
2023-04-19 19:06:17
223
原创 useRef避免重复创建初始值
错误用法：每次setCount，refTimeId都会重新声明为null，导致点击按钮时timeId为null，关闭定时器失败。正确用法：useRef具有缓存作用，用useRef定义refTimeId，useRef只会声明一次，组建渲染也只会执行一次。
2023-04-19 16:30:02
369
原创 scss切换主题风格
第一步：创建_main.scss文件，定义一个map类型的变量$themes，相当于JS中的对象，不过是用圆括号包裹。$themes中定义不同的主题名称，这里是light，dark。再定义主题对应的颜色。注意不同主题色的键值对的键名要相同。第二步：创建handle.scss文件夹，导入_main.scss文件。1、定义混入器themeify，用来获取data-theme的值。2、@each遍历themes的键值对， themes的键值对，theme-name对应light，dark。
2022-12-26 17:56:43
1906
原创 Vue中如何扩展⼀个组件
按照逻辑扩展和内容扩展来列举:逻辑扩展有：mixins、extends、composition api；内容扩展有: slots；组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取,vue3中支持使用composition api1.如果是data函数的返回值对象2.如何生命周期钩子函数3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象4.全局混入5.局部混入二、extends从实现角度来看，extends 几乎
2022-12-03 20:07:53
1262
原创 vue父子组件之间双向数据绑定的(vue2/vue3)
vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（第一种方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。第二种（.sync 2.3.0+ 新增）第三种 （vue3）vue3取消了.sync这种语法，使用v-model 语法代替。默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对
2022-12-03 15:27:25
6994
转载 vue路由懒加载、组件懒加载--2种实现方式
方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)方法如下：const HelloWorld = （）=>import('需要加载的模块地址')懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import。为给客户更好的客户体验，首屏组件加载速度更快一些，（不加 { } ，表示直接return）一、为什么要使用路由懒加载。的时候的时候进行加载。
2022-09-17 09:51:45
2806
原创 css自定义属性（css变量）
背景复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换，效率不高且容易出错。自定义属性允许将值存储在一个地方，然后在多个其他地方引用。另一个好处是语义标识符。例如，--main-text-color比 更容易理解#00ff00，特别是如果在其他上下文中也使用相同的颜色。基本用法1、css中声明变量声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有
2022-05-31 10:34:38
7303
2
转载 浏览器的四大内核：Trident，Gecko，Webkit，Blink
浏览器的四大内核：Trident，Gecko，Webkit，Blink。不同的内核对网页编写语法的解释也有不同，进而导致同一个页面在不同内核的浏览器下显示出来的效果也会有所出入，这也是作为一个前端工程师需要了解不同浏览器所使用的内核和各种兼容性问题。浏览器内核是浏览器的核心，也叫“渲染引擎”，解释html并渲染绘制。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。以下是主流浏览器的所
2022-05-30 16:51:01
4269
3
原创 react中useEffect使用技巧
集合了组件中的 componentDidMount，componentDidUpdate以及componentWillUnmount到一个方法中，杜绝了频繁定义的繁琐。相当于vue中的mounted、beforeUpdate、beforeDestroy。使用事例useEffect(()=>{},[depts])1.如果传递一个空数组 [ ] ，告诉 useEffect 不依赖于 state、props中的任意值， useEffect 就 只会运行一次 ,相当于componentDidM
2022-05-28 17:23:28
753
转载 setTimeout和Promise区别（宏任务和微任务）
javascript的宏任务和微任务宏任务有Event Table、Event Queue，微任务有Event Queue1.宏任务：包括整体代码script，setTimeout，setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)；2.微任务：Promise、MutaionObserver、process.nextTick(Node.js 环境)注：new Promise中的代码会立即执行，then函数分发到微任务队列，process.next
2022-05-05 21:04:47
2822
转载 JS可选链操作符和空值合并运作符?.和？？
一、（?.）可选链操作符MDN解释——可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不
2022-05-05 20:43:33
199
原创 React Native不使用cnpm,使用nrm工具切换淘宝源
注意：React Native不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！需要使用nrm工具切换淘宝源1、cnpm 方式（React Native不推荐使用）：npm install -g cnpm --registry=https://registry.npm.taobao.org2、单次安装使用：npm install XXX -S --registry=https://registry.npm.taobao.org3、永久切换，手动
2022-05-05 00:27:57
656
原创 mac安装nrm时报错：please make sure that the network ‘proxy‘ config is set properly
XXXdeMacBook-Pro ~ % npm install -g nrmnpm ERR! code ETIMEDOUTnpm ERR! syscall connectnpm ERR! errno ETIMEDOUTnpm ERR! network request to http://10.106.161.233:14873/nrm failed, reason: connect ETIMEDOUT 10.106.161.233:14873npm ERR! network This is a.
2022-05-04 23:57:24
708
原创 解决 微信小程序 input错位
问题：微信小程序input获取焦点时内容飞到上面了，input用view标签包裹，未使用定位解决：最外层标签使用scroll-view包裹，当input获取到焦点时，scroll-view的属性scroll-y设置为false，当input失去焦点时，scroll-y设置为true代码：<scroll-view scroll-y="{{isScroll}}"> //页面内容 <view> <input bindfocus="onfocus" bindb
2022-04-09 11:14:49
2249
2
转载 接口请求返回状态码总结
前端在调用接口时都要关注接口返回给我们的状态码，之前只是大概的了解比如404是前端的错，可能是路径错误等，300+可能是重定向了，500以上是服务端或者服务器的错误，并没有一个很好的总结。今天中午看群里有人问这问题，就搜集对比整理了一下，如下：1xx - 信息提示这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。· 100 - Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）· 101 - Switching Pro
2022-03-09 12:23:02
6607
echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。
2021-03-23
echarts加载bmap地图不成功
2021-03-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人