面试题手册

Electron 菜单和托盘的实现

Electron

阅读 0·2月18日 10:35

Electron 数据持久化方案

Electron

阅读 0·2月17日 23:54

Electron IPC 进程间通信的实现方式

IPC(Inter-Process Communication,进程间通信)是 Electron 架构的核心机制,用于在主进程和渲染进程之间传递消息和数据。IPC 基础概念Electron 的 IPC 模块包含两个主要部分:ipcMain: 在主进程中使用,用于接收来自渲染进程的消息ipcRenderer: 在渲染进程中使用,用于向主进程发送消息基本通信方式1. 渲染进程 → 主进程(单向通信)发送消息(无响应)// 渲染进程const { ipcRenderer } = require('electron')ipcRenderer.send('channel-name', { data: 'Hello from renderer' })// 主进程const { ipcMain } = require('electron')ipcMain.on('channel-name', (event, data) => { console.log('Received:', data)})发送消息并等待响应// 渲染进程ipcRenderer.invoke('channel-name', { data: 'Hello' }) .then(response => { console.log('Response:', response) })// 主进程ipcMain.handle('channel-name', async (event, data) => { // 处理逻辑 return { result: 'Success' }})2. 主进程 → 渲染进程(单向通信)// 主进程mainWindow.webContents.send('channel-name', { data: 'Hello from main' })// 渲染进程ipcRenderer.on('channel-name', (event, data) => { console.log('Received:', data)})3. 双向通信// 渲染进程ipcRenderer.send('request-data', { id: 123 })ipcRenderer.on('response-data', (event, data) => { console.log('Response:', data)})// 主进程ipcMain.on('request-data', (event, data) => { // 处理请求 const result = processData(data) event.reply('response-data', result)})高级通信模式1. 使用 invoke/handle 进行异步通信这种方式返回 Promise,更适合异步操作:// 渲染进程async function fetchData() { try { const result = await ipcRenderer.invoke('fetch-data', { id: 1 }) return result } catch (error) { console.error('Error:', error) }}// 主进程ipcMain.handle('fetch-data', async (event, { id }) => { // 可以执行异步操作 const data = await database.query(id) return data})2. 使用 contextBridge 安全暴露 API// preload.jsconst { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('electronAPI', { // 发送消息 send: (channel, data) => ipcRenderer.send(channel, data), // 发送并等待响应 invoke: (channel, data) => ipcRenderer.invoke(channel, data), // 监听消息 on: (channel, callback) => { const subscription = (event, ...args) => callback(...args) ipcRenderer.on(channel, subscription) return () => ipcRenderer.removeListener(channel, subscription) }, // 移除监听器 removeListener: (channel, callback) => { ipcRenderer.removeListener(channel, callback) }})// 渲染进程window.electronAPI.send('channel-name', data)const response = await window.electronAPI.invoke('async-channel', data)3. 使用 Event 进行窗口间通信// 主进程 - 从窗口 A 发送到窗口 Bconst windowA = BrowserWindow.fromWebContents(event.sender)const windowB = BrowserWindow.getAllWindows()[1]windowA.webContents.send('message-to-window-b', { data: 'Hello' })// 窗口 B 的渲染进程ipcRenderer.on('message-to-window-b', (event, data) => { console.log('Received from window A:', data)})通信数据类型IPC 支持传递的数据类型包括:基本类型(String, Number, Boolean, null, undefined)对象和数组BufferError 对象Date 对象注意: 不能传递函数、DOM 节点、循环引用的对象最佳实践1. 使用明确的通道名称// 好的做法ipcRenderer.send('user:login', credentials)ipcRenderer.send('file:read', filePath)// 不好的做法ipcRenderer.send('message1', data)ipcRenderer.send('message2', data)2. 错误处理// 渲染进程try { const result = await ipcRenderer.invoke('async-operation', data)} catch (error) { console.error('Operation failed:', error)}// 主进程ipcMain.handle('async-operation', async (event, data) => { try { const result = await process(data) return result } catch (error) { throw new Error(`Processing failed: ${error.message}`) }})3. 清理监听器// 渲染进程const cleanup = window.electronAPI.on('channel-name', (data) => { console.log(data)})// 组件卸载时清理componentWillUnmount() { cleanup()}4. 使用 TypeScript 类型定义// types.tsinterface IpcChannels { 'user:login': (credentials: Credentials) => Promise<User> 'file:read': (path: string) => Promise<string>}// preload.tscontextBridge.exposeInMainWorld('electronAPI', { invoke: <K extends keyof IpcChannels>( channel: K, ...args: Parameters<IpcChannels[K]> ): ReturnType<IpcChannels[K]> => ipcRenderer.invoke(channel, ...args)})性能优化1. 减少通信频率// 不好的做法 - 频繁通信for (let i = 0; i < 1000; i++) { ipcRenderer.send('process-item', items[i])}// 好的做法 - 批量处理ipcRenderer.send('process-items', items)2. 使用 Worker Threads 处理密集任务// 主进程ipcMain.handle('heavy-computation', async (event, data) => { const worker = new Worker('./worker.js') return new Promise((resolve, reject) => { worker.on('message', resolve) worker.on('error', reject) worker.postMessage(data) })})安全考虑验证输入数据: 在主进程中验证来自渲染进程的所有数据限制通道访问: 只暴露必要的 IPC 通道使用 contextIsolation: 确保渲染进程无法直接访问 Node.js API避免敏感数据: 不要在 IPC 消息中传递敏感信息常见问题Q: invoke 和 send 有什么区别?A: invoke 返回 Promise,适合需要响应的场景;send 是单向通信,不返回结果。Q: 如何在多个窗口之间通信?A: 通过主进程作为中介,使用 webContents.send() 向特定窗口发送消息。Q: IPC 通信有大小限制吗?A: 理论上没有硬性限制,但建议传递大数据时使用文件系统或共享内存。

