2024年1月15日

最新推荐文章于 2024-06-22 15:10:18 发布

爱猪头的程序猿

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量1k

点赞数 23

文章标签：前端

本文链接：https://blog.csdn.net/qq_46670243/article/details/135607225

版权

1、桌面应用用到系统本身api

1. 文件系统（File System）：

使用 Node.js 的 fs 模块来进行文件系统操作，读写文件，创建文件夹等。

2. 操作系统信息（Operating System Information）：

使用 Node.js 的 os 模块获取关于操作系统的信息，如平台、架构、内存等。

3. 网络请求（Network Requests）：

使用 Node.js 的 http 或 https 模块进行网络请求。

使用 Electron 内置的 net 模块进行更高级的网络操作，如创建原生的 TCP 或 UDP 服务器。

4. 进程控制（Process Control）：

使用 Node.js 的 child_process 模块启动子进程，执行系统命令。

5. 本地存储（Local Storage）：

使用 Node.js 的 localStorage 或 sessionStorage 来进行本地数据存储。

6. 系统通知（System Notifications）：

使用 Electron 的 Notification 模块进行系统通知的显示。

7. 剪贴板操作（Clipboard）：

使用 Electron 的 clipboard 模块进行剪贴板的读写操作。

8. 系统托盘（System Tray）：

使用 Electron 的 Tray 模块创建系统托盘图标。

9. 系统菜单（System Menu）：

使用 Electron 的 Menu 和 MenuItem 模块创建和管理应用的系统菜单。

10. 原生窗口操作（Native Window Actions）：

使用 Electron 提供的 API 操作原生窗口，例如最小化、最大化、关闭窗口等。

11. 打开文件对话框（Open File Dialog）：

使用 Electron 的 dialog 模块打开文件对话框。

12. 系统级别的快捷键（System-wide Shortcuts）：

使用 Electron 的 globalShortcut 模块注册全局快捷键。

2、桌面应用多窗口通信

1. 主进程和渲染进程之间的通信：

在 Electron 中，主进程和渲染进程之间的通信可以使用 Electron 提供的 IPC（Inter-Process Communication）模块。

// main.js

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;
let secondWindow;

app.whenReady().then(() => {
mainWindow = new BrowserWindow();
mainWindow.loadFile('index.html');

secondWindow = new BrowserWindow();

ipcMain.on('message-from-renderer', (event, arg) => {
 console.log(arg); // 打印从渲染进程接收到的消息
 secondWindow.webContents.send('message-from-main', 'Hello from main process!');
});
});

在渲染进程中：

javascriptCopy code
// renderer.js

const { ipcRenderer } = require('electron');

// 发送消息到主进程
ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');

// 接收主进程的消息
ipcRenderer.on('message-from-main', (event, arg) => {
console.log(arg); // 打印从主进程接收到的消息
});

2. 渲染进程之间的通信：

渲染进程之间的通信可以使用 Electron 提供的 IPC 模块，也可以通过使用全局共享变量（比如 global 对象）。

使用 IPC 模块：

javascriptCopy code
// renderer.js

const { ipcRenderer } = require('electron');

// 发送消息到另一个渲染进程
ipcRenderer.sendTo(2, 'message-to-window-2', 'Hello from window 1!');

// 接收另一个渲染进程的消息
ipcRenderer.on('message-to-window-1', (event, arg) => {
console.log(arg); // 打印从另一个渲染进程接收到的消息
});

使用全局共享变量：

javascriptCopy code
// renderer.js

// 设置全局共享变量
global.sharedData = {
message: 'Hello from window 1!'
};
javascriptCopy code
// anotherRenderer.js

// 读取全局共享变量
console.log(global.sharedData.message); // 输出 'Hello from window 1!'

这是一种基本的多窗口通信方法，实际应用中，你可能需要根据你的需求来选择使用 IPC 模块、全局共享变量或其他通信方式。在设计多窗口应用时，也需要考虑到通信的安全性和性能方面的因素。

3、两个渲染进程通信

