前端

服务端

计算机基础

Node.js 中的 `DllPlugin` 及相关的 `DllReferencePlugin` 主要是用于改善构建时间和实现代码分离，在 Webpack 构建过程中使用。`DllPlugin` 用来打包出一个个独立的动态链接库文件，而 `DllReferencePlugin` 则用于在主应用程序中引用这些动态链接库。

以下是使用 `DllPlugin` 的具体步骤：

### 步骤 1: 创建 DLL 文件

首先，你需要在项目中创建一个 webpack 配置文件专门用于构建 DLL。

```javascript
// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['lodash', 'react'] // 假设我们希望将 lodash 和 react 打包成一个 DLL
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js', // 输出的文件名
    library: '[name]_library' // 全局变量名，其他模块会从此变量上获取到里面的模块
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};
```

这个配置会将 `lodash` 和 `react` 打包成一个名为 `vendor.dll.js` 的文件，并生成一个 `vendor-manifest.json` 文件。

### 步骤 2: 在主配置中引用 DLL

然后，在你的主 `webpack` 配置文件中，你需要使用 `DllReferencePlugin` 来引用上一步中生成的 `vendor-manifest.json` 文件。

```javascript
// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...你的其他配置
  plugins: [
    // ...你的其他插件
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json') // 引入 DLL 的 manifest 文件
    })
  ],
  // ...其余配置
};
```

### 步骤 3: 在 HTML 中引入 DLL 文件

最后，你需要确保在应用程序加载前，先在 HTML 文件中引入这些 DLL 文件。例如：

```html
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script src="./dist/vendor.dll.js"></script>
  
</body>
</html>
```

### 使用例子

假设你有一个大型项目，每次构建都需要很长时间，因为第三方库例如 `React`、`Vue` 或 `Lodash` 并不经常更改，但它们每次都会被重新编译。通过使用 DLL，你可以将这些库预编译成静态资源，以便在开发过程中重复使用，从而减少了构建时需要处理的工作量，并加快了构建速度。

使用 DLL 时需要注意的是，当你更新了 DLL 中的依赖项时，你需要重新构建 DLL 文件。同时，应当确保在生产环境构建中不包含 DLL 的引用，或者确保 DLL 是最新的，以避免因为版本不一致带来的问题。

总的来说，`DllPlugin` 提高了开发效率，尤其是在大型项目和频繁构建的环境中，它可以显著减少构建时间并提升开发体验。

nodejs 如何使用 DllPlugin 动态链接库？

HTML文档中，attribute（属性）和property（属性）这两个术语经常使用，它们在不同的上下文中有不同的含义。 

### 对象导向编程中的Attribute和Property

在对象导向编程（OOP）的上下文中，attribute和property通常指代与对象关联的数据，但它们的概念和用途有所不同。

**Attribute (属性)：**

- 在OOP中，attribute通常指的是对象的内部状态，它们是类定义中的变量。
- 这些是对象的数据成员，用于存储对象的信息。
- 例如，假设我们有一个 `Car`类，那么 `color`和 `model`可能是 `Car`对象的attributes。

**Property (属性)：**

- Property在OOP中通常指的是提供对attribute的访问的一种特殊方法，这些方法通常是通过getter和setter方法暴露的。
- Property允许封装attribute，从而可以在读取或修改attribute时添加附加的逻辑，如验证或事件触发。
- 例如，`Car`类可能有一个 `mileage`属性，它通过getter方法 `get_mileage()`和setter方法 `set_mileage(value)`来访问和修改里程信息，而不是直接公开一个 `mileage` attribute。

### HTML文档处理中的Attribute和Property

在HTML和Web开发的上下文中，attribute和property也有不同的含义。

**Attribute (属性)：**

- HTML attribute是HTML标签的一部分，用于在HTML文档中为元素定义特定的配置或行为。
- Attributes在HTML源代码中明确定义，例如 `<input type="text" value="Hello">`中的 `type`和 `value`。
- Attributes的值通常是在页面加载时定义的静态值。

**Property (属性)：**

- HTML元素在浏览器中表示为JavaScript对象，这些对象具有properties。
- 这些properties与JavaScript运行时相连，表示DOM元素的当前状态。
- Properties可以在运行时动态改变，例如，通过JavaScript改变input元素的 `value` property，`document.getElementById('myInput').value = 'New Value';`。

### 示例：

考虑HTML中的一个 `<input>`元素，其初始HTML可能如下所示：

```html
<input id="myInput" type="text" value="Initial">
```

这里，`id`、`type`和 `value`都是HTML attributes。