Electron

阅读 0·2月17日 23:53

Electron 是什么及其核心架构

Electron 是一个开源框架,允许开发者使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。它由 GitHub 开发,被广泛应用于 Atom、VS Code、Discord、Slack 等知名应用中。核心架构Electron 的架构主要由以下三个核心组件组成:1. Main Process(主进程)每个 Electron 应用都有一个单一的主进程主进程运行在 Node.js 环境中,可以使用所有 Node.js API负责创建和管理渲染进程(Renderer Process)控制应用程序的生命周期(启动、退出等)管理原生窗口和菜单处理操作系统级别的交互2. Renderer Process(渲染进程)每个窗口都有一个独立的渲染进程渲染进程运行在 Chromium 环境中,负责渲染 Web 页面可以使用 HTML、CSS 和 JavaScript 构建 UI默认情况下无法访问 Node.js API,需要通过 preload 脚本或 contextBridge 进行安全通信3. IPC(进程间通信)主进程和渲染进程之间通过 IPC 进行通信使用 ipcMain 和 ipcRenderer 模块实现消息传递支持同步和异步通信方式是 Electron 应用中数据交换的核心机制工作原理应用启动: 主进程启动,读取 package.json 配置创建窗口: 主进程创建 BrowserWindow 实例加载页面: 窗口加载 HTML 文件,启动渲染进程渲染内容: 渲染进程使用 Chromium 引擎渲染 Web 页面交互通信: 通过 IPC 实现主进程和渲染进程之间的数据交换技术栈Chromium: 提供渲染引擎,支持现代 Web 标准Node.js: 提供后端能力,访问文件系统、网络等系统资源Native APIs: 提供操作系统级别的功能,如通知、菜单、托盘等优势跨平台支持(Windows、macOS、Linux)使用熟悉的 Web 技术栈活跃的社区和丰富的生态系统可以访问原生系统功能开发效率高,维护成本低注意事项应用包体积较大(包含完整的 Chromium 和 Node.js)内存占用相对较高需要注意安全性,避免暴露敏感的 Node.js API需要处理不同平台的兼容性问题

Electron

阅读 0·2月17日 23:53

TypeORM 的订阅者 (Subscriber) 是什么?如何使用订阅者监听实体事件

TypeORM

阅读 0·2月17日 23:52

Python 装饰器的工作原理是什么？