在 Electron 中，两个渲染进程之间的通信可以使用 Electron 提供的 IPC（Inter-Process Communication）模块。以下是一个简单的示例，演示了两个渲染进程之间的通信：

渲染进程1：
javascriptCopy code
// renderer1.js

const { ipcRenderer } = require('electron');

// 发送消息到渲染进程2
ipcRenderer.send('message-to-renderer2', 'Hello from Renderer 1!');

// 接收渲染进程2的消息
ipcRenderer.on('message-to-renderer1', (event, arg) => {
console.log(arg); // 打印从渲染进程2接收到的消息
});
渲染进程2：
javascriptCopy code
// renderer2.js

const { ipcRenderer } = require('electron');

// 发送消息到渲染进程1
ipcRenderer.send('message-to-renderer1', 'Hello from Renderer 2!');

// 接收渲染进程1的消息
ipcRenderer.on('message-to-renderer2', (event, arg) => {
console.log(arg); // 打印从渲染进程1接收到的消息
});
在这个例子中，两个渲染进程分别使用 ipcRenderer 对象来发送和接收 IPC 消息。渲染进程1向渲染进程2发送消息，渲染进程2接收消息并回应，实现了双向通信。

确保在主进程中创建了这两个渲染进程的 BrowserWindow，并加载了对应的 HTML 文件：

在主进程 main.js：
javascriptCopy code
// main.js

const { app, BrowserWindow } = require('electron');

let renderer1, renderer2;

app.whenReady().then(() => {
renderer1 = new BrowserWindow({ width: 800, height: 600 });
renderer1.loadFile('renderer1.html');

renderer2 = new BrowserWindow({ width: 800, height: 600 });
renderer2.loadFile('renderer2.html');
});
上述代码在主进程中创建了两个 BrowserWindow，分别加载了 renderer1.html 和 renderer2.html 文件。在每个渲染进程中，通过 ipcRenderer 发送和接收消息，实现了两个渲染进程之间的通信。

4、按钮权限的缺陷

前端安全性：

按钮权限通常是在前端进行控制的，因此它们并不能提供真正的安全性。用户可以通过修改前端代码或使用浏览器开发者工具来绕过按钮权限。

不可信任的前端：

如果按钮权限是通过前端来控制的，那么前端代码是不可信任的。用户可以通过修改前端代码或发送恶意请求来绕过按钮权限。

不适用于敏感操作：

对于一些敏感的操作，如删除数据或进行金融交易，仅仅通过前端按钮权限是不足够的。在这些情况下，需要在后端进行严格的权限验证。

数据一致性问题：

如果按钮权限仅仅是用于控制按钮的显示或隐藏，而不影响后端的数据访问权限，可能会导致数据一致性问题。用户可能通过其他手段访问到他们没有权限的数据。

难以维护：

随着应用的复杂性增加，按钮权限的管理可能变得复杂，特别是当涉及多个角色和多个页面时。这可能导致权限管理的不一致性和难以维护性。

仅作为辅助手段：

按钮权限通常应该被视为前端用户体验的辅助手段，而不是真正的安全控制。真正的权限控制应该在后端进行，前端只是用于提供更友好的用户界面。

5、diff算法

1. 虚拟 DOM：

Vue.js 使用虚拟 DOM（Virtual DOM）来表示页面的状态。虚拟 DOM 是一个轻量级的 JavaScript 对象树，与实际的 DOM 结构相对应。当数据发生变化时，Vue 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较。

2. 更新策略：

Vue.js 采用了一种双端比较的策略，即同时从新旧虚拟 DOM 树的两端开始比较，逐步向中间靠拢。这种策略能够更好地处理组件列表两端的操作，提高比较的效率。

3. Key 值的使用：

Vue.js 要求在使用 v-for 渲染列表时，为每个项提供唯一的 key。这个 key 值在 Diff 算法中起着关键的作用。有了 key，算法能够精确追踪每个节点的变化，避免不必要的 DOM 操作。

4. 同级比较：

Vue 的 Diff 算法主要关注同级别的节点比较。当两个节点发生变化时，Vue 会尽量找到最小的变更操作，以减少 DOM 操作的开销。