当页面加载后，我们可以通过JavaScript访问 `<input>`元素的property，比如：

```javascript
var inputElement = document.getElementById('myInput');
console.log(inputElement.value); // 输出: Initial
```

在这个时候，`value` attribute和 `value` property都是“Initial”。然而，如果用户在input框中输入新的文本，比如“Hello”，那么 `value` property将改变，而 `value` attribute仍然为“Initial”。


attribute和property的区别是什么

在移动端H5开发中，300ms点击延迟是一个历史问题，它最初是由于早期智能手机的浏览器为了区分单击与双击（放大操作）而故意设置的。用户在触摸屏幕的时候，浏览器会等待大约300毫秒来判断用户是否要进行双击操作。这在现代的Web开发中通常是不必要的，并且会导致用户体验下降。以下是几种常见的解决方法：

1. **使用viewport meta标签**：
   通过在HTML中添加viewport meta标签，可以禁用用户缩放，从而消除延迟。例如：
   ```html
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   ```
   这段代码能禁止用户缩放页面，因此浏览器不需要等待判断用户是否要双击缩放，从而消除了300ms延迟。

2. **CSS touch-action属性**：
   CSS的`touch-action`属性可以用来指定某个元素的一些触摸行为，例如：
   ```css
   button {
     touch-action: manipulation;
   }
   ```
   这个属性设置后可以关闭某些默认的触摸操作，比如缩放和双击滚动，从而消除延迟。

3. **快速点击库（如FastClick）**：
   FastClick是一个流行的JavaScript库，用于在不支持Pointer Events的浏览器上消除点击延迟。它通过监听触摸事件来避开300ms延迟。直接在`touchend`事件触发后立即发出click事件，从而绕过浏览器自身的300ms延迟。使用方法很简单，只需要在页面加载完毕后实例化FastClick对象即可：
   ```javascript
   if ('addEventListener' in document) {
     document.addEventListener('DOMContentLoaded', function() {
         FastClick.attach(document.body);
     }, false);
   }
   ```
4. **利用Pointer Events**：
   Pointer Events是一个浏览器的新标准，它可以合并触摸、鼠标、笔和其他类型的输入事件。通过使用pointerevent，你可以避免300ms延迟。例如：
   ```js
   element.addEventListener('pointerdown', function(event) {
     // 处理点击事件
   });
   ```
   然而，并非所有浏览器都支持Pointer Events，因此需要检查兼容性或使用polyfill。

5. **使用`touchstart`或`touchend`代替click事件**：
   你也可以直接监听`touchstart`或者`touchend`事件来代替click事件，这样可以避免等待300ms。但这种方法需要注意的是，`touchstart`和`touchend`可能会在用户没有意图点击时触发（例如滚动屏幕时），所以需要额外的逻辑来判断实际的用户意图。

以上就是几种常用的解决移动端H5点击300ms延迟的方法。在实际开发中，可能需要根据具体情况和浏览器的兼容性选择最适合的方案。

前端如何解决移动端H5点击有300ms延迟？

React 元素有一个 `$$typeof` 属性的原因主要是出于安全考虑，它是用来防止一种名为 XSSI（跨站脚本包含）的攻击。`$$typeof` 属性可以帮助确保在 React 应用中引入的数据是有效的 React 元素，而非恶意对象。

在过去，攻击者可能会尝试利用 JSONP 等技术将恶意脚本插入到网站中。JSONP 是一种通过 `<script>` 标签载入跨域的 JSON 数据的方法。在 JSONP 中，由于 `<script>` 标签会执行载入的内容，如果返回的数据不是纯粹的 JSON 而是可执行的 JavaScript 代码，那么它就可能被用于执行恶意脚本。

为了防止这种攻击，React 开发团队引入了 `$$typeof` 属性。每个通过 React.createElement 创建的元素都会自动添加这个属性。这个属性的值是一个特殊的符号（在支持 Symbol 的 JavaScript 环境中）或者一个特定的数字（在不支持 Symbol 的环境中）。这样，在 React 对元素进行处理之前，它可以检查元素是否具有正确的 `$$typeof` 值，确保该元素是由 React 创建的，从而防止可能的 XSSI 攻击。

例如，如果我们通过网络请求获取了一个对象，并且直接将其作为子元素传递给 React 来渲染，React 会检查这个对象是否具有正确的 `$$typeof` 属性。如果没有，React 将不会将其作为 React 元素进行处理，这样就能防止恶意对象被当作 React 元素来渲染，从而避免潜在的安全风险。

