CSS 变量详解什么是 CSS 变量?CSS 变量(也被称为“自定义属性”)是在 CSS 中存储特定值以便重用的一种方法。这些变量在 CSS 代码中以两个连字符(--)开头,可以在文档的任何地方使用,从而提高了代码的灵活性和可维护性。
CSS 变量解决了什么问题?CSS 变量主要解决了以下几个问题:
重复性: 在传统 CSS 中,相同的值(如颜色、字体大小等)需要在多处重复定义。CSS 变量允许你在一个地方定义这些值,然后在整个样式表中重复使用这个变量。
可维护性: 更新样式时,只需改变一个地方的变量值,整个网站的相关样式都会自动更新,简化了维护工作。
动态性: CSS 变量可以通过 JavaScript 动态更新,这使得实现主题切换或响应式设计等功能变得更加简单。
为什么要使用 CSS 变量?使用 CSS 变量的理由包括:
灵活性: 可以在任何 CSS 属性中使用 CSS 变量。
全局与局部作用域: 可以将变量定义在:root(全局)或任何特定选择器(局部)中。
与 JavaScript 的交互: 可以很容易地通过 JavaScript 读取或修改变量的值,使得网站可以实现更多 ...
Shadcn 与 Antd 是什么?Shadcn UI
概述: Shadcn UI 是一个包含可重用 UI 组件的集合,这些组件可以直接复制粘贴到你的应用中,不需要通过 npm 包管理系统进行安装。
如何理解可重用性?在软件开发中,可重用性指的是某个组件或代码块能够在多个项目或应用程序中使用,而无需进行大量修改。对于 Shadcn UI 提到的可重用 UI 组件,这意味着这些组件被设计为通用性强,易于集成,可以在不同的项目中反复使用。
解决的问题: 提供快速且灵活的方法实现自定义 UI 组件,减少开发时间并增加项目的个性化。
Ant Design
概述: Ant Design 是基于 React 的企业级 UI 设计语言和组件库,提供一整套设计工具和组件,以增强应用的界面一致性和用户体验。
解决的问题: 通过一套成熟的组件库和设计规范,提高开发效率,确保产品设计的一致性。
为什么选择 Shadcn UI
提供极大的灵活性和简易的集成方式,特别适合需要快速部署和具有特定设计需求的小型项目。
Ant Design 虽然功能全面,但其规范性不适合需要高度定制的场景。
如何理 ...
前端开发
未读Commit Message 格式<type>(<scope>): <subject>
Type(必须)Type 用于说明 git commit 的类别,只允许使用以下标识:
feat:新增功能(feature)。
fix/to:修复 bug。
fix:产生 diff 并自动修复此问题。适合于一次提交直接修复问题。
to:只产生 diff 不自动修复此问题。适合于多次提交。最终修复问题提交时使用 fix。
docs:文档(documentation)。
style:格式(不影响代码运行的变动)。
refactor:重构(即不是新增功能,也不是修改 bug 的代码变动)。
perf:优化相关,比如提升性能、体验。
test:增加测试。
chore:构建过程或辅助工具的变动。
revert:回滚到上一个版本。
merge:代码合并。
sync:同步主线或分支的 Bug。
Scope(可选)Scope 用于说明 commit 影响的范围,比如数据层、控制层、视图层等等,视项目不同而不同。例如在 Angular,可以是location、br ...
Electron 的由来如果想开发一个桌面 GUI 应用软件,希望其能同时在 Windows、Linux 和 Mac 平台上运行,可选的技术框架并不多,在早期人们主要用 wxWidgets、GTK 或 Qt 来做这类工作。
这类框架大都是以 C/C++语言开发,受语言开发效率的限制,开发者想通过它们快速的完成桌面应用的开发工作十分困难。近几年相继出现了现代编程语言针对这些框架的绑定库,诸如 Python、C#、Go 等,大部分都是开源社区提供的,但由于历史原因,要想用到这些框架的全部特性,还是需要编写 C/C++代码。并且高质量的 Node.js 的绑定库几乎没有,前端程序员想通过这类框架开发桌面应用更是难上加难。
Stack Overflow 的联合创始人 Jeff Atwood 曾经说过,凡能用 JavaScript 实现的,注定会被用 JavaScript 实现。桌面 GUI 应用也不例外,近几年两个重量级框架 NW.js 和 Electron 横空出世,给前端开发人员打开了这个领域的大门。
这两个框架都与中国人有极深的渊源,2011 年左右,中国英特尔开源 ...
ES6 使用 import 引入定义的模块,我自己总结的 default 和花括号的问题:export default,不能用花括号;export 但是没有 default,用花括号。
ES6 中 export 及 export default 的区别
在 JavaScript ES6 中,export 与 export default 均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
1.export 与 export default 均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中,export 、import 可以有多个,export default 仅有一个
3.通过 export 方式导出,在导入时要加{ },export default 则不需要
4.export 能直接导出变量表达式,export default 不行
电脑常见故障修复
未读一些国内常用 DNS 列表1、114DNS:国内用户量巨大的 DNS,访问速度快,各省都有节点,同时满足电信、联通、移动各运营商用户。DNS 服务器 IP 地址:首选:114.114.114.114备选:114.114.114.115
2、阿里 AliDNS:阿里公共 DNS 是阿里巴巴集团推出的 DNS 递归解析系统,目标是成为国内互联网基础设施的组成部分,面向互联网用户提供“快速”、“稳定”、“智能”的免费 DNS 递归解析服务。DNS 服务器 IP 地址:首选:223.5.5.5备选:223.6.6.6
3、Google DNS:谷歌公共域名解析服务(Google Public DNS)是由谷歌公司于 2009 年发布的一项新的 DNS 服务。主要为了替代 ISPs 或其他公司提供的 DNS 服务。已被污染,强烈不推荐!DNS 服务器 IP 地址:首选:8.8.8.8备选:8.8.4.4
4、OpenDNS:OpenDNS 是一个免费的域名解析服务提供商(DNS)。创建于 2006 年,长期以来致力于为广大个人用户以及商务企业用户和公共领域提供免费的域名解析服务。DNS 服务器 ...
MCP(Model Context Protocol)的定义与核心目标MCP(Model Context Protocol,模型上下文协议)是一种由 Anthropic 于 2024 年 11 月提出的开放协议,旨在为大型语言模型(LLM)提供标准化接口,使其能够安全、高效地连接外部数据源、工具和服务。它通过客户端-服务器架构,将 LLM 应用(如 Claude Desktop、IDE 工具)与本地或远程资源(如数据库、API、文件系统)无缝集成,解决传统 AI 交互中数据孤岛、功能受限和安全风险等问题。
MCP 解决的核心问题数据隔离与实时性不足LLM 的训练数据通常是静态的,无法访问实时信息(如天气、股票行情)或用户私有数据(如本地文件、数据库)。MCP 通过标准化协议允许 LLM 动态获取最新数据,例如通过天气 API 服务器实时查询天气警报。
功能扩展性差传统 LLM 无法直接执行外部操作(如发送邮件、控制设备)。MCP 通过“工具”(Tools)定义可执行功能,例如通过 GitHub 服务器自动创建 Issue 或查询数据库。
集成成本高不同 LLM 平台(如 OpenAI ...





