前几日把《天行健》这个电视剧看完了：主要讲了：该剧讲述了晚清末年，身份各异的一行人，却因机缘卷入一场离奇的寻宝之旅，并在恢弘激荡的历史浪潮中，逐步坚定救国理想的故事。（百度百科）救灾门三刀是一位革命与守旧之前的摇摆人，起初参与先帝（光绪）的维新变法，最后获罪入狱，后来被“革命人”感化，重新走上革命道路。在一次赈灾的事件中，他的三观被刷新：主要意思是赈灾要讲究时机，不易过早，东西不易过多。这就是存清（内务府总管）所说的人性。最近读《菜根谭》了解到斗米恩、升米仇：指如果别人在危难的时候你给他很小的帮助，他会感激你。可如果给人的帮助太多，让其形成了依赖，一旦停止帮助，反而会让人忌恨。电视剧里的救灾场景和此句都内涵一个字：度。一个是时间的度，一个是量的度。度把握好，不合理的也变得合理；把握的不好，合理的也变得不合理。行有所止，言有所界，凡事有度。 ...继续阅读 (12)

家中的 LED 吸顶灯坏了，起初只坏了父母房间的 3 色只有 2 种颜色亮，后来餐厅的灯也开始爆闪。经过最近的研究完美机会零成本解决。刚开始呢，是准备更换整个灯的，找了一个不知道的牌子，两个得 100 多，如果再加上安装费一个 40 … 哈哈，我感觉需要研究一下，了解一下到底怎么安装、卸载灯罩以及里面 LED 是怎么个构造，像我当初研究怎么修淋浴房门、厕所吊顶灯、厨房吊顶灯。主要原因是家中的领导带孩子出去玩、父母回老家了，给了我充足的时间研究。1.安装、卸载灯罩如果自己动手修，首先的步骤是知道怎么安装和卸载，经过观察吸顶灯有个吸顶铁盘灯罩周围用四个扣子夹住的：可见灯罩中也有很多小蚊虫、积灰也严重，正好顺便清洗一下。看下墙面上的吸顶盘：2.吸顶灯的构造基本就这几个看着还是很简单的。3.故障定位开始找 bug 了，程序里修复问题也是根据现象、报错等线索来定位问题。在开始之前去抖音、小红书也看了很多案例，然后结合具体情况：餐厅灯“爆闪”，我猜是镇流器坏了；卧室灯 3 色坏 1 个（首次开灯不亮），我猜是 LED 灯珠坏了；接着进行了 2 套准备：买了适配的镇流器（免打孔、磁吸，不然得注意尺寸。），注意输入、输出电压和电流；买了 2 个新的单色白光 LED 灯；4.卸载吸顶灯注意不要卸载吸顶盘，只要把镇流器卸载下来，千万注意要断电操作。首先我先处理的是餐厅的，在卸载的时候发现： ...继续阅读 (48)

最近不知道怎么，在 Chrome 里不管点击哪里都变成了光标模式：这种感觉难受的不行，今天终于搜了一下原来 chrome 有个光标浏览模式：光标导航网站。原来我已经不知道什么时候打开这个模式了！！！快捷键是F7.关闭模式下，在页面中按下 F7 会有下面提示：确认就进入光标导航模式。 ...继续阅读 (56)