总之，`$$typeof` 属性是 React 为了增强应用安全而引入的一个机制，用于验证被处理的元素确实是通过 React 的正确方式创建的，从而避免了某些类型的安全漏洞。

为什么 React 元素有一个 $$typeof 属性

深拷贝和浅拷贝是编程中用于复制数据结构的两种不同方法，它们在复制复杂对象（如包含其他对象的对象或数组等）时的行为上有所区别。

### 浅拷贝

浅拷贝（Shallow Copy）只复制对象的顶层结构，如果对象中包含了对其他对象的引用，浅拷贝不会复制被引用的对象本身，而是复制引用。因此，原始对象和浅拷贝后的对象会共享相同的引用类型数据。

**例子**：
假设我们有一个对象`A`，它包含一个指向另一个对象`B`的引用。如果我们对`A`进行浅拷贝得到`A'`，那么`A'`中会有一个指向`B`的引用，而不是`B`的一个拷贝。如果我们修改`B`，那么这个修改会通过`A`和`A'`的引用被反映出来。

```python
import copy

original_list = [1, 2, [3, 4]]
shallow_copied_list = copy.copy(original_list)

# 修改原始列表中的嵌套列表元素
original_list[2][0] = "changed"

# 输出被浅拷贝的列表
print(shallow_copied_list)  # 输出将会是 [1, 2, ["changed", 4]]
```

在这个例子中，修改原始列表中嵌套列表的元素也会影响到浅拷贝的列表，因为它们共享同一个嵌套列表对象的引用。

### 深拷贝

深拷贝（Deep Copy）不仅仅复制对象的顶层结构，还会递归地复制所有对象的成员，包括对象中引用的对象。这样，原始对象和深拷贝后的对象不会共享任何引用类型的数据。

**例子**：
使用相同的对象`A`和`B`，如果我们对`A`进行深拷贝得到`A''`，那么`A''`将会包含一个`B`的完整拷贝`B'`。此时，如果我们修改`B`，`A''`中的`B'`不会受到影响，因为`B'`是一个独立的对象。

```python
import copy

original_list = [1, 2, [3, 4]]
deep_copied_list = copy.deepcopy(original_list)

# 修改原始列表中的嵌套列表元素
original_list[2][0] = "changed"

# 输出被深拷贝的列表
print(deep_copied_list)  # 输出将会是 [1, 2, [3, 4]]
```

在这个例子中，深拷贝的列表保持原有结构，不受原始列表中嵌套列表元素修改的影响。

总结来说，浅拷贝只复制了最顶层的对象，深拷贝则是复制了所有层级的对象，确保了复制体与原始数据结构之间完全独立。在实际应用中，选择浅拷贝还是深拷贝取决于具体的需求和情况。

什么是深拷贝？什么是浅拷贝？

弹性盒布局模型，通常称为Flexbox，是CSS3中的一种先进布局方式，旨在提供一种更有效的方式来布置、对齐和分配容器内项目的空间，即使它们的尺寸是未知或者是动态变化的。Flexbox布局给予了容器能够扩展项目以填充可用空间，或者收缩它们以防止溢出的能力。

### Flexbox的主要特点：

- **灵活性**：Flexbox允许项目的宽度和高度可以根据容器的空间动态伸缩。
- **方向无关性**：与传统的布局（如块布局，基于行，或内联布局，基于列）不同，Flexbox的方向可以是水平的或垂直的，这意味着它不受页面流的限制。
- **容器和项目的区别**：在Flexbox中存在两种类型的元素：容器（flex容器）和项目（flex项目）。容器用来定义一个flex环境并包含一些布局属性，项目则是容器的子元素，可以使用不同的属性来控制其自身的排版。
- **对齐**：可以轻松地在水平或垂直方向上对齐项目，这在以前的布局模型（如浮动或定位）中通常需要额外的工作。
- **空间分配**：当项目占用的空间小于容器的时候，可以控制多余空间的分配方式，或者当空间不足时，控制如何收缩项目。

### 例子：

假设我们有一个导航菜单，我们希望菜单项在容器内均匀分布，并且在不同屏幕尺寸上都能保持良好的布局。使用Flexbox，我们可以这样来定义容器和项目：

```css
/* Flex Container */
.nav-menu {
  display: flex;
  justify-content: space-between; /* 分散对齐子项 */
}

/* Flex Items */
.nav-item {
  flex-grow: 1; /* 允许子项根据需要占据空间 */
  text-align: center; /* 文本居中对齐 */
}
```

在HTML中，我们的导航菜单可能是这样的：