基本概念装饰器（Decorator）是 Python 中一种强大的设计模式，它允许在不修改原函数代码的情况下，为函数添加额外的功能。装饰器本质上是一个接受函数作为参数并返回一个新函数的函数。工作原理1. 装饰器的语法糖@decoratordef my_function(): pass上面的代码等价于：my_function = decorator(my_function)2. 简单装饰器示例def simple_decorator(func): def wrapper(): print("函数执行前") func() print("函数执行后") return wrapper@simple_decoratordef say_hello(): print("Hello, World!")say_hello()输出：函数执行前Hello, World!函数执行后3. 带参数的装饰器def decorator_with_args(func): def wrapper(*args, **kwargs): print(f"参数: args={args}, kwargs={kwargs}") result = func(*args, **kwargs) return result return wrapper@decorator_with_argsdef add(a, b): return a + bprint(add(3, 5)) # 输出: 参数: args=(3, 5), kwargs={} \n 84. 带自定义参数的装饰器def repeat(times): def decorator(func): def wrapper(*args, **kwargs): for _ in range(times): result = func(*args, **kwargs) return result return wrapper return decorator@repeat(3)def greet(name): print(f"Hello, {name}!")greet("Python") # 会打印三次5. 使用 functools.wraps 保留元数据from functools import wrapsdef logging_decorator(func): @wraps(func) def wrapper(*args, **kwargs): print(f"调用函数: {func.__name__}") return func(*args, **kwargs) return wrapper@logging_decoratordef calculate(x, y): """计算两个数的和""" return x + yprint(calculate.__name__) # 输出: calculateprint(calculate.__doc__) # 输出: 计算两个数的和实际应用场景1. 计时装饰器import timefrom functools import wrapsdef timer(func): @wraps(func) def wrapper(*args, **kwargs): start_time = time.time() result = func(*args, **kwargs) end_time = time.time() print(f"{func.__name__} 执行时间: {end_time - start_time:.4f} 秒") return result return wrapper@timerdef slow_function(): time.sleep(2) return "完成"slow_function()2. 缓存装饰器from functools import wrapsdef memoize(func): cache = {} @wraps(func) def wrapper(*args): if args not in cache: cache[args] = func(*args) return cache[args] return wrapper@memoizedef fibonacci(n): if n < 2: return n return fibonacci(n-1) + fibonacci(n-2)print(fibonacci(100)) # 快速计算3. 权限验证装饰器from functools import wrapsdef require_permission(permission): def decorator(func): @wraps(func) def wrapper(*args, **kwargs): user_permissions = kwargs.get('permissions', []) if permission in user_permissions: return func(*args, **kwargs) else: raise PermissionError(f"需要 {permission} 权限") return wrapper return decorator@require_permission('admin')def delete_user(user_id, permissions): print(f"删除用户 {user_id}")delete_user(1, permissions=['admin']) # 正常执行delete_user(1, permissions=['user']) # 抛出权限错误类装饰器class CountCalls: def __init__(self, func): self.func = func self.count = 0 def __call__(self, *args, **kwargs): self.count += 1 print(f"调用次数: {self.count}") return self.func(*args, **kwargs)@CountCallsdef say_hi(): print("Hi!")say_hi() # 调用次数: 1say_hi() # 调用次数: 2多个装饰器的执行顺序def decorator1(func): def wrapper(): print("装饰器1 - 前") func() print("装饰器1 - 后") return wrapperdef decorator2(func): def wrapper(): print("装饰器2 - 前") func() print("装饰器2 - 后") return wrapper@decorator1@decorator2def my_function(): print("函数执行")my_function()输出：装饰器1 - 前装饰器2 - 前函数执行装饰器2 - 后装饰器1 - 后关键要点装饰器本质：是一个接受函数并返回新函数的函数语法糖：@decorator 是 func = decorator(func) 的简写参数传递：使用 *args, **kwargs 确保装饰器适用于任何函数元数据保留：使用 @wraps(func) 保留原函数的元数据执行顺序：多个装饰器时，从下往上应用，从上往下执行闭包：装饰器利用闭包特性访问外部变量类装饰器：通过实现 __call__ 方法实现装饰器是 Python 中实现横切关注点（如日志、缓存、权限验证）的优雅方式，遵循开放封闭原则，使代码更加模块化和可维护。

Python

阅读 0·2月17日 23:50

Python 装饰器的高级应用有哪些？

Python

阅读 0·2月17日 23:49

TypeORM 的迁移系统如何工作?如何创建、运行和管理数据库迁移

TypeORM

阅读 0·2月17日 23:49

Docker Compose 的作用和常用命令有哪些？

Docker Compose 是用于定义和运行多容器 Docker 应用的工具。它使用 YAML 格式的 docker-compose.yml 文件来配置应用的服务。常用命令包括：docker-compose up（启动服务）、docker-compose down（停止并删除容器）、docker-compose ps（查看容器状态）、docker-compose logs（查看日志）、docker-compose exec（在容器中执行命令）、docker-compose build（构建镜像）。Docker Compose 简化了开发环境的搭建，适合本地开发和测试。

Docker

阅读 0·2月17日 23:48

Docker COPY 和 ADD 指令的区别是什么？

Docker COPY 和 ADD 都用于将文件从宿主机复制到镜像中，但有重要区别。COPY 只能复制本地文件，简单直接；ADD 支持自动解压压缩文件（tar、gzip、bzip2 等）和从 URL 下载文件。最佳实践是优先使用 COPY，因为它的行为更可预测。ADD 的自动解压功能虽然方便，但可能导致意外结果。如果需要从 URL 下载文件，建议使用 RUN wget 或 curl，这样可以在同一层中清理缓存。COPY 语法：COPY [--chown=:] … 。

Docker

阅读 0·2月17日 23:48