配置 Vite 支持用 “@” 路径别名导入文件

需要做如下两步配置。

1、让 vite 能识别 @ 路径别名

vite.config.js 增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { resolve } from 'path';

export default defineConfig {
// ...
resolve: {
alias: {
"@": resolve(__dirname, 'src'), // vite 编译的路径别名
},
// extensions: ['.js', '.json', '.ts'], // 使用路径别名时省略后缀名编译时补全,默认值为 ['.js', '.json', '.ts']
}
// ...
}

2、让 IDE 能识别 @ 路径别名

用 @ 路径别名导入文件后,IDE (如 jetbrains 家的)要能识别导入路径,实现代码提示识别,点击导入变量或导入路径能跳转到文件。

在根目录下的 jsconfig.json 加入以下内容:

1
2
3
4
5
6
7
8
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

JavaScript 箭头函数与 function 函数的区别

见过箭头函数后,知道箭头函数是 function 定义函数的简写,然后还有一点是箭头函数中的 this 是上级代码的 this
其实除了这两点外,箭头函数和 function 函数还有很多区别。

1、基本语法

1
2
3
4
5
6
7
8
9
10
11
12
// 没有参数时
() => {
// code ...
}
// 有参数时
(param1, param2, ..., paramN) => {
// code ...
}
// 只有1个参数时,圆括号可以省略
param => {
// code ...
}

2、this 指向

  • 顶级代码中, this 指向 window 对象;
  • function 定义的函数中, this 指向该函数的对象;
  • 箭头函数中,箭头函数不会创建自己的 this,始终指向箭头函数所在作用域下的 this

用原型方法 apply()call()bind() 不能改变箭头函数中 this 的指向。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const bar = {
name: 'johnny'
};
function foo () {
console.log(this.name);
}

const fa = () => {
console.log(this.name);
};

// bar 作为 foo() 实例的 this
foo.call(bar); // johnny
fa.call(bar); // TypeError: Cannot read properties of undefined (reading 'name')

3、箭头函数不能做构造函数

阅读更多

用可变变量访问 JavaScript 类、对象的方法(动态访问 JS 类、对象的方法)

JavaScript中,用可变变量访问对象方法或类静态方法,如果访问的方法中 this,此时 this 将会是 undefined
用对象解构赋值获得函数名(如:xxx)后,用函数名后面加括号(如:xxx())执行函数,this 也是 undefined

问题复现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 动态访问方法
class Cls1 {
fn () {
console.log(this);
}
}

const obj = new Cls1();

// ❌ 错误方法
const fn1 = obj.fn;
fn1(); // this undefined

// 解构赋值取得
const { fn } = obj;

// ❌ 错误方法
fn(); // this undefined

阅读更多

彻底搞清 JavaScript Promise

基本用法

我们知道,一个 js Promise 对象,我们可以用 then()catch()finally() 进行链式操作,如:

1
2
3
4
5
6
7
promiseObj.then((res) => {
// do something
}).catch((error) => {
// do something
}).finally(() => {
// do something
})

这是 js Promise 的基本使用,但是要用好 Promise,还有一下几个问题需要搞清楚。

怎样创建 Promise 对象

Promise 对象创建 Promise 实例

阅读更多