```html
<nav class="nav-menu">
  <a class="nav-item" href="#">首页</a>
  <a class="nav-item" href="#">关于我们</a>
  <a class="nav-item" href="#">服务</a>
  <a class="nav-item" href="#">联系方式</a>
</nav>
```

在上述示例中，`.nav-menu`是一个flex容器，`.nav-item`是其子项，也就是flex项目。通过对`.nav-menu`使用`display: flex;`属性，我们定义了一个弹性容器，并且使用`justify-content: space-between;`来确保`.nav-item`在容器内均匀分布。每个`.nav-item`都被设置了`flex-grow: 1;`属性，这意味着所有的子项都会根据可用空间进行伸缩，来占据容器的空间。这样，不管屏幕大小如何变化，菜单项都能保持均匀的布局。

Flexbox的这种灵活性和易用性，使得它成为创建响应式布局和现代网页设计必不可少的工具之一。

什么是弹性盒布局模型？

双向绑定是一种编程模式，用于简化用户界面与应用状态之间的同步。在传统的单向绑定中，用户界面(UI)只是从应用状态中读取数据并显示出来；而在双向绑定模式中，UI不仅可以显示出应用状态，还可以修改它，反过来也一样，应用状态的改变也会立即反映在UI上。

在Vue.js中，双向绑定主要通过`v-model`指令实现。`v-model`指令在内部使用了Vue的响应式系统，这个系统基于Object.defineProperty或Proxy(在Vue 3中)实现。下面是Vue实现双向绑定的两个主要步骤：

1. **响应式数据的建立**：
   - 在Vue 2.x版本中，Vue通过Object.defineProperty方法拦截对data对象属性的访问和修改。Vue将data对象中的每个属性都转换为getter/setter，并且在内部追踪这些属性的依赖（即哪些组件或计算属性依赖于这个数据属性）。
   - 在Vue 3.x版本中，Vue使用了ES6的Proxy特性来实现响应式。Proxy可以更灵活地拦截和定义对象属性的行为，包括属性的读取、写入以及枚举等，并且它是以更精细的方式工作，不再需要递归地遍历每个属性。
   
2. **依赖收集与派发更新**：
   - 当组件进行渲染时，会访问与之相关的响应式数据属性，这时Vue会进行依赖收集，即记录下当前组件依赖了哪些数据。
   - 当响应式数据发生变化时，Vue会通知所有依赖于这个数据的组件进行更新。
   - 如果是通过`v-model`绑定的输入元素（如`<input>`, `<select>`, `<textarea>`等）发生了用户输入，`v-model`会监听这些输入事件，将新的值赋值给绑定的数据属性。数据的更新又会触发组件的重新渲染，从而将更新反映在UI上。

例如，考虑下面的Vue模板代码：

```html
<input v-model="message">
```

这里的`v-model`指令绑定了一个名为`message`的数据属性。当用户在输入框中输入文字时，`message`的值会被更新，同时，如果其他地方的代码改变了`message`的值，输入框中显示的内容也会相应更新。

这种机制的好处是，开发者不需要手动监听输入事件然后更新数据，也不需要观察数据的变化再去更新UI，Vue的双向绑定机制会自动处理这一切。

什么是双向绑定？Vue 是如何实现双向绑定功能的？

在 Vue 3 中，`setup` 函数是组件选项 API 的替代，它允许您在组件创建之前使用组合式 API 设置组件的响应式状态和函数。通常情况下，`setup` 函数内部并不直接提供组件实例，因为它在组件实例创建之前就被调用了。但是，您可以通过 Vue 提供的 `getCurrentInstance` 方法来获取当前组件实例。

请注意，`getCurrentInstance` 主要用于库和框架的开发者，而不是推荐给普通应用程序开发中使用，因为它暴露了一些内部的 API，可能会导致与 Vue 的未来版本不兼容。

下面是如何在 `setup` 函数中获取组件实例的示例：

```javascript
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance();
    
    // 确保 instance 不为 null
    if (instance) {
      // 现在你可以访问组件实例的属性和方法
      console.log(instance.proxy); // 输出 Vue 代理对象，包含 data、methods 等
    }

    // 定义 setup 函数返回的响应式数据和方法
    return {
      // ...
    };
  },
};
```

在上述代码中，我们首先从 `vue` 导入了 `getCurrentInstance` 函数。在 `setup` 函数内部，我们调用了这个函数以获取当前组件的实例。`getCurrentInstance` 返回的是一个包含组件实例的内部数据的对象，其中 `instance.proxy` 属性代表了组件的代理对象，它包含组件的所有响应式数据、计算属性以及方法等。