5. 组件级别的比较：

对于组件，Vue 会递归地比较组件的内部结构。如果组件的根节点相同，Vue 将会对它们的子节点进行比较。这种递归比较确保了组件级别的更新，而不仅仅是单纯地替换整个组件。

6. 异步更新队列：

Vue 采用了异步更新队列的机制，将多次数据变更合并成一次更新操作。这样可以最大程度地减少实际的 DOM 操作，提高性能。

7. Patch 过程：

在比较完成后，Vue 会生成一组最小化的 DOM 操作指令，这一步被称为 "Patch" 过程。这些指令会应用到实际的 DOM 上，从而完成页面的更新。

6、选项式api和组合式api区别

1. 选项式 API:

选项式 API 是 Vue 2.x 中一直使用的 API 风格，主要通过配置选项创建组件。在 Vue 2.x 中，组件的定义通常包含 data、methods、computed、watch、lifecycle hooks 等选项。
vueCopy code
<template>
<div>{{ message }}</div>
</template>

<script>
export default {
data() {
 return {
   message: 'Hello, Vue!'
 };
},
methods: {
 updateMessage() {
   this.message = 'Updated message!';
 }
},
mounted() {
 this.updateMessage();
}
};
</script>
2. 组合式 API:

组合式 API 是 Vue 3 中引入的新的 API 风格，它提供了更灵活的组件组织方式，将相关的逻辑组合在一起。主要包含 setup 函数，ref、reactive、watch 等新的函数和 API。
vueCopy code
<template>
<div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
setup() {
 const message = ref('Hello, Vue!');

 const updateMessage = () => {
   message.value = 'Updated message!';
 };

 onMounted(() => {
   updateMessage();
 });

 return {
   message,
   updateMessage
 };
}
};
</script>
区别总结：

设计理念：

选项式 API 更加声明式，通过配置选项直观地描述组件。

组合式 API 更加函数式，通过函数组合的方式更灵活地组织和复用逻辑。

代码组织：

选项式 API 将不同的逻辑分散在不同的选项中，比较传统。

组合式 API 将相关逻辑组织在 setup 函数中，更加集中和一致。

可读性和维护性：

选项式 API 在小型应用和团队中可能更容易理解和维护。

组合式 API 在大型应用和需要更高可维护性的场景中更有优势。

7、垃圾回收机制

前端中的垃圾回收机制主要包括以下几个方面：

标记-清除（Mark and Sweep）：

这是最常见的垃圾回收算法之一。在 JavaScript 中，垃圾回收器会周期性地检查对象的引用关系。如果某个对象不再被引用，垃圾回收器会将其标记为可回收，然后在清理阶段将这些被标记的对象释放。

引用计数（Reference Counting）：

这是一种比较简单的垃圾回收算法，它通过记录每个对象被引用的次数。当引用次数为零时，表示对象不再被引用，可以被回收。然而，引用计数难以解决循环引用的问题，因为循环引用会导致引用计数不为零，即使对象已经不再被访问。

标记-整理（Mark and Compact）：

这是一种结合了标记-清除和整理的算法。在标记阶段，垃圾回收器标记出所有被引用的对象；在清理阶段，垃圾回收器清理掉未被标记的对象；在整理阶段，垃圾回收器将存活的对象整理在一起，减少内存碎片。

分代式垃圾回收（Generational Garbage Collection）：

这是一种通过将堆内存分为不同代（一般是新生代和老生代）来提高垃圾回收效率的方法。新生代存放短时间存在的对象，老生代存放长时间存在的对象。新生代使用一些基于复制的算法，而老生代使用标记-整理等算法。

增量式垃圾回收（Incremental Garbage Collection）：

这是一种将垃圾回收过程分解成多个小步骤，与应用程序的执行交替进行的方法。这可以减小每次垃圾回收的停顿时间，提高系统的响应性。

内存管理 API：

JavaScript 还提供了一些内存管理的 API，如 WeakMap、WeakSet 等，它们可以帮助开发者更灵活地管理对象的生命周期。

