编程纪元

element-plus 的架构设计目的为解决当涉及到更大、更复杂的项目时，如何组织代码。 他的一套方法论是使用一套固定的结构和命名约定。 BEM详细介绍地址：Link 其中element-plus 就是采用了bem架构设计的一套样式规则。今天我们使用bem模式来实现一个常见的自适应容器布局。 1 了解BEM的前置知识嵌套样式1234567.a { .b { .c { display: flex; } }} $value 定义变量1234567$color: blue;$width: 200px;.el { color: $color; width: $width;} @at-root : 在嵌套的样式中， 跳出父级节点的类名即不在子类名之前再追加父级类名1234567891011121314151617181920212223242526272829303132// 正常的样式// 编译前.parent { ...

文件头示例123456789101112131415161718192021---title: 使用butterfly主题设置文章的Formattags: - Hexo - Butterfly - 教程categories: - Hexo - 教程keywords: "Hexo,主题配置"abbrlink: date: 2023-7-30 19:22:45description: butterfly主题文章formattop_img: https://origin.chaizz.com/undraw_online_art_re_f1pk.svgcover: https://origin.chaizz.com/undraw_online_art_re_f1pk.svgcopyright:copyright_author:copyright_author_href:copyright_url:copyright_info: --- title 【必需】文章标题 date 【必需】文章创建日期 updated 【可 ...

​ Pytest 是一个基于 Python 的测试框架，它提供了一种简洁优雅的方式来编写测试代码。在软件开发中，测试是非常重要的环节，它有助于验证代码的正确性、稳定性和可靠性。Pytest 框架的出现使得编写和执行测试变得更加简单和高效。 为什么我们需要测试？在软件开发过程中，我们经常会遇到各种各样的需求变更、bug修复、功能扩展等情况，这些变动可能会对现有的代码产生意想不到的影响。而如果没有足够的测试覆盖，这些变动可能会导致代码的错误、功能失效或者性能下降。测试的作用就在于通过运行一系列的测试用例来验证代码的正确性，确保它能够按照预期的方式工作。测试能够帮助我们发现和解决问题，提高代码的质量和可维护性。 Pytest 框架相比其他测试框架有以下优势： 简洁优雅：Pytest 使用简洁的语法和强大的断言库，使得编写测试代码更加易读、易维护。相比其他测试框架，Pytest 的测试用例更简洁、更清晰。 自动化发现测试：Pytest 可以自动发现项目中的测试函数和测试类，无需手动编写测试套件。只需要按照规定的命名规则来命名测试文件和测试函数，Pytest 就能自动识别并执 ...

​ Pythonista开发前的基础工作之编辑器配置篇1 编辑器基础配置1.1 外观 字体：Fira Code Medium 大小：16 1.2 编辑器 字体：Fira Code 大小：18 1.3 Atom Material Icons Setting​ 2 快捷键 禁用双击shift唤醒全局搜索框 [shift-shift] 设置 -> 高级设置 -> 用户界面 3 插件 .ignore 忽略文件 Translation 翻译插件， 需要自己设置翻译SDK的key Atom Material Icons 一个好看的文件夹主题 GitToolBox git 相关插件， 显示历史修改人等 One Dark Theme 黑色主题 Tabnine AI Code Completion AI开发助手 sourcery 基于AI的编码助手 LeetCode Editor leetcode 插件 Git Commit Message Helper 提交规范 4 代码模板 设置 -> 编辑器 -> 文件和代码模板 - ...

​ Pythonista开发前的基础工作之系统环境篇当我们进入到一个新的环境，或者是拿到一个新的操作系统，往往都需要我们配置自己的开发环境，系统软件环境等。 本次以Python开发者为例，介绍一个Pythonista需要做哪些准备工作。 个人常用的操作系统为Windows和Ubuntu, 所以以下的所有环境配置和软件都是基于Windows和Ubutu的。 1 windwos系统软件windows系统层面一般不需要太多的设置，只需要安装一些自己的开发软件。 首先作为开发者的必备的软件： Python 不装不行的软件 Git 代码版本控制系统 PyCharm - Pythonista Python编辑器利器 (针对Python项目) Visual - Studio Code 同样是编辑器利器 （作为轻量化文本编辑器） WebStorm - Pythoneer写个前端项目也不是不行 Navicat - 数据库可视化管理软件 Another Redis Desktop Manager - Redis可视化管理工具 ApiPost7 - 接口测试管理利器 同类型的有A ...

​ JS笔记之Generator(一)在JS中常规函数只会返回一个单一值，或者不返回值。而generator可以按需一个接一个的返回（yield）多个值。 1 generator 函数要创建一个generator，我们需要创建一个特殊的语法结构：function*，即所谓的“generator function”。它看起来像这样： 12345function* generateSequence() { yield 1; yield 2; return 3;} generator 函数与常规函数的行为不同。在此类函数被调用时，它不会运行其代码。而是返回一个被称为 “generator object” 的特殊对象，来管理执行流程。 123456789function* generateSequence() { yield 1; yield 2; return 3;}// "generator function" 创建了一个 "generator object&qu ...

​ js笔记之Promise(三)1 使用 promise 进行错误处理promise链在错误中处理中非常强大，当一个 promise 被 reject 时，控制权将移交至最近的 rejection 处理程序。这在实际开发中非常方便。例如： 123fetch('https://no-such-server.blabla') // reject .then(response => response.json()) .catch(err => console.log(err)) // TypeError: Failed to fetch（这里的文字可能有所不同） 2 隐式的try…catch在 executor 周围的“隐式 try..catch”自动捕获了 error，并将其变为 rejected promise。 12345new Promise((resolve, reject) => { resolve("ok");}).then((result) => ...

​ js笔记之Promise(六)async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用。 1 async function语法：他可以被放置当在一个函数前面，他表达了一个简单的事情：即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。 123async function f() { return 1;} 我们显式的返回一个promise结果也是一样的。 12345async function f() { return Promise.resolve(1);}f().then(console.log); // 1 所以说async确保了函数返回一个promise，也会将非 promise 的值包装进去。 2 await语法：只在 async 函数内工作, 让 JavaScript 引擎等待直到 promise 完成（settle）并返回结果。 1let value = await promise; 例如一个 ...

​ js笔记之Promise(五)1 微任务promise 的处理程序 .then、.catch 和 .finally 都是异步的。 即便一个 promise 立即被 resolve，.then、.catch 和 .finally 下面 的代码也会在这些处理程序之前被执行。 12345let promise = Promise.resolve();promise.then(() => console.log("promise done!"));console.log("code finished"); // 这个 console.log 先显示 异步任务需要适当的管理，为此ECMA规定了一个内部队列，PromiseJobs，通常被称为“微任务队列（microtask queue）”（V8 术语）。 如 规范 中所述： 队列（queue）是先进先出的：首先进入队列的任务会首先运行。 只有在 JavaScript 引擎中没有其它任务在运行时，才开始执行任务队列中的任务。 简单的说就是当一个promise 准备就绪 ...

​ js笔记之Promise(四)1 PromisificationPromisification 它指将一个接受回调的函数转换为一个返回 promise 的函数。由于许多的函数都是基于回调的，因此在实际的开发中经常会遇到这种转化。一个简单的例子: 123456789101112function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(null, script); script.onerror = () => callback(new Error(`Script load error for ${src}`)); document.head.append(script);} // 用法： // loadScript('path/script.j ...