- 博客(28)
- 问答 (1)
- 收藏
- 关注
原创 关于权重插值排序的记录
拖拽中内存占用过大会产生较大的渲染瓶颈,之前有个测试上传了一张 100 MB 的图片,然后一排序就导致页面非常卡顿,这是因为拖拽中很容易进行数据克隆和重绘重排,自己原生实现可以尽量避免,但如果使用三方库,内存泄露就会是很常见的事,拖一下内存占用瞬间拉满,导致十分明显的卡顿。假设权重从 0 开始,有 1 万条数据,把最后一条置顶后权重设置为 0,前面的 9999 条数据的权重就要自增 1,会造成 1 万条数据的更新,IO 成本会变得非常的高。库实现拖拽排序并不困难,市面上已经有很多完善的拖拽库,我常用的是。
2024-03-19 18:26:26 878
原创 记录 taro 坑
我集成了一个全局组件,里面有登录,活动广告等,就想着需要的页面贴一个就行,因为 taro 不能贴到 app.tsx 上嘛,所以我用到的页面都要贴。我在【我的】【首页】两个页面都贴了这个组件,然后里面有段 useEffect 代码,结果我在【我的】页面更新时,还触发了【首页】贴的这个组件的 useEffect,相当于就执行了两次。,不仅不会卸载,之前注册过的 useEffect 依赖改变时,还会执行。我算是明白了,useEffect 就是参考了。来搞的,害死人啊,这玩意儿。
2023-03-29 18:01:46 247
原创 git revert 笔记
但是我一次提交可能几百行代码,处理好多文件,一次恢复的成本太大,真用 revert 进行版本回退,真的鸡肋得不行,也不知道国内什么人把 revert 和版本回退放到一起。它的作用在于保存了撤销历史,对于微小提交的撤销,这是非常不错的,但是用来回退版本,就没意义了,两个版本差异几千甚至几万行代码,几十甚至数百文件,中间几十甚至几百次提交,用 git revert?提交后进行修改了,你要改你就把修改的提交也恢复了,不然就自己处理,可以忽略、取消本次恢复、或自行处理差异,你敢忽略吗?
2023-03-29 12:01:07 684
原创 js 快速生成一个数组 小技巧
这种方式不是很友好,改变了数字类型的原型,但是你看到代码绝对很惊艳。此时可以对数字进行解构,拿到长度和数字一样的数组。这是因为数字类型原型上没有迭代器。
2023-01-04 16:39:42 446
原创 js 中使用 encodeURI 把 svg 转 base64
使用 encodeURI 函数把 svg 字符串转义后可以直接拼接到 svg 的 base64 字符串的数据部分。
2023-01-04 15:54:41 2072 2
原创 React 如何根据外部状态进行更新
为了更新的安全和可靠,React的状态一直都比较封闭,不论是早期类组件的this.state,还是 hook 年代的,React 依赖外部数据更新都不是很容易。要使 React 订阅外部数据,外部数据的就需要有数据更新的回调,使得更新能够通知 React。
2022-12-16 18:23:50 851
原创 h5 微信分享和踩坑指南
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的webapp可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现webapp的页面会导致签名失败,此问题会在Android6.2中修复)。那就重定向咯,我在进入页面直接进行判断是否转义,没转义就重定向到转义后的url上,就这样,才最终好使。...
2022-07-19 11:23:44 1295 6
原创 react ssr 简单实现
react 的 ssr 最低最低也要把下面几个操作完成:实现时用到的依赖:可以直接全部装上,或者写到哪里装到哪里。既然是服务器端渲染,就要先装个好用的服务器,我用的是 express。创建以下的文件:嗯,再来看看各个文件我都写了啥:tsconfig.json,配置下 jsx 的转化,这段代码是我从 webpack 官网嫖下来的:其实 选项没啥用,但是不配置会报错我的 js 文件。然后是 src 内的文件:App.tsx 很简单,就是一个完整的页面组件,不过引入了客户端代码,这个在服务器端没什么..
2022-07-05 11:21:38 813
原创 如何更好的在 react 中使用 axios 的拦截器
title: 如何更好的在 react 中使用 axios 的拦截器createAt: 2021-09-28作者:玄晓乌屋备注:转载与借鉴请注明出处。前言axios 算是当下最热门的前端 ajax 处理库,它简单易上手,扩展性强,功能齐全。我之前在 react 中处理 axios 的封装一直没有找到很好的方式,因为 axios 是非常独立,并且提供的各种 api 都是一次性配置,例如 axios.create、axios.defaults,这让 react 对 axios 进行封装异常麻烦.
2021-09-30 01:41:35 1226 2
原创 Chrome CORS 安全策略解决方案
谷歌 CORS 安全策略解决方案针对莫能臣前端同事的日志。问题谷歌在 80 版本的时候使用了 HTTP 响应头属性 SameSite,它用于声明 Cookie 是否仅限于第一方或者同一站点上下文中。简单地说,SameSite 决定了跨域时 Cookie 是否能够存储。按理说这是后端的事,让后端加响应头就行了,但是 这个属性在非 https 协议时是强制开启的。 这就很麻烦了,线下搞个 https 成本太高。Chrome 在 80 ~ 91 版本时,可以修改浏览器配置关闭此功能。91 版本后浏览器
2021-07-06 18:30:29 1440
原创 弹性盒收缩和增长计算
原址点这里弹性盒收缩和增长计算flex-shrink 弹性收缩flex-shrink 用来定义弹性布局中项目的收缩规则,它的计算比较复杂。先有 HTML 结构如下:<section> <div></div> <div></div> <div></div></section>编写以下代码使其成为弹性布局:section { display: flex; width: 400px
2021-06-29 11:57:11 192
原创 Babel 安装、配置和基本使用
原址Babel(一)安装、配置和基本使用Babel 是一款 JavaScript 编译器,它可以把 ECMAScript 2015+ 的代码转译成低版本兼容的代码。作用语法转换:Babel 会转译新版本的 ES 代码,比如箭头函数,解构,模板字符串或者类等。Babel 会把这些新语法转译成较低版本的代码。需要注意的是,Babel 会把 ES 模块转化为 CommonJS 模块,模块转化可以查看 此文章。通过 Polyfill 添加缺失的特性,比如 Array.protorype.inclu
2021-06-22 16:59:37 3885
原创 使用 vscode 远程编写服务器文件
原址使用 vscode 远程编写服务器文件ssh 支持vscode 远程编写是基于 ssh 实现的,为此我们需要在服务器上安装 ssh 的服务器端,在本机上安装 ssh 的客户端。服务器端安装的 ssh 服务已经很完善,几条命令即可。如果是有 yum 命令,可以使用:sudo yum install sshd;如果有 apt-get 命令,使用:sudo apt-get install sshd;然后使用一下命令开启服务:sudo service sshd start;客户端这边
2021-06-21 14:15:04 317
原创 typescript 使用对象或数组的值或键创建联合类型
前言实际开发中我需要用到太多的键值对,并且有相当一部分情况下,键名是一个联合,而且还是某个数组的联合,然而早期 TS 对这样的联合实现并不是很理想。这几天又翻了翻 Stack Overflow,发现很多新答案,对此整理一下。后面的内容最主要的是针对 TS 增加了 字面量常量上下文表达式(Const contexts for literal expressions) 而展开的,所以需了解下它,为了简化,后面简称为 常量字面量。常量字面量确定了一个对象或数组的所有子级是只读的,也就是不可修改。比如声明
2021-05-10 18:10:02 8591
原创 react 函数组件暴露方法
场景部分时候希望在子组件中暴露方法给父组件,使用 Class 组件时配合 ref 很容易拿到子组件实例,并且可以执行子组件上的方法。但是函数组件没有组件实例,就算使用 ref 转发,也只会把 ref 转发到内部。hook 推出后,可以使用 useImperativeHandle 来控制转发的 ref。比如:const Chart = (_, ref) => { // 方法暴露 useImperativeHandle( ref, () => ({ doSo
2021-04-30 14:41:41 6641
原创 关于 npm 安装各种包较慢的问题
这里写自定义目录标题阿里镜像使用1 cnpm使用2 直接修改 npm 配置使用3 一次性配置代理其他阿里镜像npm 中相关的包在国内没有很好的支持,为此阿里提供了阿里镜像。使用1 cnpm阿里镜像要求大家使用 cnpm 包来安装包,cnpm 安装如下:npm install -g cnpm --registry=https://registry.npm.taobao.org或者使用 alias 指令:alias cnpm="npm --registry=https://registry.np
2021-04-06 15:36:19 300
原创 js 网络编程简述
文章目录node.js 的 net 实现的 tcp 链接实现一个简单的 tcp 服务器实现一个简单的客户端栗子简单的 tcp 聊天室远程终端连接发送http报文WebSocket建立 ws 服务器建立 ws 客户端小结socket.io 库node.js 的 net 实现的 tcp 链接node.js 内置 net 模块来实现面相 tcp 的套接字编程,并且简化了 tcp 协议底层的很多操作,...
2019-11-26 14:48:08 1161
原创 node 通过终端远程访问
文章目录实验环境具体思路建立服务器建立客户端交互实验环境windows10node:v10.15.3具体思路简:建立可供访问的 tcp 服务器和客户端,在客户端开启子进程运行一个可供访问的客户端。然后对接客户端子进程终端和 socket 的双工流即可。详情:建立一个客户端程序,开启一个子进程访问客户端的终端,接收服务器传来的信息并输入到子进程的终端中,然后把终端的返回结果输送给服务...
2019-11-22 17:08:06 908
原创 vue-cli3路由histroy模式部署在非根路径
路由配置export default new Router({ mode: 'history', base: 'root-dir', // 需要配置此项来设置路由的基础路径,不然路由表只会按根路径来匹配 routes: [ { name: 'Root', path: '/', component:Root }, { ...
2019-11-11 11:09:51 1108
原创 vue-cli cdn方式引入Vue模块
文章目录选择Vue的cdn从那儿引入?是否需要删除 import Vue 语句?打包测试选择Vue的cdn引入的 vue 文件必须是游览器版本,最少需要包含 vue 的运行时源码,也就是 vue.runtime.min.js 这个文件,可以到各大cdn网站上获取。运行时源码和完整版有什么不同?运行时源码少了编译器,而完整版有,这意味着运行时源码还要小一点,详见vue官方文档。我使用的是 ...
2019-10-30 14:25:07 14670 1
原创 笔记 grid 布局全解
文章目录声明概念容器属性定义设置行列长宽设置间隙设置排列方式排列网格和项目的位置排列网格排列项目声明本笔记大部分内容归纳来源于阮一峰老师的 grid布局教程 。概念网格布局类似表格,但是比表格有更高的可控性。网格布局只关系父子级元素,和弹性布局类似,以下术语参照个人理解。术语:容器:标识网格布局的根容器。项目:是被容器包裹的第一层元素。行列:被网格线分隔成的逐行逐列。(类似表格的行...
2019-08-26 17:52:35 738
原创 canvas操作单个像素
基本操作mdn的像素学习链接暂时没有找到canvas直接进行单个像素的操作,但是在canvas上下文中存在方法getImageData来生成一个可操作性的图像对象ImageData。其中,ImageData.data 存储了图片各个像素的rgba值,可以直接修改,然后从新渲染到canvas上。麻烦的是canvas的缩放不能直接渲染ImageData,所以需要2个canvas元素,一个用来存...
2019-08-05 17:19:17 433
原创 vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定v-model组件双向绑定.sync修饰符双向绑定总结序作者:玄晓乌屋最后更新时间:2019/6/25vue 自定义组件双向绑定没有直接一步到位的方式,全都是是通过属性传值和事件传值实现的。v-model 不能直接支持组件的双向绑定。属性&事件传值双向绑定这种方式最复杂,也最容易理解,前提是需要深刻理解事件传值和属性传值。新建一个组件 ...
2019-06-25 16:00:40 3888 2
原创 webpack 依赖管理
文章目录webpack模块加载代码效果图作者:玄晓乌屋webpack模块加载webpack 提供的模块加载方式很多,ES6 的今天加载方式比较推荐。但有时需要加载大批量的模块,于是可以用 webpack 模块方法的 require.context,链接。代码已知在 src/components 下有4个文件,如下:|-components |- Aside.vue |- nav ...
2019-06-24 17:00:04 607
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人