不同浏览器对于垃圾回收机制的实现可能有差异，但通常会选择其中一种或多种算法来处理内存的回收。在编写前端代码时，开发者一般不需要显式地管理内存，因为垃圾回收机制会自动处理不再使用的对象。

V8 的垃圾回收机制主要包括以下几个组件：

分代式垃圾回收（Generational Garbage Collection）：

V8 将堆内存分为两个代：新生代（Young Generation）和老生代（Old Generation）。新生代主要存放短时间存在的对象，老生代存放长时间存在的对象。因为在实际应用中，大部分对象的生命周期很短，所以将堆分成两代有助于提高垃圾回收的效率。

Scavenger（新生代垃圾回收器）：

新生代的垃圾回收主要通过 Scavenger 来完成。Scavenger 使用了复制算法，将堆分为两个半区，每次只使用其中一个。对象首先分配在一个半区，当这个半区满了时，将存活的对象复制到另一个半区，然后清空当前半区。这个过程减少了内存碎片，提高了分配速度。

Mark-Sweep-Compact（老生代垃圾回收器）：

对于老生代，V8 使用了 Mark-Sweep-Compact 算法。这个算法分为三个阶段：

标记阶段（Marking）： 从根对象出发，标记所有可达的对象。

清除阶段（Sweeping）： 清除未被标记的对象。

整理阶段（Compacting）： 将存活的对象向一端移动，整理出连续的内存空间。

增量标记（Incremental Marking）：

V8 引入了增量标记机制，将垃圾回收的标记阶段分为多个小步骤，每执行一个小步骤后，就让 JavaScript 应用程序执行一会儿。这种方式可以减小单次垃圾回收的停顿时间，提高系统的响应性。

GC 的线程并发执行：

V8 的垃圾回收机制会与 JavaScript 程序运行并发执行，这是通过将垃圾回收工作放在一个独立的线程中完成的。这样可以减小垃圾回收对 JavaScript 线程的影响，提高了整体性能。

总体来说，V8 的垃圾回收机制在性能和响应性方面进行了多方面的优化，以更好地适应现代 Web 应用的需求。这些优化包括分代式垃圾回收、新生代和老生代的不同算法选择，以及增量标记等技术。

8、回流重绘，文字的方向改变是回流还是重绘

回流（Reflow）：

定义： 当 DOM 的尺寸、结构或某些属性发生变化时，浏览器需要重新计算元素的几何属性，以确定它们在页面中的位置和大小。这个重新计算的过程被称为回流。

影响范围： 回流会影响到被改变的元素以及其所有子元素、父元素、兄弟元素及其他相关元素。

触发回流的操作：

修改页面布局的属性，如改变窗口大小、调整元素大小、改变字体大小等。

添加或删除可见的 DOM 元素。

改变元素的位置。

查询某些元素的几何属性，例如 offsetTop、offsetLeft、offsetWidth、offsetHeight 等。

重绘（Repaint）：

定义： 当元素的样式（如颜色、背景、边框等）发生变化，而不影响其布局时，浏览器只需要重新绘制元素的外观，而不必重新计算元素的几何属性。这个重新绘制的过程被称为重绘。

影响范围： 重绘仅影响被改变样式的元素。

触发重绘的操作：

修改元素的样式，如改变颜色、背景、边框等，但不影响元素的布局。

总结：

回流涉及到布局的变化，而重绘只涉及到元素的外观变化。

回流的成本更高，因为它涉及到了元素的布局的重新计算和整个页面的重新渲染，而重绘只需要重新绘制元素的外观。

为了优化性能，尽量避免触发回流和重绘的操作，例如通过批量修改样式、使用 CSS3 动画等手段。

9、content-type有哪些

Content-Type 是 HTTP 头部中的一个字段，用于指示请求或响应体的媒体类型（即内容类型）。以下是一些常见的 Content-Type 值：

text/plain：

纯文本，不包含任何格式控制字符。常用于纯文本文件、代码等。

text/html：

HTML 文档类型，用于标记网页的结构和内容。

text/css：

CSS 样式表文件的内容类型。

text/javascript 或 application/javascript：

