- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 gitlab 身份验证手机号验证没86
在这里插入图片描述](https://img-blog.csdnimg.cn/direct/139251ccc24e4534a4dc5d44619128a0.png。在浏览器中摁 【F12】打开控制台，选择网络模块，找到手机号列表的请求，请求是。大功告成，打完收工。
2024-06-18 16:42:23
336
原创 web 唤起 app 笔记
比如微信内置页面跳转到其他 App，就需要接入微信 sdk，四端都要接：ios、android、server、web。app 内置页面是可以控制浏览器跳转的，所以部分 app 不允许跳转，这些不用考虑。配置完成后的效果：web 可以通过一个 url 直接跳转到 app，app 那边也可以收到完整的跳转并进行后续操作。，例如初始化脚本就跳转，什么方式都不行，比如模拟 a 链接点击，iframe 加载，均不行。，比如用户点击链接，或者用户点击按钮，在事件中使用。换端实际上很坑，要想做到完美的换端几乎不可能。
2024-05-30 15:36:44
840
原创 vscode 、eslint、prettier 的孽缘
今天在配置一个新项目的时候，被一个新项目搞得头痛。我准备配置 prettier 来格式代码，然后把 prettier 添加到 eslint 规则中，这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样，无论我怎么格式化代码，不是控制台报错，就是 vscode 显示代码标红。最后捋清楚了，原来是 vscode 的 eslint 插件，热更本地配置时没有完全加载成功。vscode 才能让代码视图和控制台一致。
2024-04-27 15:38:43
784
2
原创 js iframe 简易代码沙箱
第二种【解析代码的 dom 结构，替换 iframe 中的 dom】更快，因为直接替换 dom，不会在跑一个 iframe 生命周期，坏处就是上次代码的定时器会在下次代码接着跑，沙箱内部会污染。上面的实现方式中，【把代码转为一个可以访问的地址，让 iframe 指向这个地址】更加干净，每个生命周期不会互相污染，但需要消费额外的 iframe 生命周期计算，不过这其实很快。iframe 实现代码沙箱是一个非常优质的选择，不仅能隔绝代码，最主要的还能隔绝样式。注意要写字符集，不然就炸了。
2024-04-18 17:21:40
1030
原创 关于权重插值排序的记录
拖拽中内存占用过大会产生较大的渲染瓶颈，之前有个测试上传了一张 100 MB 的图片，然后一排序就导致页面非常卡顿，这是因为拖拽中很容易进行数据克隆和重绘重排，自己原生实现可以尽量避免，但如果使用三方库，内存泄露就会是很常见的事，拖一下内存占用瞬间拉满，导致十分明显的卡顿。假设权重从 0 开始，有 1 万条数据，把最后一条置顶后权重设置为 0，前面的 9999 条数据的权重就要自增 1，会造成 1 万条数据的更新，IO 成本会变得非常的高。库实现拖拽排序并不困难，市面上已经有很多完善的拖拽库，我常用的是。
2024-03-19 18:26:26
911
原创 记录 taro 坑
我集成了一个全局组件，里面有登录，活动广告等，就想着需要的页面贴一个就行，因为 taro 不能贴到 app.tsx 上嘛，所以我用到的页面都要贴。我在【我的】【首页】两个页面都贴了这个组件，然后里面有段 useEffect 代码，结果我在【我的】页面更新时，还触发了【首页】贴的这个组件的 useEffect，相当于就执行了两次。，不仅不会卸载，之前注册过的 useEffect 依赖改变时，还会执行。我算是明白了，useEffect 就是参考了。来搞的，害死人啊，这玩意儿。
2023-03-29 18:01:46
289
原创 git revert 笔记
但是我一次提交可能几百行代码，处理好多文件，一次恢复的成本太大，真用 revert 进行版本回退，真的鸡肋得不行，也不知道国内什么人把 revert 和版本回退放到一起。它的作用在于保存了撤销历史，对于微小提交的撤销，这是非常不错的，但是用来回退版本，就没意义了，两个版本差异几千甚至几万行代码，几十甚至数百文件，中间几十甚至几百次提交，用 git revert？提交后进行修改了，你要改你就把修改的提交也恢复了，不然就自己处理，可以忽略、取消本次恢复、或自行处理差异，你敢忽略吗？
2023-03-29 12:01:07
722
原创 js 快速生成一个数组 小技巧
这种方式不是很友好，改变了数字类型的原型，但是你看到代码绝对很惊艳。此时可以对数字进行解构，拿到长度和数字一样的数组。这是因为数字类型原型上没有迭代器。
2023-01-04 16:39:42
492
原创 js 中使用 encodeURI 把 svg 转 base64
使用 encodeURI 函数把 svg 字符串转义后可以直接拼接到 svg 的 base64 字符串的数据部分。
2023-01-04 15:54:41
2302
2
原创 React 如何根据外部状态进行更新
为了更新的安全和可靠，React的状态一直都比较封闭，不论是早期类组件的this.state，还是 hook 年代的，React 依赖外部数据更新都不是很容易。要使 React 订阅外部数据，外部数据的就需要有数据更新的回调，使得更新能够通知 React。
2022-12-16 18:23:50
977
原创 h5 微信分享和踩坑指南
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的webapp可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现webapp的页面会导致签名失败，此问题会在Android6.2中修复）。那就重定向咯，我在进入页面直接进行判断是否转义，没转义就重定向到转义后的url上，就这样，才最终好使。...
2022-07-19 11:23:44
1545
6
原创 react ssr 简单实现
react 的 ssr 最低最低也要把下面几个操作完成：实现时用到的依赖：可以直接全部装上，或者写到哪里装到哪里。既然是服务器端渲染，就要先装个好用的服务器，我用的是 express。创建以下的文件：嗯，再来看看各个文件我都写了啥：tsconfig.json，配置下 jsx 的转化，这段代码是我从 webpack 官网嫖下来的：其实 选项没啥用，但是不配置会报错我的 js 文件。然后是 src 内的文件：App.tsx 很简单，就是一个完整的页面组件，不过引入了客户端代码，这个在服务器端没什么..
2022-07-05 11:21:38
850
原创 如何更好的在 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
1411
2
原创 Chrome CORS 安全策略解决方案
谷歌 CORS 安全策略解决方案针对莫能臣前端同事的日志。问题谷歌在 80 版本的时候使用了 HTTP 响应头属性 SameSite，它用于声明 Cookie 是否仅限于第一方或者同一站点上下文中。简单地说，SameSite 决定了跨域时 Cookie 是否能够存储。按理说这是后端的事，让后端加响应头就行了，但是 这个属性在非 https 协议时是强制开启的。 这就很麻烦了，线下搞个 https 成本太高。Chrome 在 80 ~ 91 版本时，可以修改浏览器配置关闭此功能。91 版本后浏览器
2021-07-06 18:30:29
1602
原创 弹性盒收缩和增长计算
原址点这里弹性盒收缩和增长计算flex-shrink 弹性收缩flex-shrink 用来定义弹性布局中项目的收缩规则，它的计算比较复杂。先有 HTML 结构如下：<section> <div></div> <div></div> <div></div></section>编写以下代码使其成为弹性布局：section { display: flex; width: 400px
2021-06-29 11:57:11
202
原创 Babel 安装、配置和基本使用
原址Babel（一）安装、配置和基本使用Babel 是一款 JavaScript 编译器，它可以把 ECMAScript 2015+ 的代码转译成低版本兼容的代码。作用语法转换：Babel 会转译新版本的 ES 代码，比如箭头函数，解构，模板字符串或者类等。Babel 会把这些新语法转译成较低版本的代码。需要注意的是，Babel 会把 ES 模块转化为 CommonJS 模块，模块转化可以查看 此文章。通过 Polyfill 添加缺失的特性，比如 Array.protorype.inclu
2021-06-22 16:59:37
4427
原创 使用 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
330
原创 typescript 使用对象或数组的值或键创建联合类型
前言实际开发中我需要用到太多的键值对，并且有相当一部分情况下，键名是一个联合，而且还是某个数组的联合，然而早期 TS 对这样的联合实现并不是很理想。这几天又翻了翻 Stack Overflow，发现很多新答案，对此整理一下。后面的内容最主要的是针对 TS 增加了 字面量常量上下文表达式(Const contexts for literal expressions) 而展开的，所以需了解下它，为了简化，后面简称为 常量字面量。常量字面量确定了一个对象或数组的所有子级是只读的，也就是不可修改。比如声明
2021-05-10 18:10:02
9472
原创 react 函数组件暴露方法
场景部分时候希望在子组件中暴露方法给父组件，使用 Class 组件时配合 ref 很容易拿到子组件实例，并且可以执行子组件上的方法。但是函数组件没有组件实例，就算使用 ref 转发，也只会把 ref 转发到内部。hook 推出后，可以使用 useImperativeHandle 来控制转发的 ref。比如：const Chart = (_, ref) => { // 方法暴露 useImperativeHandle( ref, () => ({ doSo
2021-04-30 14:41:41
7003
原创 关于 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
329
原创 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
1200
原创 node 通过终端远程访问
文章目录实验环境具体思路建立服务器建立客户端交互实验环境windows10node:v10.15.3具体思路简：建立可供访问的 tcp 服务器和客户端，在客户端开启子进程运行一个可供访问的客户端。然后对接客户端子进程终端和 socket 的双工流即可。详情：建立一个客户端程序，开启一个子进程访问客户端的终端，接收服务器传来的信息并输入到子进程的终端中，然后把终端的返回结果输送给服务...
2019-11-22 17:08:06
943
原创 vue-cli3路由histroy模式部署在非根路径
路由配置export default new Router({ mode: 'history', base: 'root-dir', // 需要配置此项来设置路由的基础路径，不然路由表只会按根路径来匹配 routes: [ { name: 'Root', path: '/', component:Root }, { ...
2019-11-11 11:09:51
1129
原创 vue-cli cdn方式引入Vue模块
文章目录选择Vue的cdn从那儿引入？是否需要删除 import Vue 语句？打包测试选择Vue的cdn引入的 vue 文件必须是游览器版本，最少需要包含 vue 的运行时源码，也就是 vue.runtime.min.js 这个文件，可以到各大cdn网站上获取。运行时源码和完整版有什么不同？运行时源码少了编译器，而完整版有，这意味着运行时源码还要小一点，详见vue官方文档。我使用的是 ...
2019-10-30 14:25:07
14810
1
原创 笔记 grid 布局全解
文章目录声明概念容器属性定义设置行列长宽设置间隙设置排列方式排列网格和项目的位置排列网格排列项目声明本笔记大部分内容归纳来源于阮一峰老师的 grid布局教程 。概念网格布局类似表格，但是比表格有更高的可控性。网格布局只关系父子级元素，和弹性布局类似，以下术语参照个人理解。术语：容器：标识网格布局的根容器。项目：是被容器包裹的第一层元素。行列：被网格线分隔成的逐行逐列。（类似表格的行...
2019-08-26 17:52:35
806
原创 canvas操作单个像素
基本操作mdn的像素学习链接暂时没有找到canvas直接进行单个像素的操作，但是在canvas上下文中存在方法getImageData来生成一个可操作性的图像对象ImageData。其中，ImageData.data 存储了图片各个像素的rgba值，可以直接修改，然后从新渲染到canvas上。麻烦的是canvas的缩放不能直接渲染ImageData，所以需要2个canvas元素，一个用来存...
2019-08-05 17:19:17
437
原创 vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定v-model组件双向绑定.sync修饰符双向绑定总结序作者：玄晓乌屋最后更新时间：2019/6/25vue 自定义组件双向绑定没有直接一步到位的方式，全都是是通过属性传值和事件传值实现的。v-model 不能直接支持组件的双向绑定。属性&事件传值双向绑定这种方式最复杂，也最容易理解，前提是需要深刻理解事件传值和属性传值。新建一个组件 ...
2019-06-25 16:00:40
4002
2
原创 webpack 依赖管理
文章目录webpack模块加载代码效果图作者：玄晓乌屋webpack模块加载webpack 提供的模块加载方式很多，ES6 的今天加载方式比较推荐。但有时需要加载大批量的模块，于是可以用 webpack 模块方法的 require.context，链接。代码已知在 src/components 下有4个文件，如下：|-components |- Aside.vue |- nav ...
2019-06-24 17:00:04
622
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人