js 部分

export

  • export 用于导出一个或多个变量、函数、类
  • export default 用户导出一个默认的值

两者导出和导入

exprot 导出：

1
2
3
4
5
// 导出多个命名的变量或函数
export const name = 'snailuu';
export function greet() {
	console.log('Hello World!');
}

export 导入：

1
import { name, greet } from './app.js';

export default 导出：

1
2
3
4
// 导出默认的函数
export default function () {
	console.log('Default export');
}

export default 导入：

1
import myFunction from './app.js';

concat

  • concat 用于将多个字符串拼接成一个字符串
  • concat 可以接受一个或多个参数，并在其中使用逗号分隔它们
  • concat 返回一个字符串
    使用方法：
1
2
3
4
const str1 = 'Hello';
const str2 = 'World';
const result = str1.concat(' ', str2);
console.log(result); // 输出: "Hello World"

对象传递与引用

如果想在方法中给对象重新赋值，直接通过obj.属性值这样子去修改，而不是通过obj={新对象}这样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * 修改对象，仅保留需要的属性
 * @param {Object} obj 要修改的对象
 * @param {Array<string>} keys 需要保留的属性名数组
 */

function includes(arr, target) {
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] === target) {
			return true;
		}
	}
	return false;
}

function pick(obj, keys) {
	for (var key in obj) {
		if (!includes(keys, key)) {
			// 不保留此属性
			delete obj[key];
		}
	}
}

var obj = {
	a: 1,
	b: 2,
	c: 3,
	d: 4,
};

pick(obj, ['a', 'c']);

console.log(obj);

原型减少内存

如果在对象中声明一个方法，不同的实例对象会开辟不同的方法内存，比如

1
2
3
4
5
6
7
8
9
10
11
function User(name, age) {
	this.name = name;
	this.age = age;
	this.sayHi = function () {
		console.log('你好，我是' + this.name + '，今年' + this.age + '岁了');
	};
}

var u1 = new User('huang', 17);
var u2 = new User('黄哈哈', 77);
var u3 = new User('李大炮', 18);

这样子在分别实例化u1、u2、u3的时候都会开辟一个各自的方法内存，在控制台打印u1.sayHi === u2.sayHi 会输出false

每个函数都会自动附带一个属性prototype，这个属性的值是一个普通对象，称之为原型对象

每个实例属性的查找流程：

  • 先看本身是否有该属性
  • 如果没有查看隐式原型
    这样一来上面的代码就可以写成下面这样子：
1
2
3
4
5
6
7
8
9
10
11
12
function User(name, age) {
	this.name = name;
	this.age = age;
}

User.prototype.sayHi = function () {
	console.log('你好，我是' + this.name + '，今年' + this.age + '岁了');
};

var u1 = new User('huang', 17);
var u2 = new User('黄哈哈', 77);
var u3 = new User('李大炮', 18);

call/apply

两者作用：改变 this 的指向
区别：

call apply
第一个参数为指向的对象，后面依次为对应函数的参数 第一个参数为指向的对象，第二个参数为一个数组，里面内容依次为对应函数的参数

原型链

  • 判断原型：instanceof
  • 获取隐式原型：getPrototypeOf()
  • 创建空原型对象（无proto）：Object.create()
  • 改变隐式原型指向：setPrototypeOf(obj, prototype) （设置 obj 的隐式原型为 prototype）

css 部分

vue 部分

全局变量

vue3 项目引入全局变量

1
2
3
main.js;
const req_url = 'http://192.168.1.118:8000/';
app.provide('req_url', req_url);

在其setup直接引用

1
<script setup>import {inject} from 'vue'; inject('req_url')</script>