JavaScript 脚本文件的内容类型。text/javascript 已经逐渐被 application/javascript 取代。

application/json：

JSON 格式数据的内容类型，常用于在客户端和服务器之间传递数据。

application/xml：

XML 格式数据的内容类型。

application/octet-stream：

二进制流数据的通用内容类型，未知类型的文件通常使用此类型。

multipart/form-data：

用于支持文件上传的表单数据类型，常见于表单提交中的文件上传。

application/x-www-form-urlencoded：

常见于普通的表单提交，将表单字段的名称和值进行 URL 编码后传输。

image/jpeg、image/png、image/gif：

分别表示 JPEG、PNG、GIF 图片的内容类型。

audio/mpeg、audio/wav：

分别表示 MP3、WAV 音频文件的内容类型。

video/mp4、video/webm：

分别表示 MP4、WebM 视频文件的内容类型。

这只是一小部分可能的 Content-Type 类型，实际上有很多其他的媒体类型，具体取决于所传输的数据的类型和格式。在 HTTP 请求或响应中，正确设置 Content-Type 是确保数据正确解析的关键。

10、项目搭建如何考虑

1. 项目结构设计：

设计清晰的项目结构，合理划分目录，包括但不限于：

src：存放源代码。

public：存放不需要经过打包处理的静态资源。

assets：存放项目中使用的图片、样式等资源。

components：存放可复用的组件。

views 或 pages：存放页面级组件。

utils：存放通用的工具函数。

router：存放路由相关的配置。

store：存放状态管理相关的配置。

2. 选择开发框架和库：

根据项目需求选择合适的前端框架（例如，Vue、React、Angular）和相关的库（如 Vuex、Redux、React Router）。

3. 模块化开发：

使用模块化的开发方式，可以提高代码的可维护性和可复用性。根据项目规模，考虑使用 ES6 模块或者 CommonJS。

4. 脚手架工具：

使用脚手架工具快速搭建项目。常见的脚手架工具有 Vue CLI、Create React App、Angular CLI 等。它们提供了项目初始化、开发服务器、打包构建等功能。

5. 代码规范和风格：

配置和遵循代码规范，例如使用 ESLint 或 TSLint 进行代码检查，使团队成员能够在相同的规范下协同开发。

6. 版本控制：

使用版本控制工具（如 Git）进行代码管理。创建合适的 .gitignore 文件以过滤不必要提交的文件。

7. 测试：

配置并编写单元测试和集成测试，确保代码的质量。选择合适的测试框架（如 Jest、Mocha、Cypress）。

8. 国际化和本地化：

如果项目可能涉及到国际化或本地化，提前考虑并配置相应的方案，以便后续维护。

9. 性能优化：

考虑性能优化的方案，如代码分割、懒加载、CDN 加速等。

10. 持续集成和部署：
diffCopy code
- 配置持续集成和部署流程，自动化构建和发布。常见的 CI/CD 工具有 Jenkins、Travis CI、GitLab CI 等。
11. 安全性：
diffCopy code
- 注意项目的安全性，防范常见的安全攻击。配置适当的 CSP（内容安全策略）、使用 HTTPS 等。
12. 文档：
diffCopy code
- 编写项目文档，包括 README.md、API 文档、组件文档等，使项目更易于理解和使用。
13. 监控和日志：
diffCopy code
- 配置监控和日志系统，及时发现并解决线上问题。使用工具如 Sentry、LogRocket 等。
14. 团队协作：
diffCopy code
- 采用适当的团队协作工具（如 Jira、Trello、GitLab 等），建立规范的开发流程。
15. 学习曲线：
diffCopy code
- 在选择框架和工具时考虑团队的技术水平，避免过于复杂的技术栈导致学习曲线陡峭。

11、如何避免嵌套和回调地狱

1. 使用 Promise 对象：

使用 Promise 对象可以更优雅地处理异步操作。Promise 提供了 .then() 和 .catch() 方法，可以链式调用，避免了嵌套的问题。
javascriptCopy code
function asyncFunction() {
  return new Promise((resolve, reject) => {
    // 异步操作
    resolve(data);
  });
}

