修复项目中的 block 和 major
no-multi-assign
禁止使用链式赋值表达式，链接变量的赋值可能会导致意外结果并且难以阅读，此规则不允许在单个语句中使用多个赋值。
1234567891011121314// incorrect codevar a = b = c = 5;const foo = bar = "baz";let a = b = c;class Foo { a = b = 10;}a = b = "quux";
123456789101112131415161718// correct codevar a = 5;var b = 5;var c = 5;const foo = "baz";const bar = "baz";let a = c;let b = c;class Foo { a = 10; b = 10;}a = "quux";b = "quux";
no-this-before-super
...
如何将前端静态资源部署到阿里云OSS上
域名购买域名域名备案OSS创建 OSS BucketCDN先占位后续有时间补～
什么是Fabric.js
简介什么是Fabric.js ?Fabric.js 是一个可以简化 canvas 程序编写的库，在原生 canvas 之上提供了交互式对象模型，为 canvas 提供所缺少的对象模型, svg 解析器, 交互和一整套其他不可或缺的工具，通过简洁的 api 就可以在画布上进行丰富的操作。
为什么要使用Fabric.js ？canvas 提供一个好的画布能力, 但是 api 不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabric.js 就是为此而开发，它主要就是用对象的方式去编写代码。
Fabric.js 能做的事情
在canvas 上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
给图形填充渐变颜色。
组合图形（包括组合图形、图形文字、图片等）。
设置图形动画及用户交互。
生成JSON, SVG 数据等。
生成Canvas 对象自带拖拉拽功能。
起步安装npm 安装1npm install fabric --save
通过cdn引用12<script src="https://cdn. ...
JavaScript 踩坑 —— 使用 Array.fill( ) 填充对象导致的重大问题
1| JavaScript创建二维数组时尽量不要使用Array.fill( )的嵌套方式
背景在公司在做 code review 中 直接写了 let list = [[ ], [ ],[ ]] 是不很优雅，于是在后面的改动直接写成了 Array(4).fill([]) 发现了Array.fill()的问题。
问题复现：当我们想使用 Array.fill( ) 来填充一个全是对象的数组时需要特别注意，Array(5).fill([]) 这样填充创建的数组，里面每一项[]是完全相同的。
修改前：123456789101112131415let list;swich(type) { case 'large': { list = [[],[],[],[],[],[],[]] break; } case 'small': { list = [[],[],[],[],[]] break; } default: { ...
regex-css-module
背景
在项目中要隐藏公共组件的某些样式，而对应标签className为css.module样式（class=’comp-element-list___1lBTC’），并且没有提供禁用对应功能的api，那我们该怎么做呢？
实现方案第一时间考虑属性选择器是否可以使用，查阅mdn之后，发现，属性选择器可以使用正则匹配形式 属性选择器 - CSS（层叠样式表） | MDN (mozilla.org)
最终通过如下方式实现需求
1234// class*,中*表示class包含"comp-element-list"div[class*="comp-element-list"] { display: none;}
属性选择器CSS 属性选择器匹配那些具有特定属性或属性值的元素。
123456789101112131415161718192021222324/* 存在 title 属性的 <a> 元素 */a[title] { color: purple;}/* 存在 href 属性并且属性 ...
TypeScript 高级类型
1. 联合类型123/* 首先是联合类型的介绍 */let a: string | number = '123' // 变量a的类型既可以是string，也可以是numbera = 123
2. Pick
选择
123456type UserInfo = { name: string; age?: number; sex: number;}const c: Pick<UserInfo, "name" | "age"> = { name: "", age: 12 }; // age 依然可选
3. Omit
类似于 Exclude， 可以排除类型中一部分的属性
12345678910111213141516type UserInfo = { uid: string; name: string; password: string; created: number; updated: number;}/** * 例如在用 ...
async/await 怎么更优雅的处理报错
Promise封装请求一般我们在使用Promise链式调用会显得代码不那么优雅，如果出现嵌套的问题，可读性较就会很差。
12345678910111213141516171819202122// 封装请求函数const request = (url, params) => { return new Promise((resolve, reject) => { // ...do something })}// 使用时const handleLogin = () => { request( '/basic/login', { usename: 'yangfan', password: '123456' } ).then(res => { // success do something }).catch(err => { // fail d ...
Javascript 之 url转义encodeURI()、encodeURIComponent()和escape()
当URL的参数中出现诸如+，空格，/，?，%，#，&，=等特殊字符串符号时，因为上述字符有特殊含义，导致服务器端无法正确解析参数，如何处理？解决办法：将这些字符转化成服务器可以识别的字符。
一. encodeURI()把字符串作为 URI整体进行编码，所以URI组件中的特殊分隔符号 (;/:@&=+$?#） (可以使用 encodeURIComponent() 方法分别对特殊含义的 ASCII 标点符号进行编码。)，encodeURI() 函数不会进行转义。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码：- _ . ! ~ * ‘ ( ) 。
123encodeURI('#') // '#'encodeURI('_') // '_'
1234encodeURI('https://mp.weixin.qq.com/')// 输出：'https://mp.weixin.qq.c ...
git cherry-pick 使用
用途在本地分支合入其他分支时，如果不想对整个分支进行合并，而只想对其中的某一次提交合并到当前本地分支，就需要使用 git cherry-pick 。
应用场景在实际的项目开发过程中，经常会在版本迭代的过程中，发现一些老版本遗留的问题。这时候，在新版本上针对该问题提交的修复，使用 git cherry-pick 就很容易应用到老版本上了。
例如：我们在某个项目的 feat/1.2.0 版本分支进行开发时，发现了 feat/1.1.0 版本遗留下来的一个问题。我们在 feat/1.2.0版本将其修复之后，还想将该修复应用于 feat/1.1.0 版本，这时候，只需要使用 git cherry-pick 命令即可。
操作流程假设我们在 feat/1.2.0 分支，并且已经针对 feat/1.1.0分支的问题进行了修复，产生了一次提交 09f76ee4a 。（如何查看提交的哈希序列： git log –oneline -3 ， 单行显示最近 3 条提交信息）。
具体流程如下:
切换到目标分支： git checkout feat& ...
git-MR 冲突解决
将代码合并到主分支的请求。当发起者发起 MR时，系统会自动将该分支或者仓库的代码和主分支的代码合并，如果发现冲突则需要进行解决。
示例：从 feat/1.1.2 分支提 MR 到 feat/1.1.1 分支
切换到目标分支：git checkout feat/1.1.1
更新代码：git pull
切换到源分支：git checkout feat/1.1.2
运行merge命令查看冲突文件：git merge feat/1.1.1
解决冲突：按住cmd，点击冲突文件可以跳到冲突代码处，选择更改或保留
添加更改文件：git add .
提交代码更改：git commit，这里不输入-m，可以自动保留分支的 merge信息
推送到远程分支：git push