HiDocs
Search K

Appearance

1.高内聚低耦合 ​

"高内聚低耦合" 是软件开发中的一个设计原则和目标，用于指导构建易于维护、可扩展和可重用的代码。

  • 高内聚（High Cohesion）：高内聚意味着一个模块、类或组件应该在逻辑上紧密相关的功能放在一起，实现单一的责任。高内聚的组件或模块具有清晰的功能边界，并且每个组件或模块都专注于完成特定的任务或提供特定的功能。高内聚的代码更易于理解、测试和维护，因为它们关注的是特定的问题领域。
  • 低耦合（Low Coupling）：低耦合意味着模块、类或组件之间的依赖关系应该尽可能地松散。不同的组件之间应该通过定义清晰的接口进行通信，而不是直接依赖于彼此的实现细节。低耦合的组件更容易重用、替换和测试，因为它们的依赖关系更清晰明确。

高内聚低耦合的设计原则的优势包括：

  • 可维护性：高内聚低耦合的代码更易于理解和维护。每个组件或模块的职责清晰，修改或扩展功能只需要关注特定的部分，而不会影响整个系统。
  • 可扩展性：由于高内聚低耦合的代码具有清晰的功能边界和松散的依赖关系，因此系统更容易扩展。新增功能或模块可以通过扩展现有的组件或添加新的组件来实现，而不会对整个系统造成过多的影响。
  • 可重用性：由于低耦合的组件之间的依赖关系松散，它们可以更容易地在不同的上下文中进行重用。这样可以提高代码的复用性，减少重复开发的工作量。
  • 测试性：高内聚的组件具有明确定义的功能边界，因此更容易进行单元测试和集成测试。同时，低耦合的组件可以通过模拟其依赖项来进行独立测试，提高测试的可靠性和效率。

为了实现高内聚低耦合的设计，开发者可以采取以下一些方法：

  • 单一职责原则：确保每个组件或模块只负责完成一个特定的任务或提供一个特定的功能。
  • 接口定义：通过明确定义接口来规范组件之间的通信方式，降低它们之间的依赖程度。
  • 依赖注入：通过依赖注入的方式来提供组件的依赖项，而不是在组件内部直接创建或引用依赖。
  • 解耦逻辑：将复杂的逻辑拆分成独立的小块，每个块只关注特定的任务，并通过合适的接口进行交互。
  • 模块化设计：将系统划分为模块，并确保每个模块内部的组件之间具有高内聚低耦合的特性。

通过遵循高内聚低耦合的设计原则，开发者可以创建更灵活、可维护和可扩展的软件系统。这种设计风格能够提高代码的质量，降低系统的复杂性，并促进团队合作和协同开发。

2.Vue 进行低代码开发 ​

Vue 低代码开发是利用 Vue 框架的特性和生态系统来快速构建应用程序的一种方法。低代码开发旨在减少开发人员的编码工作量，通过可视化的方式和简化的配置来实现快速的应用程序开发。

以下是在 Vue 中实现低代码开发的一些常见技术和工具：

  1. Vue CLI：Vue CLI 是一个基于命令行的工具，用于快速搭建 Vue 项目。它提供了一套可视化界面，允许开发人员通过简单的配置和选择来创建和管理项目结构，包括安装依赖、配置构建工具、添加插件等。
  2. Vue 组件库：使用现有的 Vue 组件库可以极大地加快低代码开发过程。这些组件库提供了一系列预构建的 UI 组件，可以通过简单的配置和组合来创建复杂的用户界面。一些常用的 Vue 组件库包括 Element UI、Vuetify、Ant Design Vue 等。
  3. 可视化编辑器：通过可视化编辑器，开发人员可以通过拖放、配置属性和交互式界面来快速构建应用程序的界面。这样可以避免大部分手动编写代码的工作，提高开发效率。一些流行的 Vue 可视化编辑器包括 Vue Designer、Vue Form Builder 等。
  4. 低代码平台和工具：除了上述提到的工具外，还有一些专门的低代码平台和工具，如 OutSystems、Mendix、Bubble 等，它们提供了更高层次的抽象和可视化功能，允许开发人员通过拖放组件、配置规则和逻辑来快速构建复杂的应用程序。