asyncFunction()
  .then(result => {
    // 处理结果
    return anotherAsyncFunction(result);
  })
  .then(result => {
    // 处理另一个异步操作的结果
  })
  .catch(error => {
    // 处理错误
  });
2. 使用 async/await：

使用 async/await 语法可以更清晰地编写异步代码，避免回调地狱。async/await 基于 Promise，并在语法层面提供了更直观的异步代码编写方式。
javascriptCopy code
async function fetchData() {
  try {
    const result = await asyncFunction();
    const anotherResult = await anotherAsyncFunction(result);
    // 处理结果
  } catch (error) {
    // 处理错误
  }
}
3. 使用事件触发机制：

在某些情况下，可以使用事件触发机制，通过发布和订阅事件来处理异步操作。这种方式适用于需要处理多个异步操作的场景。
javascriptCopy code
// 发布者
function asyncFunction() {
  // 异步操作完成后触发事件
  eventEmitter.emit('asyncOperationCompleted', data);
}

// 订阅者
eventEmitter.on('asyncOperationCompleted', result => {
  // 处理异步操作的结果
});
4. 使用 Generators：

Generators 是一种特殊的函数，可以通过 yield 暂停和继续执行。它可以用于编写更可读的异步代码，避免嵌套。
javascriptCopy code
function* fetchData() {
  try {
    const result = yield asyncFunction();
    const anotherResult = yield anotherAsyncFunction(result);
    // 处理结果
  } catch (error) {
    // 处理错误
  }
}

const iterator = fetchData();
const { value, done } = iterator.next();

// 通过递归或迭代处理下一个异步操作
5. 使用库或框架：

使用一些现代的库或框架，如 RxJS、Bluebird 等，它们提供了更高级的异步处理工具，可以帮助简化和管理异步流程。

12、js内存泄漏

JavaScript 内存泄漏是指应用程序中的某些对象在不再使用时没有被垃圾回收，导致内存占用不断增加，最终可能导致应用程序性能下降或崩溃。以下是一些可能导致 JavaScript 内存泄漏的常见原因：

1. 未释放事件处理器：

在使用事件处理器时，如果忘记移除事件监听器，可能会导致 DOM 节点无法被垃圾回收。
javascriptCopy code
// 错误示例：未移除事件监听器
element.addEventListener('click', someFunction);

// 正确示例：在适当的时候移除事件监听器
element.removeEventListener('click', someFunction);
2. 循环引用：

当两个或多个对象之间存在相互引用，并且这些对象之间的引用形成了一个循环时，这些对象可能无法被垃圾回收。
javascriptCopy code
// 错误示例：循环引用
function createCircularReference() {
  const obj1 = {};
  const obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;
  // ...
}
3. 未释放闭包：

当闭包中包含对 DOM 元素的引用时，如果这个闭包被长时间持有，可能会阻止相关的 DOM 元素被垃圾回收。
javascriptCopy code
// 错误示例：未释放闭包
function createClosure() {
  const element = document.getElementById('myElement');
  const onClick = function() {
    console.log(element.innerHTML);
  };
  element.addEventListener('click', onClick);
}
4. 定时器未清理：

如果使用 setTimeout 或 setInterval 创建定时器，需要在不再需要的时候清理它们，否则它们可能一直存在，阻止相关对象被垃圾回收。
javascriptCopy code
// 错误示例：未清理定时器
const timerId = setTimeout(() => {
  // ...
}, 1000);

// 正确示例：清理定时器
clearTimeout(timerId);
5. 大量数据未释放：

在处理大量数据时，需要确保及时释放不再使用的数据，否则这些数据可能一直存在于内存中。
javascriptCopy code
// 错误示例：未释放大量数据
function processBigData() {
  const data = fetchData(); // 获取大量数据
  // ...
}

// 正确示例：在不再需要时释放大量数据
function processBigData() {
  const data = fetchData();
  // 处理数据
  // ...
  // 释放数据
  data = null;
}
6. 使用全局变量：

