:::tip{title="环球影城游玩"}
本文章介绍了去北京环球影城的攻略介绍
:::


# 一、简介

> 北京环球影城位于北京的通州区，是世界第五个，亚洲第三个环球影城。这七大景区分别为功夫熊猫盖世之地、变形金刚基地、小黄人乐园、哈利波特的魔法世界、侏罗纪世界努布拉岛、好莱坞和未来水世界，并配有游乐设施、娱乐表演、特色商店和餐饮。

# 二、交通路线

> 交通：北京环球影城位于北京市通州区，北京西站-7 号线-`环球影城站`
> 北京南站-4 号线-7 号线-`环球影城站`
> 北京站--2 号线-1 号线-`环球度假区站`

# 三、入园准备

1.  轻装上阵，园区内较大，选择舒适的鞋子和衣物。
2.  携带好身份证、银行卡、手机、充电宝、防晒伞。

# 四、园区开放时间

> 9 点开门，8:45 就能进，最好 8:30 就在门外等候，进去是城市 大道，大地球的坐落地，拍照打卡早上人会比较多，晚上灯光好看拍照更好看！

# 五、园区内

## 1、好莱坞大道

> 入园咱们是肯定先路过好莱坞大道，别过多的停留！记住路线的位置，等下午回来刷项目

## 2、火种源争夺战

> 导览：因为入园大部分游客都冲向哈利波特区，住在环球酒店的游客有提前一小时入园礼遇，玩完哈利波特区都涌向了侏罗纪区，所以咱们第一站选择不好找到入口的火种源争夺战

## 3、功夫熊猫区

> 导览：功夫熊猫区正这时候是游客最少的时候，基本上排队时间在 10 分钟内

## 4、未来水世界

> 导览:未来水世界春节回归啦！11 点左右我们来到第一场未来水世界，未来水世界区项目单一看完表演就不走回头路了，早来的原因是挑选自己心仪的位置，跟演员互动感更强

## 5、小黄人区

> 导览：未来水世界散场后，大批游客就近去了哈利波特区，而我们选择稍远的小黄人区，这个时间点小黄人区游客较少，室外拍照光线比较好，室内也比较暖和

## 6、哈利波特区

> 导览：哈利波特是人流量最大的园区，我们只能趁着用餐的高峰期 12:30 到 14:30 这个区间去，刚好赶上水世界的表演要开始，这时候禁忌之旅可以减少排队时间

## 7、侏罗纪区

> 导览：侏罗纪园区上午的排队时间在 35 分钟，但下午往往排队时间会减少很多，这时候游玩再合适不过了

## 8、不可驯服表演现场

> 导览：环球表演类必打卡项目，看完迅速跑回可乐塔看快闪节目（舞出我精彩）

## 9、霸天虎过山车

> 导览：相对靠后玩霸天虎是因为项目比较刺激，放在开端可能会引起身体不适

# 六、地图