使用 Vue 进行低代码开发的好处包括：

  • 快速开发：通过可视化界面、简化的配置和现成的组件库，开发人员可以快速构建应用程序的原型或基本功能。
  • 减少编码工作量：低代码开发可以减少手动编写代码的工作量，提高开发效率，降低出错的风险。
  • 可视化配置：通过可视化的方式，开发人员可以更直观地配置应用程序的界面和行为，降低学习曲线。
  • 高度可定制性：尽管使用低代码开发，但仍可以对生成的代码进行自定义和扩展，以满足特定的需求和业务逻辑。

需要注意的是，低代码开发适用于快速原型开发、简单的业务应用或特定领域的应用程序。对于复杂的、高度定制的应用程序或需要深度优化和性能调整的场景，可能仍需要手动编写代码和进行高级的开发工作。因此，在选择低代码开发的方式时，需根据具体需求和项目复杂性做出合理的选择。

3.修改 npm 的镜像源 ​

我们发现下面的操作配置失败了：

bash
npm config set registry https://registry.npm.taobao.org --global

image-20230708143238413

必须要先删除原有的配置，才可以进行设置，否则无法设置成功

image-20230708143057965

有时候还需要 sudo 的权限

4.npm，cnpm，tnpm和yarn，tyarn ​

npm 和 tnpm 是 Node.js 的包管理工具，而 yarn 和 tyarn 是基于 npm 的替代工具。它们之间的主要区别如下：

  1. npm：npm 是 Node.js 默认的包管理工具，它随同 Node.js 一起安装。它提供了一种在应用程序中安装、更新、删除和管理依赖包的方式。——> 源祖，所有的都需要通过 npm下载，包括下载工具
  2. cnpm：cnpm 是淘宝团队提供的 npm 的镜像，用于解决在中国访问 npm 源速度慢的问题。它可以通过将 npm 源切换到淘宝的镜像源来提高下载速度。cnpm 基本上是一个命令行工具，它允许你使用 npm 的命令，但使用淘宝的镜像源进行下载和安装。
  3. tnpm（Taobao NPM）是淘宝团队开发的一个定制化的 npm 工具，旨在提供更快的包管理和依赖项安装速度。tnpm 是 npm 的一个替代品，具有与 npm 类似的命令行接口和功能，但使用了淘宝的镜像源。——> 只有内部员工可以用
  4. yarn：yarn 是由 Facebook 开发的包管理工具，它旨在改进 npm 的性能和稳定性。yarn 支持并行安装、离线模式、版本锁定等功能，可以更快地安装依赖包并生成更可靠的构建结果。
  5. tyarn：tyarn 是 yarn 的一个替代版本，它是由 淘宝 团队开发的。tyarn 与 yarn 的命令行接口和功能几乎完全一样，但它使用了 tnpm 的镜像源，提供了更快的下载速度。

5.构建多个 request 对象，请求不同的接口服务器地址 ​

这样的好处是，每一个 request 都可以配置一个专属的前缀地址，相同的端口号和 ip

并且方便根据环境去切换请求前缀

否则在请求函数中用全路径是非常麻烦的，不容易切换环境，不容器使用不同的请求地址！

这几个文件都是不同的 request 对象，有不同的请求前缀，分别应用到不同的 api 文件下即可：

image-20230708165159821

6.markdown生成目录的方法 ​

文章：https://juejin.cn/post/7233765235554025527

使用 Markdown-TOC

步骤 1：使用 npm 安装 markdown-toc npm install markdown-toc -g 步骤 2：生成目录 markdown-toc README.md 在上面的命令中， README.md 是您的 Markdown 文件名。输入此命令将自动生成一个 Markdown 目录。 步骤 3：将目录插入 Markdown 文件中 将生成的目录复制到您的 Markdown 文件中。请注意，Markdown-TOC 工具会将目录插入到文件中包含 <!--toc--> 标记的位置。