要初始化一个基于 Chrome 扩展的项目，包括 V3 版本，你需要按照以下步骤进行操作：创建项目文件夹：在你的项目文件夹中，创建一个新文件夹来保存你的扩展代码和资源。创建清单文件（manifest.json）：Chrome 扩展的核心是清单文件，它描述了扩展的属性、权限和功能。以下是一个基本的 V3 版本清单文件示例：{ "manifest_version": 3, "name": "My Extension", "version": "1.0", "description": "A description of my extension.", "permissions": [ "activeTab" ], "content_scripts": [ { "matches": [""], "js": ["content.js"] } ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/ ...继续阅读 (47)

背景消息列表页的搜索框出现两个放大镜图标，下图：经搜索发现是 iOS 15、16 type=”search” 会自带搜索图标。u-input 又配置了一个，就得需要移除自带的。刚开始的解决方案：::v-deep input[type="search"]{ -webkit-appearance:none !important; }可是并没有移除多余的图标，下面的方法生效：::v-deep [type="search"]::-webkit-search-decoration { display: none; }其实还有一种方法就是把 uview 的 u-search 源码更改下：这会导致一个问题就是弹出的键盘右下角的搜索变成完成。2024/7/11:最近又遇到此问题，iphone 14 plus / ios 16.2，最后解决方法是升级 uniapp 2.0.0 =>2.0.2 版本。网上有很多此问题的讨论，两种方法都有，最后想想还是需要把它们合并起来：input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results ...继续阅读 (157)

有时候业务上遇到问题，需要跟踪 Vue 底层是如何实现的此时就需要调试源码，但业务中的代码是压缩后的无法阅读，所以就需要整一个可以调试的版本。下载源码git clone https://github.com/vuejs/vue.git安装依赖：yarn// npm install修改构建命令新增：--sourcemap"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",这样在运行 npm run dev 的时候在 dist 目录下会输出 soucemap 文件。项目根目录新增 index.html 文件引入./dist/vue.js：DOCTYPE htmlVue debugger{{ msg }}const vm = new Vue({ el: '#app', data() { return { msg: 'hello world', }; }, created() { }, methods: { } });预览 HTML ...继续阅读 (58)

你有 2 个描述，软件开发人员薪水的对象：const salary1 = { baseSalary: 100_000, yearlyBonus: 20_000 }; const salary2 = { contractSalary: 110_000 };您想实现一个根据工资对象返回总薪酬的函数：function totalSalary(salaryObject: ???) { let total = 0; for (const name in salaryObject) { total += salaryObject[name]; } return total; } console.log(totalSalary(salary1)); // => 120_000 console.log(totalSalary(salary2)); // => 110_000您将如何注释totalSalary()函数的salaryObject参数以接受键为字符串、值为数字的对象？答案是使用索引签名！让我们找到什么是TypeScript索引签名以及何时需要它们。1.为什么要索引签名索引签名的思想是在您只知道键和值类型时键入未知结构的对象。索引签名适合薪水参数的 ...继续阅读 (63)

在 Vue.js 中，组件的使用可以分为声明式和指令式。以下是对这两种使用方式的解释和示例。声明式使用组件声明式使用组件是通过模板语法直接在模板中声明组件。这种方式更常见，易于理解和维护。示例：MyComponent.vue{{ message }}export default { props: ['message'] };ParentComponent.vueimport MyComponent from './MyComponent.vue'; export default { components: { MyComponent } };在上面的示例中，我们在ParentComponent.vue模板中声明了my-component，并通过属性message传递数据。这就是声明式使用组件的方法。指令式使用组件指令式使用组件则是在 JavaScript 代码中手动创建和挂载组件。这种方式适用于需要动态创建和控制组件的场景。示例：MyComponent.vue{{ message }}export default { props: ['message'] };// 指令式使用组件 import Vue from 'vue'; import MyComponent from './MyComponent.vue'; // 创建一个 Vue 实例 const ...继续阅读 (53)

使用 TS 开发项目的时候有时会遇到类型错误，就会产生下面的提示：这个错误提示格式简直让人抓狂，幸好有个 VSCode 扩展：Pretty TypeScript Errors使用之后错误提示格式如下：是不是轻松易懂了！ ...继续阅读 (53)

is是 TypeScript 中用于类型断言的关键字，它用于在运行时对值的类型进行判断。通过使用is，你可以编写自定义的类型保护函数，帮助 TypeScript 编译器理解代码中变量的类型。下面是is的语法和一个简单的使用案例：语法function isType(variable: any): variable is ExpectedType { // 检查 variable 是否为 ExpectedType 类型的值 // 返回值为布尔类型，指示 variable 是否为 ExpectedType 类型 }使用案例假设我们有一个User类型和一个isAdmin函数，用于判断用户是否为管理员。我们可以使用is关键字创建一个类型保护函数来告诉 TypeScript 编译器，当user为管理员时，它是一个AdminUser类型的值。interface User { name: string; isAdmin: boolean; } interface AdminUser extends User { privileges: string[]; } function isAdmin(user: User): user is AdminUser { return user.isAdmin === true; } // 使用 isAdmin 函数进行类型保护 f ...继续阅读 (62)

Element.getAnimations()是一种用于获取与元素关联的所有动画（包括 CSS 动画和 Web 动画 API 动画）的方法。它返回一个包含Animation对象的数组。这些Animation对象表示元素当前正在运行或挂起的动画。语法let animations = element.getAnimations();返回值一个包含Animation对象的数组。使用案例以下是一些示例代码，展示如何使用Element.getAnimations()方法来获取和操作元素的动画。示例 1：获取并暂停所有动画假设有一个 HTML 元素正在应用 CSS 动画或通过 Web 动画 API 动画：DOCTYPE html@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } .animated { animation: slide 2s infinite; }This is a sliding div.Pause AnimationsPlay Animationsconst animatedElement = document.querySel ...继续阅读 (66)

在 TypeScript 中，as const是一种类型断言的用法，它用于告诉编译器将某个位置的类型视为一个常量（const）类型。这在 TypeScript 的类型守卫和类型细化中非常有用，尤其是在处理字面量类型或确保某个位置的值不会被修改时。基本用法当你使用as const时，你告诉 TypeScript 编译器，某个位置的值是常量，不应该被重新赋值。const config = { apiEndpoint: "https://api.example.com", timeout: 5000, } as const; // 下面的代码将导致 TypeScript 编译错误，因为根据 as const，config 被视为只读的 // config.apiEndpoint = "https://new-api.example.com";在这个例子中，config对象被断言为as const，这意味着它的属性apiEndpoint和timeout被推断为只读属性。在类型守卫中使用as const在类型守卫中特别有用，因为它可以帮助确保某个位置的值是字面量类型。function isStringLiteral(value: any): value is string { return typeof value === "string" && value !== __VUE ...继续阅读 (60)

在TypeScript中，declare module和declare namespace都用于定义类型信息供编译器使用，但它们之间存在一些关键差异，主要体现在组织结构和用途上：declare module用途:declare module主要用于描述一个外部模块（通常是第三方库）的类型信息。当你使用的JavaScript库没有自带类型定义文件（.d.ts），你可以通过这种方式来声明这个模块提供的接口，以便在TypeScript项目中使用这些库而不会引发类型错误。组织结构: 它强调的是模块的边界，允许你为整个模块或模块内的特定部分（如类、接口、函数等）提供类型声明。示例:declare module 'myModule' { export function doSomething(): void; export class MyClass { constructor(); someMethod(): string; } }declare namespace用途:declare namespace则更多用于创建一个逻辑上的命名空间，用来组织相关的类型、类、接口等。命名空间可以帮助避免全局变量的污染，并提供一种层次化的访问方式。它是TypeScript中组织代码的一种方式，尤其是对于那些没有采用ES6模块化（import/expo ...继续阅读 (62)

在TypeScript中，declare关键字主要用于声明类型、变量、函数、模块等的存在，但不提供其实现。这对于与JavaScript库或现有代码集成特别有用，因为你可以告诉TypeScript编译器这些实体已经存在，即使它们在你的TypeScript源代码中没有实际定义。这有助于TypeScript更好地理解和验证你的代码，同时避免类型检查错误。以下是declare的一些基本用法和案例。基本语法声明变量:declare var variableName: type;声明函数:declare function functionName(param1: type1, param2: type2): returnType;声明模块:declare module moduleName { export function funcName(param: type): returnType; export var varName: type; // ...其他声明 }声明类型别名:declare type typeName = type;全局声明:declare global { interface Window { myCustomMethod: (arg: string) => void; } }使用案例1. 声明全局变量假设你正在 ...继续阅读 (57)

TypeScript 中的函数重载允许你为一个函数提供多个函数类型定义，以便它可以以不同的方式处理不同的参数类型或参数数量。函数重载可以提高代码的可读性和类型安全性。在 TypeScript 中实现函数重载的步骤如下：声明重载签名：首先，你需要声明一个或多个重载签名，这些签名描述了函数可以接受的不同参数类型和返回值类型。这些签名不会包含函数体。实现签名：然后，你需要提供一个实现签名，这个签名必须与所有的重载签名兼容。实现签名包含了函数的实际逻辑。调用函数：在调用函数时，TypeScript 编译器会根据提供的参数类型来检查哪个重载签名与之匹配，并应用相应的类型检查。下面是一个简单的函数重载示例：// 重载签名 function makeDate(timestamp: number): Date; function makeDate(m: number, d: number, y: number): Date; function makeDate(mOrTimestamp: number, d?: number, y?: number): Date { if (d !== undefined && y !== undefined) { return new Date(y, mOrTimestamp - 1, d); } else { r ...继续阅读 (59)

在 TypeScript 中，字面量类型（Literal Types）是指那些与特定字面量值严格对应的类型。字面量类型包括字符串字面量类型、数字字面量类型和布尔字面量类型。使用字面量类型可以提高代码的准确性和可读性，因为它们限制变量只能赋值为特定的字面量。字符串字面量类型字符串字面量类型用于定义一个只能是特定字符串值的变量。type EventType = "click" | "mouseover" | "keydown"; const eventType: EventType = "click";在这个例子中，EventType是一个字符串字面量类型，它只能是"click"、"mouseover"或"keydown"中的一个。数字数面量类型数字字面量类型用于定义一个只能是特定数字值的变量。type StatusCode = 200 | 301 | 404 | 500; const status: StatusCode = 200;在这个例子中，StatusCode是一个数字字面量类型，它只能是200、301、404或500中的一个。布尔字面量类型布尔字面量类型用于定义一个只能是布尔值true或false的变量。type BooleanValue = true | false; const isReady: BooleanValue = false;在这个例子中，isReady变量 ...继续阅读 (60)