使用 `getCurrentInstance` 时，请确保您的代码不过度依赖于 Vue 的内部实现，以免在未来的 Vue 版本升级中产生兼容问题。

vue3 中 setup 中如何获取组件实例

在 CSS (层叠样式表) 中，选择器的权重由其特定性（specificity）确定。具有更高特定性的样式规则将覆盖较低特定期的规则。以下就是计算特定性的方法：

1. 内联样式（Inline Styles）：在 HTML 元素内部使用 `style` 属性定义的样式。例如 `<div style="color: red;">` 的权重是 `1000`。
2. ID 选择器：如 `#content`（权重为 `0100`）。
3. 类选择器、属性选择器、伪类选择器：如 `.class`, `[type="text"]`, `:hover`（权重为 `0010`）。
4. 元素选择器、伪元素选择器：如 `div`, `p`, `::before` （权重为 `0001`）。
5. 特殊选择器：`*`、`+`、`>`、`~` 这些组合选择器不增加权重。
6. 对于 `!important` 属性权重最高，出现在样式属性值后,如 `color: red !important;` 。

计算权重时，各类选择器的数量是独立计算的，比较权重时，会按照四个层级（四个数字）进行逐级比较，权重高的样式优先生效。例如, ID 选择器的权重更高，所以 `#id p`（一个 ID 和一个元素，权重为 `0101`）会覆盖 `.class .class .class`（三个类，权重为 `0030`）的样式。可理解各部分权重为 四个 "十进制位"，高位权重大于低位。

> 请注意：权重只是决定 CSS 样式冲突的一个因素，还应考虑源代码的顺序和继承。


css 选择器的权重计算方式

JavaScript的继承方式主要包括以下几种：

### 1. 原型链继承 (Prototype Chain Inheritance)

原型链继承是JavaScript最基本的继承方式。每个JavaScript对象都有一个原型（`prototype`），对象从其原型继承属性和方法。创建子类时，将子类的原型设置为父类的实例，从而实现继承。

```javascript
function Parent() {
    this.parentProperty = true;
}

Parent.prototype.getParentProperty = function() {
    return this.parentProperty;
};

function Child() {
    this.childProperty = false;
}

Child.prototype = new Parent(); // 设置Child的原型为Parent的实例
Child.prototype.constructor = Child; // 修正constructor指向

var childInstance = new Child();
console.log(childInstance.getParentProperty()); // true
```

原型链继承存在的问题包括：创建子类实例时不能向父类构造函数传参，而且所有实例共享父类构造函数中的引用属性。

### 2. 构造函数继承 (Constructor Inheritance)

构造函数继承使用父类构造函数来增强子类实例，通过 `call`或 `apply`方法在子类构造函数中调用父类构造函数。

```javascript
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

function Child(name) {
    Parent.call(this, name); // 子类构造函数中调用父类构造函数
}

var childInstance = new Child('ChildName');
console.log(childInstance.name); // ChildName
```

这种方式允许不同的子类实例有不同的属性。不过，它无法继承父类原型上定义的方法，因此不是真正意义上的继承。

### 3. 组合继承 (Combination Inheritance)

组合继承结合了原型链和构造函数的技术，通过使用原型链继承原型上的属性和方法，使用构造函数继承实例属性。

```javascript
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    return this.name;
};

function Child(name, age) {
    Parent.call(this, name); // 借用构造函数继承属性
    this.age = age;
}

Child.prototype = new Parent(); // 原型链继承方法
Child.prototype.constructor = Child;

var childInstance = new Child('ChildName', 18);
console.log(childInstance.sayName()); // ChildName
console.log(childInstance.age); // 18
```

组合继承弥补了原型链和构造函数继承的不足，然而它也使得父类构造函数被调用两次，造成了一些不必要的性能开销。

### 4. 原型式继承 (Prototypal Inheritance)

原型式继承是指使用一个已有对象作为新创建对象的原型。ES5引入了 `Object.create`方法来实现原型式继承。

```javascript
var parent = {
    name: 'Parent',
    sayName: function() {
        return this.name;
    }
};

var child = Object.create(parent);
child.name = 'Child';

console.log(child.sayName()); // Child
```

这种方式非常简洁，但同样，所有实例会共享引用属性。

### 5. 寄生式继承 (Parasitic Inheritance)

寄生式继承类似于原型式继承，但是在此基础上可以增加更多属性或方法。

```javascript
var parent = {
    name: 'Parent',
    sayName: function() {
        return this.name;
    }
};

function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHi = function() {
        console.log('Hi');
    };
    return clone;
}

var child = createAnother(parent);
child.sayHi(); // Hi
```


面试题手册