image-20230708200905213image-20230708200918048

粘贴到文章中：

image-20230708200944950

7.用 js 得知当前电脑的主题颜色，操作系统信息等 ​

在 JavaScript 中，你可以使用一些浏览器提供的 API 来获取当前电脑的主题颜色和操作系统信息。以下是几种常见的方法：

  1. 获取主题颜色：

    js
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  console.log('Dark mode is enabled');
} else {
  console.log('Light mode is enabled');
}

    通过使用 matchMedia 方法和媒体查询 (prefers-color-scheme: dark)，你可以检测当前电脑是否启用了深色主题。如果返回值为 true，则表示启用了深色主题，否则表示启用了浅色主题。

    原理：当用户在操作系统或浏览器中启用深色主题时，操作系统或浏览器会将相应的主题颜色信息传递给网页环境。通过使用 matchMedia 方法和媒体查询 (prefers-color-scheme: dark)，我们可以检测这个传递的主题颜色信息。

  2. 获取操作系统信息：

    js
    console.log(window.navigator.platform); // 获取操作系统所在的平台
console.log(window.navigator.userAgent); // 获取包含操作系统和浏览器信息的 User Agent 字符串

    通过访问 navigator.platform 属性，你可以获取操作系统所在的平台，如 Windows、Mac、Linux 等。而 navigator.userAgent 属性可以返回一个包含操作系统和浏览器信息的 User Agent 字符串。

需要注意的是，上述方法获取的信息依赖于浏览器提供的支持，不同的浏览器和操作系统可能提供不同的信息或有不同的 API。因此，具体可用性和返回值可能会因浏览器和操作系统而异。在实际使用时，应注意进行兼容性处理和测试。

8.媒体查询的含义 ​

媒体查询是一种在 CSS 中使用的机制，用于根据设备的特性或环境条件来应用不同的样式规则。它允许我们根据设备的特性（如屏幕尺寸、设备类型、方向等）或环境条件（如主题颜色、打印机设置等）来动态地适应和响应不同的展示需求。

深层含义是指媒体查询的应用不仅仅局限于屏幕尺寸或设备类型，还涵盖了更加细粒度的特性和条件。以下是一些常见的媒体查询的深层含义：

  1. 屏幕尺寸和方向：媒体查询可以根据设备的屏幕宽度、高度和方向（横向或纵向）来应用不同的样式，以优化在不同屏幕上的展示效果。
  2. 设备类型：媒体查询可以根据设备的类型（如电脑、手机、平板电脑等）来应用不同的样式，以适应不同设备的展示需求。
  3. 分辨率：媒体查询可以根据设备的屏幕分辨率（如像素密度）来应用不同的样式，以确保在高分辨率设备上呈现清晰的图像和文本。
  4. 主题颜色：媒体查询可以根据设备的主题颜色设置（如深色或浅色）来应用不同的样式，以提供适合用户喜好的外观和体验。
  5. 打印样式：媒体查询可以根据打印设备的设置来应用特定的打印样式，以确保打印的内容在纸质媒介上呈现良好。

通过使用媒体查询，我们可以根据设备的特性和环境条件，提供更加灵活和优化的样式和布局。这有助于提升网页的可用性、可访问性和用户体验，使网页能够在不同的设备和环境中提供一致和优秀的展示效果。

9.mac怎么指定某个文件（始终）默认打开方式 ​

方法 1. 更改某一个文件的默认打开方式

右键单击该文件。 按下 Option 键，你会看到「打开方式」选项变成了「始终以此方式打开」。 选择「始终以此方式打开」列表内的某一个应用程序。

方法 2. 更改同类型文件的默认打开方式

右键单击该文件，然后选择「显示简介」选项。 找到「打开方式」项目，点击倒三角选择你想指定的默认应用程序。 单击「全部更改」按钮即可生效。

原文链接：https://blog.csdn.net/a1056244734/article/details/108285085