最新文章使用WebAssembly优化性能问题
问题背景项目有个CMS的新需求,分为三端:后台管理端、PC端和移动端,后台管理端实现CMS资讯的编辑发布等,使用了富文本编辑器(PS:富文本是一大天坑),编辑的内容通过接口返回后使用v-html来展示,在移动端展示的时候,编辑的各种样式需要做移动端适配,字体等样式还比较容易处理,但对于下面这些编辑时指定了特定样式的,就需要做相关转换了,
<img style="width:1920px;height:80px" />
思路对于移动端适配,比较容易想到的就是 postcss-px-to-viewport-8-plugin,但对于v-html 处理的带行内样式的html字符串,插件就没办法做处理,之后考虑到可以通过正则替换来对px单位转换为所需的vw,查询到有一个库实现对行内样式转换,查看源码也是正则替换这个思路,但是是一个webpack loader,并不适用与当前项目,就考虑自己写一套utils,
实现有了下面的1.0版本:
function StylePx2Vw(
source: string,
option = {
ignoreUnitC ...
Math.toFixed中的四舍五入问题
Math.toFixed中的四舍五入问题MDNNumber.prototype.toFixed()toFixed() 方法使用定点表示法来格式化一个数值。
语法numObj.toFixed(digits)
参数
digits
小数点后数字的个数;介于 0 到 20(包括)之间,实现环境可能支持更大范围。如果忽略该参数,则默认为 0。
返回值使用定点表示法表示给定数字的字符串。
抛出异常
RangeError
如果 digits 参数太小或太大。0 到 20(包括)之间的值不会引起 RangeError。实现环境(implementations)也可以支持更大或更小的值。
TypeError
如果该方法在一个非Number类型的对象上调用。
描述一个数值的字符串表现形式,不使用指数记数法,而是在小数点后有 digits(注:digits 具体值取决于传入参数)位数字。该数值在必要时进行四舍五入,另外在必要时会用 0 来填充小数部分,以便小数部分有指定的位数。如果数值大于 1e+21,该方法会简单调用 Number.prototype.toString()并返回一个指数记数法格 ...
React系列:Rematch
link: https://rematchjs.org/
https://rematch.gitbook.io/handbook/
Rematch是没有boilerplate的Redux最佳实践。没有多余的action types,action creators,switch 语句或者thunks。
安装yarn add @rematch/core
使用为了规范管理,建议将Rematch相关文件放到同一目录下(eg: models)
新建 model.ts
此文件用来编写相同功能模块的state, reducers, async actions 和 action creators ,当模块过多,多个模块在同一个 models 文件时,不便于维护,所以此文件可以根据具体功能划分为多个models,例如:user.ts,book.ts等
import { createModel } from "@rematch/core";
export const count = create ...
kif的neovim设置
配置教程来自《Neovim 配置实战:从0到1打造自己的IDE》
个人github配置仓库:github: https://github.com/wkif/kifsNeovimConfig/tree/v2
快捷键:窗口:sh 代表水平分屏(Split Horizontally),sv 代表垂直分屏 (Split Vertically), sc 关闭窗口 (Close), so 关闭其他 (Others)。
Alt + h/j/k/l 设置为在窗口之间跳转。 Ctrl + 上下左右 或者 s, s. sj sk 调整比例
Terminal:leader + t 在下边窗口打开,或 leader + vt 侧边窗口打开
浏览代码:Ctrl+j / Ctrl+k 移动 4 行,Ctrl+u / Ctrl + d 移动 9 行
侧边栏: Alt + m 打开/关闭, j/k 上下移动, Alt + h / Alt + l 可以左右窗口跳转
o 来打开关闭文件夹,a 添加一个文件,d 删除文件,r重命名,x剪切,c复制,p粘贴,s文 ...
win11中powershell设置v2ray代理
本文用socks5协议进行设置代理,用户可以根据自己的需求将socks5替换http和https 协议自行设置本文测试需要打开代理软件,打开即可,无需在软件上开启代理。
windowscmd设置临时代理(关闭cmd即设置的代理消失)set all_proxy=socks5://127.0.0.1:10808 (端口号为你代理软件socks5协议的端口)删除临时代理set all_proxy=查看当前环境变量set查看当前公网ip判断代理是否成功curl cip.cc
powershell设置临时代理(关闭powershell即设置的代理消失)$env:all_proxy="socks5://127.0.0.1:10808" (端口号为你代理软件socks5协议的端口)删除当前临时代理$env:all_proxy=""查看当前环境变量ls env:*暂不知晓curl 和 ping层面上检测代理是否成功,设置完临时代理,通过命令行界面已成功获得下载相关速度
cmd和powershell设置永久代理单击我的电脑属性=》选择高级系统设置 ...
lerna+yarn workspace+monorepo项目的最佳实践
1.monorepo 管理对于维护过多个package(功能相近)的同学来说,都会遇到一个选择题,这些 package 是放在一个仓库里维护还是放在多个仓库里单独维护。Multirepo 是比较传统的做法,即每一个 package 都单独用一个仓库来进行管理。Monorepo 是管理项目代码的一个方式,指在一个项目仓库 (repo) 中管理多个模块/包 (package),不同于常见的每个模块建一个 repo。
目前有不少大型开源项目采用了这种方式,如 Babel,React, Meteor, Ember, Angular,Jest, Umijs, Vue, 还有 create-react-app, react-router 等。几乎我们熟知的仓库,都无一例外的采用了 monorepo 的方式,可以看到这些项目的第一级目录的内容以脚手架为主,主要内容都在 packages 目录中、分多个 package 进行管理。
目录结构如下:
├── packages
| ├── pkg1
| | ├── package.json
| ├── pkg2
| | ├ ...
js 数组详细操作方法及解析
创建一个数组: // 字面量方式:
// 这个方法也是我们最常用的,在初始化数组的时候 相当方便
var a = [3, 11, 8]; // [3,11,8];
// 构造器:
// 实际上 new Array === Array,加不加new 一点影响都没有。
var a = Array(); // []
var a = Array(3); // [,,]
var a = Array(3,11,8); // [ 3,11,8 ]
复制代码
ES6 Array.of() 返回由所有参数值组成的数组定义:返回由所有参数值组成的数组,如果没有参数,就返回一个空数组。
目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。
let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]
复制代码
ES6 Arrary.from() 将两类对象转为真正的数组定义:用于将两类对象转为真正的数 ...
奇奇怪怪的兼容性Bug
IOS 不支持this.$router.go项目中遇到需要刷新当前界面,就使用了this.$router.go(0),结果ios端不生效,this.router.go(0) 和 window.location.reload() 都是刷新当前页面的方法,Vue 写H5页面时,用 this.$router.go(0); 方法刷新当前页面,在苹果手机失效,安卓、pc、开发工具等都可以改用 *window.location.reload()* 问题解决!
微信端input type=file 无法上传图片在做一个上传头像功能时
<input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">
这段代码在非微信浏览器内能选中图片并上传,而在微信浏览器内就失效了,查了各种资料并没有找个解决方案,一次 偶然的机会 ...
vue3+vite+ts配置eslint+husky
vue3+vite+ts配置eslint+husky创建项目命令
yarn create vite vue3-vite-ts –template vue-ts
eslint代码风格检查,prettier进行格式化代码
安装相关依赖 ;
yarn add eslint eslint-plugin-vue eslint-define-config --dev # eslink
yarn add prettier eslint-plugin-prettier @vue/eslint-config-prettier --dev # prettire
yarn add @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev # 对ts的支持
编写对应的配置文件 .eslintrc.js ;
const { defineConfig } = require('eslint-define-config')
module.e ...
小程序开发格式化代码ESLint、Prettier、husky、lint-stage
依赖yarn init
yarn add --dev babel-eslint@10.0.3
yarn add --dev eslint@6.7.1
yarn add --dev eslint-config-alloy@3.7.1
yarn add --dev eslint-config-prettier@6.10.0
yarn add --dev eslint-plugin-prettier@3.1.4
yarn add --dev prettier@2.0.5
yarn add --dev prettier-eslint-cli@5.0.0
yarn add --dev npm-run-all@4.1.5
yarn add --dev husky@4.3.0
yarn add --dev lint-staged@10.3.0
package.json "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint . --ext . ...