【实战】一、Jest 前端自动化测试框架基础入门（一） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（一）
文章目录
- 一、前端要学的测试课
- 1.前端要学的测试
- 2.前端工程化的一部分
- 3.前端自动化测试的例子
- 4.前端为什么需要自动化测试？
- 5.课程涵盖内容
- 6.前置技能
- 7.学习收获
- 二、Jest 前端自动化测试框架基础入门
- 1. 自动化测试背景及原理
- 前端自动化测试产生的背景及原理
- 2.前端自动化测试框架
- 3.使用 Jest 修改自动化测试样例
- 4.Jest 的简单配置
学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课
相对原教程，我在学习开始时（2023.08）采用的是当前最新版本：
| 项 | 版本 |
|---|---|
| @babel/core | ^7.16.0 |
| @pmmmwh/react-refresh-webpack-plugin | ^0.5.3 |
| @svgr/webpack | ^5.5.0 |
| @testing-library/jest-dom | ^5.17.0 |
| @testing-library/react | ^13.4.0 |
| @testing-library/user-event | ^13.5.0 |
| babel-jest | ^27.4.2 |
| babel-loader | ^8.2.3 |
| babel-plugin-named-asset-import | ^0.3.8 |
| babel-preset-react-app | ^10.0.1 |
| bfj | ^7.0.2 |
| browserslist | ^4.18.1 |
| camelcase | ^6.2.1 |
| case-sensitive-paths-webpack-plugin | ^2.4.0 |
| css-loader | ^6.5.1 |
| css-minimizer-webpack-plugin | ^3.2.0 |
| dotenv | ^10.0.0 |
| dotenv-expand | ^5.1.0 |
| eslint | ^8.3.0 |
| eslint-config-react-app | ^7.0.1 |
| eslint-webpack-plugin | ^3.1.1 |
| file-loader | ^6.2.0 |
| fs-extra | ^10.0.0 |
| html-webpack-plugin | ^5.5.0 |
| identity-obj-proxy | ^3.0.0 |
| jest | ^27.4.3 |
| jest-enzyme | ^7.1.2 |
| jest-resolve | ^27.4.2 |
| jest-watch-typeahead | ^1.0.0 |
| mini-css-extract-plugin | ^2.4.5 |
| postcss | ^8.4.4 |
| postcss-flexbugs-fixes | ^5.0.2 |
| postcss-loader | ^6.2.1 |
| postcss-normalize | ^10.0.1 |
| postcss-preset-env | ^7.0.1 |
| prompts | ^2.4.2 |
| react | ^18.2.0 |
| react-app-polyfill | ^3.0.0 |
| react-dev-utils | ^12.0.1 |
| react-dom | ^18.2.0 |
| react-refresh | ^0.11.0 |
| resolve | ^1.20.0 |
| resolve-url-loader | ^4.0.0 |
| sass-loader | ^12.3.0 |
| semver | ^7.3.5 |
| source-map-loader | ^3.0.0 |
| style-loader | ^3.3.1 |
| tailwindcss | ^3.0.2 |
| terser-webpack-plugin | ^5.2.5 |
| web-vitals | ^2.1.4 |
| webpack | ^5.64.4 |
| webpack-dev-server | ^4.6.0 |
| webpack-manifest-plugin | ^4.0.2 |
| workbox-webpack-plugin | ^6.4.1" |
具体配置、操作和内容会有差异，“坑”也会有所不同。。。
一、前端要学的测试课
1.前端要学的测试
- Jest入门
- TDD实战
- BDD实战
2.前端工程化的一部分
- 前端自动化测试
- 高质量代码设计
- 高质量代码实现
3.前端自动化测试的例子
Vue、Echarts、React、Ant-Design…这些都有使用到自动化测试
4.前端为什么需要自动化测试？
- 改需求时，代码重构：导致修复时间长，成本高
- 自动化测试，修复时间少，难度低
5.课程涵盖内容
学习安排：
- 第1章 课程介绍
- 第2章 Jest 基础
- 第3章 Jest 进阶
- 第4&6章 React 测试
- 第5&7章 Vue 测试
- 第8章 前端自动化测试的思考总结
6.前置技能
7.学习收获
- 彻底入门前端自动化测试
- 根据项目完成测试方案选型
- 主流前端测试工具使用
- 完成前端自动化测试项目落地
- 形成多维度前端架构思维
二、Jest 前端自动化测试框架基础入门
1. 自动化测试背景及原理
前端自动化测试产生的背景及原理
作为一名前端开发开发者，每天都会遇到各种各样的 bug，比如安全性的 bug，逻辑 bug，性能 bug，展示 bug 等，在日常开发过程中想要不出 bug 几乎是不可能的。
当遇到复杂的业务场景或对代码进行修补的时候出现 bug 其实是非常正常的事情，bug 本身并不可怕，可怕的是把 bug 真正的带到线上。
所以为了防止 bug 上线，可以做些 比如 codeview 的整合，通过测试同学的测试，帮助发现代码潜在的问题，或者通过灰度发布这样的机制帮助在代码上线之前进行局部的验证，这些方法都可以很好地帮助降低 bug 上线的概率。
但是对于前端来说还有没有更好的办法降低代码中 bug 出现的频率呢？是有的，一些简单错误可以通过以下几种工具来规避：
TypeScript、 Flow、 EsLint、 StyleLint…
它们都可以帮助提高前端代码质量，减少 bug 数量，当然这还不够，还可以使用前端自动化测试工具来进一步避免 bug 的产生。
说到自动化测试，在后端自动化测试已经很普遍被应用了，但是在前端领域目前被普及的情况并不是很好，因此学习前端测试刻不容缓
常见测试种类：
- 单元测试
- 集成测试
- end To end 端到端测试
- 回归测试
- 性能测试
- 压力测试
- …
.
拓展学习
- 前端自动化测试探索 - FEX
为了更好的理解，接下来进入代码环节
-
新建文件夹（
mkdir lesson1） -
打开新建的文件夹（
cd lesson1） -
创建文件（
touch math.js）
function add(a,b) {return a + b;
}function minus(a,b) {return a - b;
}
- 创建文件（
touch index.html），引入math.js
<!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>math.js</title><script src="math.js"></script>
</head>
<body></body>
</html>
- 创建文件（
touch math.test.js）
let result = add(3, 7);
let expected = 10;if(result !== expected) {throw Error(`3 + 7 应该等于 ${expected}，但是结果却是${result}`);
}result = minus(3, 3);
expected = 0;if(result !== expected) {throw Error(`3 - 3 应该等于 ${expected}，但是结果却是${result}`);
}
直接打开页面在浏览器的控制台，输入 math.test.js 中的测试代码并执行
index.html已经引入了math.js这个函数库，可以通过直接在控制台执行的方式调用- 测试过程中若是修改了原代码，需要刷新页面再执行测试代码
我们写的测试的例子基本上都是一个套路，就是 先预期一个结果，然后在执行计算出真正的结果，然后两个结果进行比较是否相同，如果相同就可以通过，如果不相同就抛出异常错误信息。
优化测试代码，单独封装一个 expect 函数，方便使用：
function expect(result) {return {toBe: function (actual) {if (result !== actual) {throw Error('预期值和实际值不相等');}}}
}expect(add(3,3)).toBe(6);
expect(minus(6,3)).toBe(3);
但是有个问题就是测试结果报错后从报错信息上看并不知道具体是函数库中的哪个方法错了。所以进一步优化：
function expect(result) {return {toBe: function (actual) {if (result !== actual) {throw Error(`预期值和实际值不相等 预期${actual} 结果却是${result}`);}}}
}function test (desc, fn) {try {fn();console.log(`${desc} 通过测试`)}catch (e) {console.log(`${desc} 没有通过测试 ${e}`)}
}test('测试加法 3 + 7', () => {expect(add(3,3)).toBe(6);
});test('测试减法 6 - 3', () => {expect(minus(6,3)).toBe(3);
});
2.前端自动化测试框架
在实际项目中只有 except 和 test 两个方法显然是不够的，同时还有很多自动化测试机制需要集成。
现在业界已经有很多前端自动化测试框架，这些框架里面集成了非常多的方法和机制供选用，在使用过程中的可以方便快捷的进行项目级别的前端自动化测试了。
目前业界主流的几个前端自动化测试框架包括 Jasmine、Mocha+Chai、Jest。
一个好的前端自动化测试框架应该在以下几个方面比较突出：
- 性能好
- 功能丰富
- 易用性高
Jest 优势：
- 速度快（在编辑过程中可以自动运行修改部分的测试代码）
- API 简单
- 易配置
- 隔离性好
- 监控模式
- IDE 整合
- 快照 Snapshot
- 多项目并行
- 覆盖率报告快速生成
- Mock 丰富
- 支持拓展性强，如：Babel、TypeScript、Node.js、React、Angular、Vue
3.使用 Jest 修改自动化测试样例
接下来开始使用 Jest，在这之前需要提前安装好 Node 环境，具体可参见
【笔记】Node.js概述和开发环境搭建
- 新建文件夹（
mkdir lesson2） - 进入新建的目录（
cd lesson2） - 初始化 npm 包管理环境（
npm init） - 一路回车后可以看到目录下生成一个文件 ——
package.json - 安装 Jest （
npm i jest@24.8.0 -D）-D表示只有在开发的时候才会运行测试用例
- 安装好后将上节代码复制过来并作如下修改：
math.js 作为 node 模块导出
function add(a,b) {return a + b;
}function minus(a,b) {return a - b;
}function multi(a,b) {return a * b;
}module.exports = {add,minus,multi
}
math.test.js 中 math.js 作为 node 模块导入并使用
const math = require('./math')
const {add,minus,multi
} = mathtest('测试加法 3 + 7', () => {expect(add(3,3)).toBe(6);
});test('测试减法 6 - 3', () => {expect(minus(6,3)).toBe(3);
});test('测试乘法 3 * 3', () => {expect(multi(3,3)).toBe(9);
});
修改配置 package.json：
{..."scripts": {"test": "jest --watchAll"},...
}
--watchAll表示监听所有测试用例，当有发生变化时，自动运行 jest 重跑所有测试用例
控制台运行 npm run test，结果如下：
> lesson2@1.0.0 test
> jestPASS ./math.test.js√ 测试加法 3 + 7 (4ms)√ 测试减法 6 - 3√ 测试乘法 3 * 3 (1ms)Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 5.468s
Ran all test suites.
若是测试代码写错，结果如下：
> lesson2@1.0.0 test
> jestFAIL ./math.test.js√ 测试加法 3 + 7 (6ms)√ 测试减法 6 - 3 (1ms)× 测试乘法 3 * 3 (7ms)● 测试乘法 3 * 3expect(received).toBe(expected) // Object.is equalityExpected: 3Received: 915 |16 | test('测试乘法 3 * 3', () => {> 17 | expect(multi(3,3)).toBe(3);| ^18 | });at Object.<anonymous> (math.test.js:17:22)Test Suites: 1 failed, 1 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 4.258s
Ran all test suites.
为什么
math中的方法必须导出来呢？
因为 Jest 在前端项目中帮助我们完成两类内容：
- 单元测试（模块测试）
- 集成测试（多个模块测试）
因此必须要以模块的方式来使用
不论是按照 CommonJS 还是 Es Module 改造，都需要符合 Jest 才能进行自动化测试
但是这样的话在 html 文件中使用会产生报错：
Uncaught ReferenceError: module is not defined
可以小改造一下（math.js）：
...
try {module.exports = {add,minus,multi}
} catch (e) {}
这种报错一般是不会出现在项目中的，现在的项目基本都是模块化编码
4.Jest 的简单配置
jest 有默认配置，下面来自定义配置，在这之前需要生成配置文件，运行 npx jest --init (Jest\lesson2\jest.config.js 完整如下) ：
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.htmlmodule.exports = {// All imported modules in your tests should be mocked automatically// automock: false,// Stop running tests after `n` failures// bail: 0,// Respect "browser" field in package.json when resolving modules// browser: false,// The directory where Jest should store its cached dependency information// cacheDirectory: "C:\\Users\\AImooc-Oliver\\AppData\\Local\\Temp\\jest",// Automatically clear mock calls and instances between every testclearMocks: true,// Indicates whether the coverage information should be collected while executing the test// collectCoverage: false,// An array of glob patterns indicating a set of files for which coverage information should be collected// collectCoverageFrom: null,// The directory where Jest should output its coverage filescoverageDirectory: "coverage",// An array of regexp pattern strings used to skip coverage collection// coveragePathIgnorePatterns: [// "\\\\node_modules\\\\"// ],// A list of reporter names that Jest uses when writing coverage reports// coverageReporters: [// "json",// "text",// "lcov",// "clover"// ],// An object that configures minimum threshold enforcement for coverage results// coverageThreshold: null,// A path to a custom dependency extractor// dependencyExtractor: null,// Make calling deprecated APIs throw helpful error messages// errorOnDeprecated: false,// Force coverage collection from ignored files using an array of glob patterns// forceCoverageMatch: [],// A path to a module which exports an async function that is triggered once before all test suites// globalSetup: null,// A path to a module which exports an async function that is triggered once after all test suites// globalTeardown: null,// A set of global variables that need to be available in all test environments// globals: {},// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.// maxWorkers: "50%",// An array of directory names to be searched recursively up from the requiring module's location// moduleDirectories: [// "node_modules"// ],// An array of file extensions your modules use// moduleFileExtensions: [// "js",// "json",// "jsx",// "ts",// "tsx",// "node"// ],// A map from regular expressions to module names that allow to stub out resources with a single module// moduleNameMapper: {},// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader// modulePathIgnorePatterns: [],// Activates notifications for test results// notify: false,// An enum that specifies notification mode. Requires { notify: true }// notifyMode: "failure-change",// A preset that is used as a base for Jest's configuration// preset: null,// Run tests from one or more projects// projects: null,// Use this configuration option to add custom reporters to Jest// reporters: undefined,// Automatically reset mock state between every test// resetMocks: false,// Reset the module registry before running each individual test// resetModules: false,// A path to a custom resolver// resolver: null,// Automatically restore mock state between every test// restoreMocks: false,// The root directory that Jest should scan for tests and modules within// rootDir: null,// A list of paths to directories that Jest should use to search for files in// roots: [// "<rootDir>"// ],// Allows you to use a custom runner instead of Jest's default test runner// runner: "jest-runner",// The paths to modules that run some code to configure or set up the testing environment before each test// setupFiles: [],// A list of paths to modules that run some code to configure or set up the testing framework before each test// setupFilesAfterEnv: [],// A list of paths to snapshot serializer modules Jest should use for snapshot testing// snapshotSerializers: [],// The test environment that will be used for testing// testEnvironment: "jest-environment-jsdom",// Options that will be passed to the testEnvironment// testEnvironmentOptions: {},// Adds a location field to test results// testLocationInResults: false,// The glob patterns Jest uses to detect test files// testMatch: [// "**/__tests__/**/*.[jt]s?(x)",// "**/?(*.)+(spec|test).[tj]s?(x)"// ],// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped// testPathIgnorePatterns: [// "\\\\node_modules\\\\"// ],// The regexp pattern or array of patterns that Jest uses to detect test files// testRegex: [],// This option allows the use of a custom results processor// testResultsProcessor: null,// This option allows use of a custom test runner// testRunner: "jasmine2",// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href// testURL: "http://localhost",// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"// timers: "real",// A map from regular expressions to paths to transformers// transform: null,// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation// transformIgnorePatterns: [// "\\\\node_modules\\\\"// ],// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them// unmockedModulePathPatterns: undefined,// Indicates whether each individual test should be reported during the run// verbose: null,// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode// watchPathIgnorePatterns: [],// Whether to use watchman for file crawling// watchman: true,
};
常见的配置里面都有，可以按需求选择注释或放开
- 运行
npx jest --coverage可以查看覆盖率
PASS ./math.test.js√ 测试加法 3 + 7 (13ms)√ 测试减法 6 - 3 (1ms)√ 测试乘法 3 * 3 (1ms)----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |math.js | 100 | 100 | 100 | 100 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 4.569s
Ran all test suites.
不仅在控制台有，在根目录也生成了相应文件:
.
|-- clover.xml
|-- coverage-final.json
|-- lcov-report
| |-- base.css
| |-- block-navigation.js
| |-- index.html
| |-- math.js.html
| |-- prettify.css
| |-- prettify.js
| |-- sort-arrow-sprite.png
| `-- sorter.js
`-- lcov.info1 directory, 11 files
Jest/lesson2/coverage/lcov-report/index.html 可以直接访问：
可以修改配置 package.json：
{..."scripts": {"coverage": "jest --coverage"},...
}
之后运行 npm run coverage，也是一样的效果
修改
Jest\lesson2\jest.config.js中的coverageDirectory可以指定生成目录名称
一般前端项目中都是使用 ESModule 的语法，按 ESModule 改一下：
math.js
function add(a,b) {return a + b;
}function minus(a,b) {return a - b;
}function multi(a,b) {return a * b;
}export {add,minus,multi
}
math.test.js
import {add,minus,multi
} from './math'test('测试加法 3 + 7', () => {expect(add(3,3)).toBe(6);
});test('测试减法 6 - 3', () => {expect(minus(6,3)).toBe(3);
});test('测试乘法 3 * 3', () => {expect(multi(3,3)).toBe(9);
});
改完代码之后，运行 jest 会有报错产生，这是因为 jest 是运行在 node 环境，并不能直接识别 ESModule 的语法，这就要用到 babel 了
安装 babel 相关依赖：
npm i @babel/core@7.4.5 @babel/preset-env@7.4.5 -D
在根目录新建 babel 配置文件 .babelrc
{"presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}
再次运行 jest ，成功！
jest 运行底层机制：
- npm run jest
- jest (babel-jest)
- babel-core
- 取 .babelrc 配置
- 在运行测试之前，结合 babel，先把代码做一次转化
- 运行转化过的测试用例代码
- Jest中文文档 | Jest中文网 · 🃏 Jest - 令人愉快的 JavaScript 测试框架
本文仅作记录， 实战要点待后续专文总结，敬请期待。。。
相关文章：
【实战】一、Jest 前端自动化测试框架基础入门（一） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（一）
文章目录 一、前端要学的测试课1.前端要学的测试2.前端工程化的一部分3.前端自动化测试的例子4.前端为什么需要自动化测试？5.课程涵盖内容6.前置技能7.学习收获 二、Jest 前端自动化测试框架基础入门1. 自动化测试背景及原理前端自动化测试产生的背景及原理 2.前端自…...
蓝桥杯Java组备赛（二）
题目1 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int max Integer.MIN_VALUE;int min Integer.MAX_VALUE;double sum 0;for(int i0;i<n;i) {int x sc.nextInt()…...
人力资源智能化管理项目（day10:首页开发以及上线部署）
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 首页-基本结构和数字滚动 安装插件 npm i vue-count-to <template><div class"dashboard"><div class"container"><!-- 左侧内…...
Conda管理Python不同版本教程
Conda管理Python不同版本教程 目录 0.前提 1.conda常用命令 2.conda设置国内源（以添加清华源为例，阿里云源同样） 3.conda管理python库 4.其它 不太推荐 pyenv管理Python不同版本教程（本人另一篇博客，姊妹篇&…...
free pascal：fpwebview 组件通过 JSBridge 调用本机TTS
从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr ，编写 js_bind_speak.lpr 如下，通过 JSBridge 调用本…...
数据结构——单链表专题
目录 1. 链表的概念及结构2. 实现单链表初始化尾插头插尾删头删查找在指定位置之前插入数据在指定位置之后插入数据删除指定位之前的节点删除指定位置之后pos节点销毁链表 3. 完整代码test.cSList.h 4. 链表的分类 1. 链表的概念及结构 在顺序表中存在一定的问题： …...
Linux：开源世界的王者
在科技世界中，Linux犹如一位低调的王者，统治着开源世界的半壁江山。对于许多技术爱好者、系统管理员和开发者来说，Linux不仅仅是一个操作系统，更是一种信仰、一种哲学。 一、开源的魅力 Linux的最大魅力在于其开源性质。与封闭的…...
⭐北邮复试刷题103. 二叉树的锯齿形层序遍历 (力扣每日一题)
103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root ，返回其节点值的 锯齿形层序遍历 。（即先从左往右，再从右往左进行下一层遍历，以此类推，层与层之间交替进行）。 示例 1：输入：…...
文件上传漏洞--Upload-labs--Pass07--点绕过
一、什么是点绕过 在Windows系统中，Windows特性会将文件后缀名后多余的点自动删除，在网页源码中，通常使用 deldot()函数 对点进行去除，若发现网页源代码中没有 deldot() 函数，则可能存在 点绕过漏洞。通过点绕过漏洞&…...
MySQL高级特性篇(1)-JSON数据类型的应用
MySQL是一种常用的关系型数据库管理系统，它提供了多种数据类型，其中包括JSON数据类型。JSON（JavaScript Object Notation）是一种常用的数据交换格式，它以键值对的形式组织数据，并支持嵌套和数组结构。MySQL…...
如何用Qt实现一个无标题栏、半透明、置顶（悬浮）的窗口
在Qt框架中，要实现一个无标题栏、半透明、置顶（悬浮）的窗口，需要一些特定的设置和技巧。废话不多说，下面我将以DrawClient软件为例，介绍一下实现这种效果的四个要点。 要点一：移除标题栏&#…...
ViT: transformer在图像领域的应用
文章目录 1. 概要2. 方法3. 实验3.1 Compare with SOTA3.2 PRE-TRAINING DATA REQUIREMENTS3.3 SCALING STUDY3.4 自监督学习 4. 总结参考 论文： An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale 代码：https://github.com…...
Sora 的工作原理（及其意义）
原文：How Sora Works (And What It Means) 作者： DAN SHIPPER OpenAI 的新型文本到视频模型为电影制作开启了新篇章 DALL-E 提供的插图。 让我们先明确一点，我们不会急急忙忙慌乱。我们不会预测乌托邦或预言灾难。我们要保持冷静并... 你…...
Java学习笔记2024/2/16
知识点 面向对象 题目1（完成） 定义手机类，手机有品牌(brand),价格(price)和颜色(color)三个属性，有打电话call()和sendMessage()两个功能。 请定义出手机类，类中要有空参、有参构造方法，set/get方法。 …...
XLNet做文本分类
import torch from transformers import XLNetTokenizer, XLNetForSequenceClassification from torch.utils.data import DataLoader, TensorDataset # 示例文本数据 texts ["This is a positive example.", "This is a negative example.", "Anot…...
Swift 5.9 新 @Observable 对象在 SwiftUI 使用中的陷阱与解决
概览 在 Swift 5.9 中，苹果为我们带来了全新的可观察框架 Observation，它是观察者开发模式在 Swift 中的一个全新实现。 除了自身本领过硬以外，Observation 框架和 SwiftUI 搭配起来也能相得益彰，事倍功半。不过 Observable 对象…...
分享一个学英语的网站
名字叫：公益大米网 Freerice 这个网站是以做题的形式来记忆单词，题干是一个单词，给出4个选项，需要选出其中最接近题干单词的选项。 答对可以获得10粒大米，网站的创办者负责捐赠。如图 触发某些条件&a…...
【动态规划】【C++算法】2742. 给墙壁刷油漆
作者推荐 【数位dp】【动态规划】【状态压缩】【推荐】1012. 至少有 1 位重复的数字 本文涉及知识点 动态规划汇总 LeetCode2742. 给墙壁刷油漆 给你两个长度为 n 下标从 0 开始的整数数组 cost 和 time ，分别表示给 n 堵不同的墙刷油漆需要的开销和时间。你有…...
【后端高频面试题--设计模式上篇】
🚀 作者 ：“码上有前” 🚀 文章简介 ：后端高频面试题 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 往期精彩内容 【后端高频面试题–设计模式上篇】 【后端高频面试题–设计模式下篇】 【后端高频…...
P3141 [USACO16FEB] Fenced In P题解
题目 如果此题数据要小一点，那么我们可以用克鲁斯卡尔算法通过，但是这个数据太大了，空间会爆炸，时间也会爆炸。 我们发现，如果用 MST 做，那么很多边的边权都一样，我们可以整行整列地删除。 我…...
Android Compose 一个音视频APP——Magic Music Player
Magic Music APP Magic Music APP Magic Music APP概述效果预览-视频资源功能预览Library歌曲播放效果预览歌曲播放依赖注入设置播放源播放进度上一首&下一首UI响应 歌词歌词解析解析成行逐行解析 视频播放AndroidView引入Exoplayer自定义Exoplayer样式横竖屏切换 歌曲多任…...
Nginx实战：安装搭建
目录 前言 一、yum安装 二、编译安装 1.下载安装包 2.解压 3.生成makefile文件 4.编译 5.安装执行 6.执行命令软连接 7.Nginx命令 前言 nginx的安装有两种方式： 1、yum安装：安装快速，但是无法在安装的时候带上想要的第三方包 2、…...
Qt之条件变量QWaitCondition详解(从使用到原理分析全)
QWaitCondition内部实现结构图： 相关系列文章 C之Pimpl惯用法 目录 1.简介 2.示例 2.1.全局配置 2.2.生产者Producer 2.3.消费者Consumer 2.4.测试例子 3.原理分析 3.1.源码介绍 3.2.辅助函数CreateEvent 3.3.辅助函数WaitForSingleObject 3.4.QWaitCo…...
OpenSource - 一站式自动化运维及自动化部署平台
文章目录 orion-ops 是什么重构特性快速开始技术栈功能预览添砖加瓦License orion-ops 是什么 orion-ops 一站式自动化运维及自动化部署平台, 使用多环境的概念, 提供了机器管理、机器监控报警、Web终端、WebSftp、机器批量执行、机器批量上传、在线查看日志、定时调度任务、应…...
【后端高频面试题--设计模式下篇】
🚀 作者 ：“码上有前” 🚀 文章简介 ：后端高频面试题 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 后端高频面试题--设计模式下篇 往期精彩内容设计模式总览模板方法模式怎么理解模板方法模式模板方…...
这才是大学生该做的副业，别再痴迷于游戏了！
感谢大家一直以来的支持和关注，尤其是在我的上一个公众号被关闭后，仍然选择跟随我的老粉丝们，你们的支持是我继续前行的动力。为了回馈大家长期以来的陪伴，我决定分享一些实用的干货，这些都是我亲身实践并且取得成功的…...
Ubuntu20.04 安装jekyll
首先使根据官方文档安装：Jekyll on Ubuntu | Jekyll • Simple, blog-aware, static sites 如果没有报错，就不用再继续看下去了。 我这边在执行gem install jekyll bundler时报错，所以安装了rvm，安装rvm可以参考这篇文章Ubuntu …...
AWK语言
一. awk awk：报告生成器，格式化输出。 在 Linux/UNIX 系统中，awk 是一个功能强大的编辑工具，逐行读取输入文本，默认以空格或tab键作为分隔符作为分隔，并按模式或者条件执行编辑命令。而awk比较倾向于将一行…...
精通Nmap：网络扫描与安全的终极武器
一、引言 Nmap，即NetworkMapper，是一款开源的网络探测和安全审计工具。它能帮助您发现网络中的设备，并识别潜在的安全风险。在这个教程中，我们将一步步引导您如何有效地使用Nmap，让您的网络更加安全。 因为Nmap还有图…...
Java 学习和实践笔记（11）
三大神器： 官方网址: http://www.jetbrains.com/idea/ 官方网址: https://code.visualstudio.com/ 官方网址: http://www.eclipse.org 装好了idea社区版，并试运行以下代码，OK！ //TIP To <b>Run</b> code, press &l…...
开发实体类
开发实体类之间先在pom文件中加入该依赖 <!-- 开发实体类--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency>我们在实体类中声明各个属…...
人工智能学习与实训笔记（十五）：Scikit-learn库的基础与使用
人工智能专栏文章汇总：人工智能学习专栏文章汇总-CSDN博客 本篇目录 一、介绍 1. 1 Scikit-learn的发展历程及定义 1.2 理解算法包、算法库及算法框架之间的区别和联系 二、Scikit-learn官网结构 三、安装与设置 3.1 Python环境的安装与配置 3.2 Scikit-lea…...
插值与拟合算法介绍
在数据处理和科学计算领域，插值与拟合是两种极为重要的数据分析方法。它们被广泛应用于信号处理、图像处理、机器学习、金融分析等多个领域，对于理解和预测数据趋势具有至关重要的作用。本文将深入浅出地介绍这两种算法的基本原理，并结合C语言编程环境探讨如何在CSDN开发者社…...
下一代Windows系统曝光：基于GPT-4V，Agent跨应用调度，代号UFO
下一代Windows操作系统提前曝光了？？ 微软首个为Windows而设的智能体（Agent） 亮相： 基于GPT-4V，一句话就可以在多个应用中无缝切换，完成复杂任务。整个过程无需人为干预，其执行成功…...
二.自定义头文件
一.Worker.h 1.1概述 - 类名：Worker - 继承关系：所有其他类（Employee、Manager、Boss）都继承自该抽象类 - 头文件保护：使用 pragma once 防止头文件重复包含 - 引入标准库：包含 <iostream> 和 <st…...
【AIGC】Stable Diffusion之模型微调工具
推荐一款好用的模型微调工具，cybertron furnace 是一个lora训练整合包，提供训练 lora 模型的工具集或环境。集成环境包括必要的依赖项和配置文件、预训练脚本，支持人物、二次元、画风、自定义lora的训练，以简化用户训练 lora 模型…...
探索未来科技前沿：深度学习的进展与应用
深度学习的进展 摘要：深度学习作为人工智能领域的重要分支，近年来取得了巨大的进展，并在各个领域展现出惊人的应用潜力。本文将介绍深度学习的发展历程、技术原理以及在图像识别、自然语言处理等领域的应用，展望深度学习在未来的…...
PTA | Wifi密码
下面是微博上流传的一张照片：“各位亲爱的同学们，鉴于大家有时需要使用 wifi，又怕耽误亲们的学习，现将 wifi 密码设置为下列数学题答案：A-1；B-2；C-3；D-4；请同学们自己作答…...
Linux中gdb使用说明书
首先我们要使用gdb，必须明白gdb使用范围： 要使用gdb调试，必须在源代码生成二进制程序的时候, 加上 -g 选项（gcc/g) 其次，我们就要来学习gdb使用的一些命令了： list／l 行号：显…...
LInux——开发工具的使用
目录 Linux软件包管理器 yum rzsz Linux编辑器——vim vim的使用 vim的基本操作 命令模式的常见命令 底行模式的常见命令 vim是需要配置的 Linux编译器——gcc/g 预处理 编译 汇编 链接 函数库 Linux项目自动化构建工具 make/makefile make原理 项目清理 Linux调试器g…...
沁恒CH32V30X学习笔记03--64位systick
systick CH32F2x 系列产品Cortex-M3 内核自带了一个 24 位自减型计数器（SysTick timer）。支持 HCLK 或 HCLK/8 作为时基，具有较高优先级别（6）。一般可用于操作系统的时基。 CH32V3x 系列产品内核自带了一个 64 位加减计数器（SysTick），支持 HCLK 或者 HCLK/8 作为时基，…...
【JavaEE】IP协议
作者主页：paper jie_博客 本文作者：大家好，我是paper jie，感谢你阅读本文，欢迎一建三连哦。 本文于《JavaEE》专栏，本专栏是针对于大学生，编程小白精心打造的。笔者用重金(时间和精力)打造&…...
计算机网络-数据通信基础
目录 前言 一、数据通信基本概念 二、数据通信相关知识1 总结 前言 正在学习计算机网络体系，把每日所学的知识梳理出来，既能够当作读书笔记，又能分享出来和大家一同学习讨论。 一、数据通信基本概念 基本概念：信源、信道、信宿&…...
【lesson53】线程控制
文章目录 线程控制 线程控制 线程创建 代码： 运行代码： 强调一点，线程和进程不一样，进程有父进程的概念，但在线程组里面，所有的线程都是对等关系。 错误检查: 传统的一些函数是，成功返回0&…...
TypeScript（一）：TypeScript基本理解
TypeScript基本理解 为什么使用TS JavaScript发展至今，没有进行数据类型的验证而我们知道，在编程阶段，错误发现的越早越好而TS就解决了JS的这个问题 认识TypeScript TypeScript是拥有类型的JavaScript超级，它可以编译成普通、…...
C语言—指针
碎碎念:做指针题的时候我仿佛回到了原点，总觉得目的是为了把框架搭建起来，我胡说的哈31 1.利用指针变量将一个数组中的数据反向输出。 /*1.利用指针变量将一个数组中的数据反向输出。*/#include <stdio.h> #include <time.h> #include <…...
c++作业
Shell中的函数（先调用后使用的原则）（没有申明） （Function） 函数名（有没有参数根据调用格式）（不能写任何内容） { 函数体 Return 返回值 } 函数名 ----》…...
什么是tomcat？tomcat是干什么用的？
前言 Tomcat是一个开源的、轻量级的应用服务器，是Apache软件基金会的一个项目。它实现了Java Servlet、JavaServer Pages（JSP）和Java Expression Language（EL）等Java技术，用于支持在Java平台上运行的动态W…...
中科院一区论文复现，改进蜣螂算法，Fuch映射+反向学习+自适应步长+随机差分变异，MATLAB代码...
本期文章复现一篇发表于2024年来自中科院一区TOP顶刊《Energy》的改进蜣螂算法。 论文引用如下： Li Y, Sun K, Yao Q, et al. A dual-optimization wind speed forecasting model based on deep learning and improved dung beetle optimization algorithm[J]. Ener…...
C# 如何实现一个事件总线
EventBus（事件总线）是一种用于在应用程序内部或跨应用程序组件之间进行事件通信的机制。 它允许不同的组件通过发布和订阅事件来进行解耦和通信。在给定的代码片段中，我们可以看到一个使用C#实现的Event Bus。它定义了一些接口和类来实现事件…...