- 博客(390)
- 收藏
- 关注
RSS订阅原创 微前端之实践应用间的全局状态管理、应用缓存和预加载子应用
一、微前端之实践应用间的全局状态管理、应用缓存和预加载子应用1. 全局状态管理，应用间的全局 `store`，如下所示：- 在 `micro` 下的 `store` 中 `index.js`，对外暴露 `createStore`，使用 `store` 管理 `initData`，`observers` 管理所有的订阅者和依赖，通过 `getStore` 获取 `store`，通过 `update` 更新 `store`。当 `store` 发生变化，通知订阅者，执行 `store` 的操作，进行缓存，将
2022-07-09 13:50:15
1420
1
原创 微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信
一、微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信1. 微前端环境变量设置，如下所示：- 在 `micro` 下的 `sandbox` 中 `performScript.js`，`performScriptForFunction` 是执行 `js` 脚本，`performScriptForEval` 是获取到子应用的内容，代码如下：...
2022-07-09 13:42:57
1657
原创 微前端之实践主应用的生命周期、微前端的生命周期、 加载和解析 html 及 js
一、微前端之实践主应用的生命周期、微前端的生命周期、 加载和解析 html 及 js1. 主应用的生命周期，如下所示：- 在主应用 `main` 下的 `util` 中的 `index.js` 中，在 `registerApp` 中的 `registerMicroApps` 方法注册到微前端框架里，传入第二个参数生命周期，`beforeLoad` 是开始加载，`mounted` 是渲染完成，`destoryed` 是卸载完成，`index.js`，代码如下：...
2022-07-09 13:33:33
826
原创 微前端之实践子应用的注册、路由拦截和获取首个子应用
一、微前端之实践子应用的注册、路由拦截和获取首个子应用1. 子应用的注册，如下所示：- 首先需要一个子应用注册的列表，在主应用 `main` 的 `store` 文件夹中，新建 `sub.js`，对外暴露 `subNavList` 这个子应用的列表。`subNavList` 是一个数组，每一个子元素都是一个子应用，`name` 是子应用名称，唯一 `ID`； `entry` 是子应用的入口，获取到子应用的文件；`container` 是子应用的渲染内容，显示在哪个容器中；`activeRule` 是子.
2022-07-09 11:34:56
1516
原创 微前端之实现方式和项目分析、实践主子应用启动配置、vue2、vue3、react15、react16 子应用的配置
一、微前端之实现方式和项目分析1. 微前端实现方式对比，如下所示：- `Iframe`，`Iframe` 的优势是技术成熟，支持页面嵌入，天然支持运行沙箱隔离、独立运行。`Iframe` 的劣势是页面之间可以是不同的域名，需要对应的设计一套应用通讯机制，如何监听、传参格式等内容，应用加载、渲染、缓存等体系的实现- `web component`，`web component` 的优势是支持自定义元素、支持 `shadow down`，并可通过关联进行控制，支持模版 `template` 和插槽 `sl
2022-07-09 11:24:57
1110
原创 微前端之前端架构、软件设计原则及分层、架构设计的质量、架构前期准备、技术填补及崩溃预防和系统重构
一、微前端之前端架构、软件设计原则及分层、架构设计的质量、架构前期准备、技术填补及崩溃预防和系统重构1. 前端架构是如何产生的，如下所示：- 初始，无架构，前端代码内嵌到后端应用中，`js` 代码混入到后端代码- 后端 `mvc` 架构，将视图层、数据层、控制层做分离，缺点是重度依赖开发环境，代码混淆严重。`controller` 层修改数据到 `modal` 层，修改显示到 `view` 层，`view` 层获取数据到 `modal` 层- 前后端分离架构，将前端代码从后端环境中提炼出来，`aja
2022-07-09 11:19:24
1282
原创 react 中实现图片分批加载优化加载卡顿问题
一、react 中实现图片分批加载优化加载卡顿问题1. 在 `react` 中，当页面图片数量太多时，一次性请求所有的图片，会很卡顿造成用户的体验不好，可以采用分批加载的方式去请求图片进行优化。2. 对于优化的实现思路，先将所要渲染 `image `的 `url` 置空。在 `loadImages` 函数中，`needToLoadList` 为所有图片的路径，`maxLoadedNum` 为最大加载数量，`curLoadedImgList` 为正在加载的图片列表，`loadIndex` 为当前加载的图片
2022-07-09 11:16:21
1609
原创 JS 实现自动复制文本到剪切板
一、自动复制剪切板1. 在将文本信息获取后，需要自动复制剪切板，代码如下所示：```jshandleCopyClipboard = (content) => { const inputDom = document.createElement('input'); inputDom.setAttribute('value', content); document.body.appendChild(inputDom); inputDom.select(); document.execCo
2022-07-09 11:12:57
1859
原创 Vite 基础之 Vite 高级应用的 rollup 配置文件、rollup 插件、vite 插件、vite 钩子及执行时机和 vite 的 HMR
一、Vite 高级应用的 rollup 配置文件、rollup 插件、vite 插件、vite 钩子及执行时机和 vite 的 HMRVite 是基于 rollup 和 esbuild 实现的。Rollup 是开源类库优先的选择，以 ESM 标准为目标的构建工具，打包基于 tree shaking 功能。通过 npm i -g rollup 命令安装 rollup，rollup.config.js，代码如下：import json from '@rollup/plugin-json';import
2022-05-21 15:01:15
7400
原创 Vite 基础之 Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出
一、Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出Vite 中的热更新，通过 Vite 命令行生成的项目默认都开启了热更新，同时 Vite 中的热更新是根据不同框架去实现的。HMR API，对于 import.meta.hot，通过 vite build 去 build 代码之后，在 build 的 production 的 bundle 里面是没有 hot 代码的，对于发布线上的代码是没有 hot 的需要，需要判断。对于
2022-05-21 14:57:28
2005
原创 Vite 基础之 Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置
一、Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置在 vite 中，对于 ts 只编译不校验。如果需要对 ts 校验，只能使用 tsc。通过 tsc --noEmit 命令，对 ts 只校验不把编译文件做输出，如下所示：通过 yarn add typescript 命令添加 typescript新增 tsconfig.json，代码如下：{ "compilerOp
2022-05-21 14:53:10
5391
原创 Vite 基础之 Vite 的认识、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 jsx、vite 创建 vue2 项目、vite 创建 react 项目、postcss
一、Vite 的认识Vite 是构建工具，高阶封装，Vite 的特点，如下所示：开发时效率极高开箱即用，功能完备社区丰富，兼容 rollup超高速热重载预设应用和类库打包模式前端类库无关Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示：High Level API不包含自己编译能力完全基于 ESM 加载方式的开发时Vite 减少了很多配置量，减少的工作，
2022-05-21 14:47:17
1985
原创 Vue 基础之单文件组件 todoList、vue-router 路由和 vuex
一、Vue 基础之单文件组件 todoList、vue-router 路由和 vuex单文件组件实现 todoList，如下所示：// App.vue<template> <div> <input v-model="inputValue" /> <button class="button" @click="handleAddItem">提交</button> </div> <ul>
2022-05-21 14:24:30
320
原创 Vue 基础之 setup、ref 及 reactive、toRef 及 context、TodoList、computed、watch 及 watchEffect、生命周期函数新写法、provide
一、Vue 基础之 setup、ref 及 reactive、toRef 及 context、TodoList、computed、watch 及 watchEffect、生命周期函数新写法、provide 及 injectsetup 是在 created 实例被完全初始化之前执行的函数，接收 props 和 context 参数。在 setup 中返回出来的数据和方法可以被模版、外部等使用，但不能使用外部的数据和方法，因为此时 app 实例并没有被挂载，同时 setup 中是不能使用 this 以及实例
2022-05-21 10:51:18
427
原创 Vue 基础之 mixin 混入、自定义指令、teleport、render 函数、插件和数据校验插件
一、Vue 基础之 mixin 混入、自定义指令、teleport、render 函数、插件和数据校验插件mixin 混入，组件 data、methods 优先级高于 mixin data 优先级、methods 优先级，组件中有则执行组件中的，组件中没有的则执行 mixin 中的。生命周期函数，先执行 mixin 里面的，再执行组件里面的，如下所示：const myMixin = { data() { return { number: 2, count: 2
2022-05-21 10:47:27
581
原创 Vue 基础之过渡动画、单元素组件的过渡动画、组件及元素切换动画、列表动画和状态动画
一、Vue 基础之过渡动画、单元素组件的过渡动画、组件及元素切换动画、列表动画和状态动画过渡和动画，如下所示：const app = Vue.createApp({ data() { return { styleObj: { background: 'blue' } } }, methods: { handleClick() { if (this.styleObj.background === 'blue') {
2022-05-21 10:42:15
481
原创 Vue 基础之组件、组件传值、单项数据流、Non-props、父子组件通信、组件双向绑定、插槽、作用域插槽、动态组件、异步组件、provide 和 inject
一、Vue 基础之组件、组件传值、单项数据流、Non-props、父子组件通信、组件双向绑定、插槽、作用域插槽、动态组件、异步组件、provide 和 inject组件的定义，组件具备复用性。全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议，小写字母单词，中间用横线间隔。局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大写字母开头，驼峰命名。局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射，如下所示：con
2022-05-21 10:39:20
274
原创 Vue 基础之应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令
一、Vue 的应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令createApp 表示创建一个 Vue 应用，存储到 app 变量中。传入的参数表示，这个应用最外层的组件，应该如何展示。MVVM 设计模式，m -> model 数据，v -> view 视图，vm -> viewModel 视图数据连接层，vm 代表的就是 vue 应用的根组件，如下所示：const app = Vue.c
2022-05-21 10:34:05
204
原创 Linux 基础之 Linux 的 awk 判断及循环、awk 数组及函数、防火墙、iptables 规则及过滤、firewalld、SSH、FTP、vsftpd 配置文件及虚拟用户、samba 服务
一、Linux 的 awk 判断及循环、awk 数组及函数、防火墙、iptables 规则及过滤、firewalld、SSH、FTP、vsftpd 配置文件及虚拟用户、samba 服务、NFS 服务、Nginx 基本配置文件及域名虚拟主机、LAMP、DNS 和 NASawk 条件语句，如下所示：条件语句使用 if 开头，根据表达式的结果来判断执行哪条语句，如下： if (表达式) awk语句1 [else awk语句2 ]如果有多个语句需要执行可以使用 {} 将多个语句括
2022-05-02 11:10:41
417
1
原创 Linux 基础之 Linux 的自定义函数、系统函数库、资源脚本控制、信号、一次性计划任务、周期性计划任务、脚本加锁、元字符、find、sed 及 awk、sed 替换命令、sed 指令及其它指令
一、Linux 的自定义函数、系统函数库、资源脚本控制、信号、一次性计划任务、周期性计划任务、脚本加锁、元字符、find、sed 及 awk、sed 替换命令、sed 指令及其它指令、sed 多行模式空间、保持空间、awk 字段和表达式自定义函数，如下所示：函数用于"包含"重复使用的命令结合自定义函数，如下：function fname(){ 命令}函数的执行，fname自定义函数，如下所示：函数作用范围的变量，local 变量名函数的参数，$1 $2 $3 ..
2022-05-02 10:52:44
987
原创 Linux 基础之 Shell 的数组、转义及引用、运算符、特殊字符、test 比较、if 判断、if-else 判断、嵌套 if 的使用、case 分支、for 循环、while 循环及 until
一、Shell 的数组、转义及引用、运算符、特殊字符、test 比较、if 判断、if-else 判断、嵌套 if 的使用、case 分支、for 循环、while 循环及 until 循环、循环的嵌套、break 及 continue 语句和使用循环处理位置参数数组，如下所示：定义数组，如 IPTS=( 10.0.0.1 10.0.0.2 10.0.0.3)显示数组的所有元素，如 echo ${IPTS[@]}显示数组元素个数，如 echo ${#IPTS[@]}显示数组的第一个元素，如
2022-04-30 16:35:33
1079
原创 Linux 基础之 Linux 的 grub 配置文件、查看进程、进程控制、进程通信、守护进程、screen、systemctl、SELinux、内存及磁盘管理、内存查看、磁盘分区、文件系统管理、分区
一、Linux 的 grub 配置文件、查看进程、进程控制、进程通信、守护进程、screen、systemctl、SELinux、内存及磁盘管理、内存查看、磁盘分区、文件系统管理、分区及挂载、交换分区、RAID、逻辑卷 LVM、sar、Shell、Shell 脚本格式、管道、重定向、变量赋值、变量引用及作用范围、环境变量及配置grub 配置文件，如下所示：/etc/default/grub/etc/grub.d//boot/grub2/grub.cfggrub2-mkconfig -o /b
2022-04-30 16:09:29
1415
原创 Linux 基础之 Linux 的文件及目录的权限、文件权限的修改、权限管理、网络管理、查看及修改网络配置、网络故障排除、网络管理配置、软件包管理器、rpm及yum安装、源代码编译安装和内核升级
一、Linux 的文件及目录的权限、文件权限的修改、权限管理、网络管理、查看及修改网络配置、网络故障排除、网络管理配置、软件包管理器、rpm 及 yum 安装、源代码编译安装和内核升级查看文件权限，如 -rw-------1 root root 1523 sep 28 12:05 anaconda-ks.cfg 中，-r 是类型，w-------1 是权限，root root 是所属用户和组，anaconda-ks.cfg 是文件名。文件类型，如下所示：- 普通文件d 目录文件b 块特殊文件
2022-04-30 16:06:43
1149
原创 Linux 基础之 Linux 的概念、常见目录、帮助命令、pwd、ls、cd、创建及删除目录、复制及移动目录、文本查看、打包压缩及解压缩、vi 的模式、用户及用户组的管理和用户切换
一、Linux 的概念、常见目录、帮助命令、pwd、ls、cd、创建及删除目录、复制及移动目录、文本查看、打包压缩及解压缩、vi 的模式、用户及用户组的管理和用户切换Linux 有两种含义，如下所示：一种是 Linus 编写的开源操作系统的内核另一种是广义的操作系统Linux 的第一印象，如下所示：服务端操作系统和客户端操作系统要做的事情不一样命令行操作方式与图形界面的差异学习 Linux 之前的环境准备，执行环境，如下所示：云主机无数据的 PC，不推荐多系统混跑虚
2022-04-30 16:00:21
555
原创 webpack 之 webpack 打包原理的 Tapable、编译流程、模块构建、chunk 生成和 webpack 的 Loader 和插件的处理
一、webpack 打包原理的 Tapable、编译流程、模块构建、chunk 生成Webpack 的本质，Webpack 可以将其理解是一种基于事件流的编程范例，一系列的插件运行。Tapable 是一个类似于 Node.js 的 EventEmitter 的库，主要是控制钩子函数的发布于订阅，控制着 webpack 的插件系统。Tapable 库暴露了很多 Hook 钩子类，为插件提供挂载的钩子。Tapable hooks 类型，如下所示：Hook，所有钩子的后缀，Waterfall，同步方
2022-04-10 16:13:20
855
原创 webpack 之 webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill 和 webpack 打包原理的启动过程
一、webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill图片压缩，要求是基于 Node 库的 imagemin 或者 tinypng API，使用时配置 image-webpack-loader，代码如下所示：return { test: /\.(png|svg|jpg|gif|blob)$/, use: [{ loader: 'file-loader', options: { name: `${filename}img
2022-04-10 16:09:39
811
原创 webpack 之 webpack 构建速度和体积优化的高版本设置、多进程多实例构建、多进程多实例并行压缩、预编译资源模块、缓存优化速度和缩小构建目标
一、webpack 构建速度和体积优化的高版本设置、多进程多实例构建、多进程多实例并行压缩、预编译资源模块、缓存优化速度和缩小构建目标构建速度优化，使用高版本的 webpack 和 Node.js，构建时间降低了 60% - 98%。使用 webpack4 的优化原因，如下所示：V8 带来的优化，for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf 等等默认使用更快的 md4 hash 算法webpack AST 可以直接从 loa
2022-04-10 11:47:45
939
原创 webpack 之 webpack 构建配置的持续集成、发布 npm、Commit 规范、语义化版本规范和 webpack 构建速度和体积优化分析
一、webpack 构建配置的持续集成、发布 npm、Commit 规范、语义化版本规范持续集成的作用，优点是快速发现错误和防止分支大幅偏离主干。核心措施是代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。接入 Travis CI，如下所示：https://travis-ci.org/ 使用 GitHub 账号登录在 https://travis-ci.org/account/repositories 为项目开启项目根目录下新增 .travis.ymltrav
2022-04-10 11:41:48
414
原创 webpack 之 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率
一、 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率构建配置抽离成 npm 包的意义，如下所示：通用性，业务开发者无需关注构建配置，统一团队构建脚本可维护性，构建配置合理的拆分，README 文档、ChangeLog 文档等质量，冒烟测试、单元测试、测试覆盖率、持续集成构建配置管理的可选方案，如下所示：通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制将构建配置设计成一个库，比如：hjs
2022-04-10 11:38:15
602
原创 webpack 之 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理
一、 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理页面打开过程，开始加载 -> HTML 加载成功后开始加载数据 -> 数据加载成功后渲染成功开始、加载图片资源 -> 图片加载成功、页面可交互服务端渲染 SSR 是什么，如下所示：渲染：HTML + CSS + JS + Data -> 渲染后的 HTML服务端：所有模版等资源都存储在服务端，内网机器拉取数据更快，一个 HTML 返回所有的数据浏览器和服务器交互流程，请求开始 ->
2022-04-10 11:35:27
948
原创 webpack 之 webpack 进阶用法的提取页面公共资源、treeShaking、scopeHoisting、代码分割、webpack 与 ESLint 结合和webpack 打包组件与基础库
一、 webpack 进阶用法的提取页面公共资源、treeShaking、scopeHoisting、代码分割、webpack与 ESLint 结合和webpack 打包组件与基础库基础库分离，思路是将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中，方法是使用 html-webpack-externals-plugin。利用 SplitChunksPlugin 进行公共脚本分离，Webpack4 内置的，替代 CommonsChunkPlugin 插件。chunk
2022-04-10 11:32:23
978
原创 webpack 之 webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map
一、webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map当前构建时的问题，每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多。通过 npm scripts 清理构建目录，如下所示：rm -rf ./dist && webpackrimraf ./dist && webpack自动清理构建目录，避免构建前每次都需要手动删除 dist，使用 clean-
2022-04-09 15:31:50
407
原创 webpack 之 webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩
一、webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩webpack 中的文件监听，文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。webpack开启监听模式，有两种方式，如下所示：启动 webpack 命令时，带上 --watch 参数在配置 webpack.config.js 中设置 watch: truewebpack 中的文件监听使用，唯一缺陷是每次需要手动刷新浏览器，代码如下："scripts": { "build": "webpack",
2022-04-09 15:27:13
941
原创 webpack 之 webpack 认识和 webpack 基础用法的 Entry、Output、Loaders、Plugins、Mode 和资源解析
一、webpack 认识为什么需要构建工具，如下所示：转换 ES6 语法转换 JSXCSS 前缀补全/预处理器压缩混淆图片压缩前端构建演变之路，ant + YUI Tool -> grunt -> fis3、gulp -> rollup、webpack、parcel。为什么选择 webpack，如下所示：社区生态丰富配置灵活和插件化扩展官方更新迭代速度快初识 webpack，如下所示：配置文件名称，webpack 默认配置文件为 webpac
2022-04-09 15:23:56
729
原创 前端性能优化之资源传输优化、渲染优化、Web 加载和渲染原理
一、资源传输优化使用压缩 Gzip，如下所示：对传输资源进行体积压缩，可高达 90%配置 Nginx 启用 Gzip启用 Keep Alive，如下所示：一个持久的 TCP 连接，节省了连接创建时间Nginx 默认开启 Keep AliveHTTP 资源缓存，HTTP 缓存是 client、cache、server 之间，提高重复访问时资源加载的速度。HTTP 缓存，如下所示：Cache-Control/ExpriesLast-Modified + If-Modif
2022-04-09 10:56:12
643
原创 前端性能优化之资源的压缩与合并和 Webpack 优化
一、资源的压缩与合并对于资源的压缩与合并，如下所示：减少 http 请求数量减少请求资源的大小HTML 压缩，如下所示：使用在线工具进行压缩使用 html-minifier 等 npm 工具CSS 压缩，如下所示：使用在线工具进行压缩使用 clean-css 等 npm 工具JS 压缩与混淆，如下所示：使用在线工具进行压缩使用 Webpack 对 JS 在构建时压缩CSS JS 文件合并，如下所示：若干个小文件无冲突，服务相同的模块优化加
2022-04-09 10:52:53
692
原创 前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化
一、浏览器渲染原理和关键渲染路径浏览器构建渲染树，DOM 树和 CSSDOM 树合成为 Render Tree 渲染树。浏览器的渲染流程，如下所示：JavaScript -> Style -> Layout -> Paint -> Composite。布局与绘制，如下所示：渲染树只包含网页需要的节点布局计算每个节点精确的位置和大写，盒模型绘制是像素化每个节点的过程影响回流的操作，如下所示：添加、删除元素操作 stylesdisplay: none
2022-04-09 10:49:15
515
原创 前端性能优化之 Web 性能优化、性能指标和优化目标、RAIL 测量模型和常用的性能测量 APIs
一、Web 性能优化进行 Web 性能优化，因为性能是 Web 网站和应用的支柱，流量、搜索、转换率和用户体验的关系。寻找性能瓶颈，如下所示：了解性能指标，多快才算快利用测量工具和 APIs优化问题，重新测量迭代移动端挑战多，如下所示：设备硬件、网速、屏幕尺寸、交互方式用户更缺少耐心，大于 3 秒加载导致 53% 的跳出率持续增长的移动用户和移动电商业务二、性能指标和优化目标性能优化加载，如下所示：理解加载瀑布图基于 HAR 存储与重建性能信息速度指数 Sp
2022-04-09 10:45:57
614
原创 react 中 websocket 结合 pubsub 实现数据通信
一、react 中 websocket 结合 pubsub 实现数据通信在 react 中使用 websocket，创建 websocket.js 文件，需要下载 websocket 和 pubsub-js，可以通过 npm i websocket pubsub-js -s 命令进行下载，引入 websocket 中 w3cwebsocket 进行创建连接，引入 pubsub-js 中 PubSub 进行消息通信， 代码如下所示：import { w3cwebsocket as W3CWebSock
2022-04-09 10:42:43
1982
原创 JS 处理 Base64 编码转为上传时的 File 文件流
一、Base64 转 File 文件流在做有关图片需求的时候，需要将 base64 编码，转换成 file 文件流，函数如下所示：base64toFile = (dataurl,filename='file') => { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split('/')[1]; let bstr = atob(arr[1]);
2022-03-31 23:21:25
3182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人