![地图](https://img2.imgtp.com/2024/05/10/unguMpPE.webp))

环球影城

:::tip{title="媒体查询"}
本文介绍了响应式设计中常用的设备屏幕宽度断点以及相应的媒体查询方法，分为移动端和PC端，并提供了屏幕尺寸查询工具的链接。
:::


# 设备屏幕宽度常用断点

> 设备屏幕设备尺寸很多，一般写断点时以 Apple 设备的屏幕尺寸为标准

- `min-width`  表示**移动端优先**
  - 样式默认在所有屏幕尺寸下都有效
  - 常用于先写移动端的场景
- `max-width`  表示  **PC 端优先**
  - 样式默认在指定屏幕尺寸下有效
  - 常用于先写 PC 端的场景

# 移动端

> 移动端包含手机和平板

```css
/* iPhone 4 / 5 等 */
@media (min-width: 320px) {
}

/* iPhone 6 - 8 / X / XS 等 */
@media (min-width: 375px) {
}

/* iPhone 6 - 8 Plus / XR 等 */
@media (min-width: 414px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 640px) {
}

/* iPad mini 等 */
@media (min-width: 768px) {
}

/* 常用断点（无特定机型） */
@media (min-width: 960px) {
}

/* iPad Pro 12.9 */
@media (min-width: 1024px) {
}
```

# PC 端

```css
@media (max-width: 1280px) {
}

@media (max-width: 1366px) {
}

@media (max-width: 1440px) {
}

@media (max-width: 1920px) {
}

@media (max-width: 2560px) {
}
```

# 屏幕尺寸查询工具

- [屏幕尺寸大全](https://uiiiuiii.com/screen/index.htm)
- [screen size map](https://screensizemap.com/)  可视化屏幕尺寸比较

媒体查询

:::tip{title=" .npmrc 学习笔记"}
本文介绍了 .npmrc 如何修改、管理
:::


`.npmrc` 是 `npm` 配置文件，可以通过修改配置项对 `npm` 做配置

🌰: 修改镜像源

```shell
registry=https://registry.npmmirror.com
```

```shell
# 查看所有配置
npm config ls [-l|--json]

# 查看配置
npm config get <key
#OR
npm get <key

# 查看配置
npm config delete <key

# 修改配置
npm config set <key <value
#OR
npm set <key <value

# 编辑配置文件
npm config edit [-g|--global]
```

[配置说明](https://docs.npmjs.com/cli/v8/using-npm/config#config-settings)

## 配置读取顺序

1.  命令行
2.  项目配置(项目根目录下的 `npmrc` 文件)
3.  用户配置(用 `npm config get userconfig` 查看文件位置)
4.  全局配置(用 `npm config get prefix` 查看文件位置)
5.  默认配置

## 其他包管理器

### yarn

- [yarn 1](https://github.com/yarnpkg/yarn) 使用 `.yarnrc` 和 `.npmrc` 文件
- [yarn 2](https://github.com/yarnpkg/berry) 使用 `.yarnrc.yml` 文件(不再使用 `.yarnrc` 和 `.npmrc`)

  - [相关说明](https://yarnpkg.com/getting-started/migration#dont-use-npmrc-files)

#### 踩坑点

在 `yarn 1` 中如果同时存在 `.yarnrc` 和 `.npmrc` 文件时， `.npmrc` 优先级高于 `.yarnrc` 当我们使用 `yarn 1` 时项目只需要配置 `.npmrc` 文件

- 相关 issues

  - [#3683](https://github.com/yarnpkg/yarn/issues/3683)
  - [#2672](https://github.com/yarnpkg/yarn/issues/2672)

### pnpm

[pnpm](https://pnpm.io/zh/) 使用 `.npmrc` 文件

.npmrc 管理

:::tip{title="事件循环-原理"}
本文介绍了事件循环-原理，讲明白了JS如何在浏览器中运行
:::

> **`单线程`** 是 **`异步产生`** 的原因
> **`事件循环`** 是 **`异步的实现方式`**

# **浏览器的进程模型**

## 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块 **`内存空间`** 简单的 **`理解为进程`**

![https://image.myxuechao.com/JS/1.png](https://image.myxuechao.com/JS/1.png)

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

## 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为 **`主线程`**。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![https://image.myxuechao.com/JS/2.png](https://image.myxuechao.com/JS/2.png)

![https://image.myxuechao.com/JS/2.png](https://image.myxuechao.com/JS/2.png)

## 浏览器有哪些进程和线程？

- **浏览器是一个多进程多线程的应用程序**
- 浏览器内部工作极其复杂。
- 为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![https://image.myxuechao.com/JS/3.png](https://image.myxuechao.com/JS/3.png)

> 可以在 **`浏览器的任务管理器中`** 查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（ **`本章节课重点讲解的进程`** ）

   渲染进程启动后，会开启一个 **`渲染主线程`** ，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome 官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

# 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![https://image.myxuechao.com/JS/4.png](https://image.myxuechao.com/JS/4.png)

1.  在最开始的时候，渲染主线程会进入一个无限循环
2.  每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务

    执行，执行完一个后进入下一次循环;如果没有，则进入休眠状态。

3.  其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任
    务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会
    将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。
**整个过程，被称之为事件循环(消息循环)**

## 何为异步?

代码在执行过程中，会遇到一些无法立即处理的任务，比如:

- 计时完成后需要执行的任务 —— **`setTimeout`** 、 **`setInterval`**
- 网络通信完成后需要执行的任务 -- **`XHR`** 、 **`Fetch`**
- 用户操作后需要执行的任务 -- **`addEventListener`**

如果让渲染主线程等待这些任务的时机达到，就会导致主线程⻓期处于 「阻塞」的状态，从而导致浏览器「卡死」

**同步：例子**

![https://image.myxuechao.com/JS/5.png](https://image.myxuechao.com/JS/5.png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![https://image.myxuechao.com/JS/6.png](https://image.myxuechao.com/JS/6.png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 参考答案：
>
> JS 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

## JS 为何会阻碍渲染？

- 先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '你很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

思考为啥 **`点击了按钮文本没有立刻变化`** 而逝等 **`delay函数`** 执行完毕后才变化

## 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个 **`微队列`**，**`微队列中的任务优先所有其他任务执行`**
  [https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint)

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- **`延时队列`** ：用于存放计时器到达后的回调任务，**`优先级「中」`**
- **`交互队列`** ：用于存放用户操作后产生的事件处理任务，**`优先级「高」`**
- **`微队列`** ：用户存放需要最快执行的任务，**`优先级「最高」`**

## 任务到微队列的主要方式有哪些？

- 添加任务到微队列的主要方式主要是使用 **`Promise`**、**`MutationObserver`**

```jsx
// 立即把一个函数添加到微队列
Promise.resolve().then(函数);
```

## 面试题-阐述一下 JS 的事件循环

> 参考答案:
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息
> 队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到
> 队列末尾即可。
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的
> 浏览器环境，取而代之的是一种更加灵活多变的处理方式。
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一
> 个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，
> 在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须
> 有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

## 面试题-JS中的计时器能做到精确计时吗? 为什么?

> 参考答案:
>
> 不行，因为:
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的
>
> 是操作系统的函数，也就携带了这些偏差 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，
>
> 则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来
>
> 了偏差 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此
>
> 又带来了偏差

事件循环-原理

:::tip{title=" webpack 自动编译 Ts"}
本文介绍了 `webpack` 编译 `TypeScript` 它将自动编译成 `JavaScript` 代码，并自动刷新浏览器。无需关心使用命令去转换成 `JS` 代码，只关心书写ts代码就行了可以直接在浏览器看到结果
:::
 


# 一、新建 index.html 页面

- 使用 `mkdir` 命令来创建 `public 目录`，然后再使用 `touch` 命令创建 `index.html 文件`。示例如下：

```bash
mkdir public
touch public/index.html
```

- 这将先创建一个名为 `public 的目录`，然后在该目录下创建 `index.html 文件`。现在你就可以在 `public/index.html` 文件中编写 `HTML` 代码了。
- 接下来，在 `public/index.html` 文件中编写 基本的 的代码。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack & TS</title>
  </head>
  <body></body>
</html>
```

# 二、新建入口文件 TS

- 使用 `mkdir` 命令来创建 `src 目录`，然后再使用 `touch` 命令创建 `main.ts 文件`。示例如下：

```bash
mkdir src
touch src/main.ts
```

- 这将先创建一个名为 `src 的目录`，然后在该目录下创建 `main.ts 文件`。现在你就可以在 `src/main.ts` 文件中编写 `TypeScript` 代码了。
- 接下来，在 `src/main.ts` 文件中编写 基本的 的代码。

```jsx
document.write('hello Webpack TS1!');
let arr: number = 100;
console.log('arr: ', arr);
```

# 三、安装依赖

- 首先，在项目的 `根` 目录，然后使用 `npm init -y` 命令初始化 `package.json` 文件。

```bash
npm init -y
```

- 接下来，使用 `npm install` 命令安装 `webpack`、`webpack-cli`、`typescript`、`ts-loader` 等相关依赖。

```jsx
npm i -D typescript
npm i -D webpack@4.41.5 webpack-cli@3.3.10
npm i -D webpack-dev-server@3.10.2
npm i -D html-webpack-plugin@4.5.0  clean-webpack-plugin@3.0.0
npm i -D ts-loader@8.0.17  -D cross-env@7.0.3
```

# 四、配置 webpack.config.js

- 首先，在项目的 `根` 目录，使用 `mkdir` 命令创建 `build` 文件夹， 然后在该目录下使用 `touch` 命令创建 `webpack.config.js 文件`。

```bash
mkdir build
touch build/webpack.config.js
```

- 接下来，在 `webpack.config.js` 文件中编写 `webpack` 的配置信息。

```jsx
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const isProd = process.env.NODE_ENV === 'production'; // 是否生产环境

function resolve(dir) {
  return path.resolve(__dirname, '..', dir);
}

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/min.ts',
  },

  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js',
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin({}),

    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },

  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8083,
    open: true,
  },
};
```

# 五、配置 tsconfig.json

- 首先，在项目的 `根` 目录，使用 `touch` 命令创建 `tsconfig.json 文件`。

```bash
touch tsconfig.json
```

- 接下来，在 `tsconfig.json` 文件中编写 `TypeScript` 的配置信息。

```jsx
{
  "compileOnSave": true, // 保存时自动编译
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // 模块化规范
    "strict": false, // 严格模式
  }
}
```

# 六、在 package.json 配置启动命令

- 接下来，在 `package.json` 文件中编写 `scripts` 命令的配置信息。

```jsx
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
```

# 七、启动项目

- 接下来，终端启动在 `package.json` 文件中 `scripts` 命令的配置信息。

```bash
npm run dev
```

- 接下来，在浏览器中访问 `http://localhost:8083` 即可看到效果。
    
    ![https://image.myxuechao.com/TS/1.png](https://image.myxuechao.com/TS/1.png)
    

# 八、效果图

![https://image.myxuechao.com/TS/2.png](https://image.myxuechao.com/TS/2.png)

![https://image.myxuechao.com/TS/3.png](https://image.myxuechao.com/TS/3.png)

# 九、总结

- 以上，就是使用 `webpack` 自动编译 `TypeScript` 的过程。
- 接下来，我们就可以在 `src/main.ts` 文件中编写 `TypeScript` 代码了。
- 它将自动编译成 `JavaScript` 代码，并自动刷新浏览器。

# 十、项目地址

- [项目地址](https://gitee.com/lxc482113948/ts_webpack_auto-compile.git)

# 参考文档

- [webpack 中文网](https://www.webpackjs.com/)
- [TypeScript 中文网](https://www.tslang.cn/)
- [TypeScript 入门教程](https://ts.xcatliu.com/)
- [TypeScript 官方文档](https://www.typescriptlang.org/docs/handbook/basic-types.html)