过多的全局变量可能导致这些变量在整个应用程序的生命周期内无法被垃圾回收。
javascriptCopy code
// 错误示例：使用全局变量
let globalData = fetchData();
// ...

// 正确示例：限制变量的作用范围
function processDataLocally() {
  let localData = fetchData();
  // ...
}
总体来说，为了避免 JavaScript 内存泄漏，开发者应该注意及时释放不再需要的资源、移除不再使用的事件监听器、避免循环引用等。使用浏览器的开发者工具进行内存分析，以便及时发现和解决潜在的内存泄漏问题。

13、commonjs和es6区别

1. 语法差异：

CommonJS：

使用 require() 导入模块。

使用 module.exports 或 exports 导出模块。

模块是同步加载的。
javascriptCopy code
// 导入模块
const otherModule = require('./otherModule');

// 导出模块
module.exports = someValue;
// 或
exports.someValue = someValue;
ES6 Modules：

使用 import 导入模块。

使用 export 导出模块。
javascriptCopy code
// 导入模块
import { someValue } from './otherModule';

// 导出模块
export { someValue };
2. 加载时机：

CommonJS：

模块在运行时同步加载，即在代码执行到 require 语句时，才会加载并执行模块代码。
javascriptCopy code
const otherModule = require('./otherModule'); // 模块加载发生在这一步
ES6 Modules：

模块是异步加载的，模块的加载发生在解析阶段。
javascriptCopy code
import { someValue } from './otherModule'; // 模块加载发生在这一步
3. 导出方式：

CommonJS：

使用 module.exports 或 exports 导出的是一个值的引用，可以动态变化。
javascriptCopy code
// 导出模块
module.exports = someValue;
// 或
exports.someValue = someValue;
ES6 Modules：

使用 export 导出的是一个值的静态引用，不能动态变化。
javascriptCopy code
// 导出模块
export const someValue = 'value';
4. 静态分析：

CommonJS：

模块的依赖关系是在运行时确定的。
javascriptCopy code
// 运行时确定依赖关系
const moduleName = './' + someCondition() + 'Module';
const otherModule = require(moduleName);
ES6 Modules：

模块的依赖关系是在静态分析阶段确定的。
javascriptCopy code
// 静态分析时确定依赖关系
import { someValue } from './otherModule';
5. 顶层 this 值：

CommonJS：

在 CommonJS 模块中，顶层 this 的值是当前模块的 exports 对象。
javascriptCopy code
console.log(this === exports); // true
ES6 Modules：

在 ES6 模块中，顶层 this 的值是 undefined。
javascriptCopy code
console.log(this === undefined); // true

14、git命令

初始化仓库：
bashCopy code
git init
克隆仓库：
bashCopy code
git clone <repository_url>
添加文件到暂存区：
bashCopy code
git add <file_name>
提交更改到本地仓库：
bashCopy code
git commit -m "Commit message"
查看当前仓库状态：
bashCopy code
git status
查看文件变更：
bashCopy code
git diff
分支操作：
创建分支：
bashCopy code
git branch <branch_name>
切换分支：
bashCopy code
git checkout <branch_name>
创建并切换分支：
bashCopy code
git checkout -b <branch_name>
合并分支：
bashCopy code
git merge <branch_name>
删除分支：
bashCopy code
git branch -d <branch_name>
远程仓库：
添加远程仓库：
bashCopy code
git remote add origin <remote_url>
推送到远程仓库：
bashCopy code
git push -u origin <branch_name>
从远程仓库拉取更新：
bashCopy code
git pull origin <branch_name>
从远程仓库获取更新：
bashCopy code
git fetch
撤销与回滚：
撤销工作区的更改：
bashCopy code
git restore <file_name>
回滚到某个提交：
bashCopy code
git reset <commit_sha>
撤销最近的提交：
bashCopy code
git revert HEAD
查看历史和日志：
查看提交历史：
bashCopy code
git log
查看文件修改历史：
bashCopy code
git log -p <file_name>
查看提交历史简略信息：
bashCopy code
git log --oneline

15、代码冲突怎么解决

1. 查找冲突：

在执行 git pull、git fetch、git merge 或者其他合并操作后，如果发现有冲突，Git 会在冲突的文件中标记冲突的部分，类似于下面的格式：
plaintextCopy code
<<<<<<< HEAD
// 本地修改的内容
=======
// 远程仓库修改的内容
>>>>>>> commit_sha
2. 手动解决冲突：

手动打开包含冲突的文件，然后选择保留需要的更改，删除不需要的部分。修复完冲突后，文件的内容应该类似于：
plaintextCopy code
// 合并后的内容
3. 添加解决冲突的文件：

在解决完冲突后，需要将文件标记为已解决冲突的状态。使用以下命令：
bashCopy code
git add <conflicted_file>
4. 完成合并：

接下来，执行 git commit 来完成合并操作：
bashCopy code
git commit -m "Merge branch"
注意事项：

如果使用图形化工具，如 VSCode、GitKraken 等，它们通常提供可视化界面来帮助你解决冲突。

在解决冲突之前，可以使用 git diff 查看文件的变化，以便更好地了解冲突的本质。

在手动解决冲突后，一定要确保代码的完整性和正确性。

避免冲突的一些建议：

尽量避免长时间的分支开发，减少冲突的机会。

定期将主分支（如 main 或 master）的变更合并到开发分支，保持分支间同步。

使用合理的代码结构，避免将大型文件或模块放在同一个文件中，减小发生冲突的可能性。

16、请求方法？区别

1. GET：

用于请求指定资源。只从服务器获取数据，不对服务器资源进行任何修改。

参数通常附加在 URL 上，通过查询字符串传递。

2. POST：

用于向服务器提交指定资源的数据，通常用于创建新资源。

参数通常包含在请求体中，适用于传递大量数据。

3. PUT：

用于请求服务器存储一个资源，如果不存在则创建，存在则更新。

完整替代目标资源，包括未在请求中提及的属性。

4. PATCH：

用于对资源进行部分更新。通常用于更新资源的部分属性。

只需提供要修改的数据，而不是整个资源。

5. DELETE：

用于请求服务器删除指定资源。

对于删除成功，可能返回 200 OK 或 204 No Content。

6. OPTIONS：

用于获取目标资源支持的通信选项。客户端可以通过该请求了解服务器支持哪些方法和功能。

常用于 CORS（跨域资源共享）预检请求。

7. HEAD：

类似于 GET 请求，但服务器只返回头部信息，不返回实体的主体部分。用于获取资源的元数据。

8. TRACE：

用于在目的服务器上执行一个消息环回测试。

在请求传递过程中，会在最终目标服务器记录请求信息，然后返回给客户端。

9. CONNECT：

用于建立与目标资源的双向通信的隧道。通常用于 HTTPS 连接的代理。

主要区别：

安全性：

安全方法：GET、HEAD、OPTIONS。

不安全方法：POST、PUT、PATCH、DELETE。

幂等性：

幂等方法：GET、HEAD、PUT、DELETE。

非幂等方法：POST、PATCH。

可缓存性：

可缓存方法：GET、HEAD。

请求体：

具有请求体：POST、PUT、PATCH。

没有请求体：GET、HEAD、DELETE、OPTIONS。

用途：

GET：获取资源。

POST：提交数据。

PUT：更新整个资源。

PATCH：部分更新资源。

DELETE：删除资源。

OPTIONS：获取支持的方法。

HEAD：获取资源的头部信息。

TRACE：测试通信路径。

CONNECT：建立隧道代理。

爱猪头的程序猿

关注

23
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
2024年1月15日

选项式 API 更加声明式，通过配置选项直观地描述组件。组合式 API 更加函数式，通过函数组合的方式更灵活地组织和复用逻辑。选项式 API 将不同的逻辑分散在不同的选项中，比较传统。组合式 API 将相关逻辑组织在setup函数中，更加集中和一致。选项式 API 在小型应用和团队中可能更容易理解和维护。组合式 API 在大型应用和需要更高可维护性的场景中更有优势。7、垃圾回收机制回流涉及到布局的变化，而重绘只涉及到元素的外观变化。
复制链接

扫一扫