訾博（ZiBo）的博客

创建独立的作用域避免全局污染实现模块化保护私有变量很多老代码仍在使用 IIFE在某些特定场景下 IIFE 仍是最佳选择理解 IIFE 有助于更好地理解 JavaScript 的作用域和闭包概念。

同时执行多个独立的异步操作等待所有操作完成后统一处理结果优雅地处理错误情况写出更简洁清晰的代码合理使用 Promise.all 可以让异步代码更优雅,性能更好。但也要注意它的"一失败全失败"特性,在实际应用中要根据业务需求选择合适的 Promise 组合方式。

WebExt-Bridge 的设计初衷是简化 Web 扩展中各部分之间的通信。无论是在后台脚本、内容脚本、开发者工具、弹出窗口、选项页还是窗口上下文之间，WebExt-Bridge 都能提供一个高效且一致的方式来发送和接收消息。该包已在生产环境中经过广泛测试，例如在 Bugflow 项目中得到了应用。WebExt-Bridge 项目最初由 Neek Sandhu（@zikaari）于 2017 年启动，现已由 Server Side Up 接手维护。

这个Delaysleep: 基础延迟execute: 延迟执行函数debounce: 创建防抖函数throttle: 创建节流函数通过合理使用这些方法，可以有效控制函数的执行时机，优化性能，提升用户体验。在实际开发中，要根据具体场景选择合适的方法使用。

在某些 JavaScript 或 TypeScript 项目中，可能会有大量使用 关键字的代码。当我们需要将这些代码迁移到其他框架（例如 Vue 3 的组合式 API）时，可能需要将 的用法改为 的形式。这种情况下，正则表达式替换将显得尤为高效。首先，确保你的 VS Code 已经安装并打开了需要进行替换的代码文件。你可以通过以下快捷键打开查找和替换面板：在查找输入框的右侧，你会看到一个带有“.*”的图标。点击这个图标以启用正则表达式功能。启用后，VS Code 将允许你使用正则表达式进行搜索和替换。

在JavaScript编程中，字符串与数字之间的转换是一个基础而又常见的操作。无论是处理用户输入、数据计算还是格式化输出，掌握这些转换技巧都能帮助开发者更高效地编写代码。本篇博客将详细介绍字符串与数字转换的多种方法，探讨其使用场景及最佳实践。掌握JavaScript中字符串与数字的转换方法是编程中的基本技能。通过合理选择转换方法，开发者可以编写出更健壮和易于维护的代码。在实际应用中，结合具体场景和需求，选择合适的转换方式，以提高代码的效率和可靠性。希望本篇博客能帮助读者更好地理解和应用这些转换技巧。

Grid Layout Plus 以其丰富的特性和灵活的配置，为 Vue 3 开发者提供了一个强大的栅格布局解决方案。无论是构建复杂的仪表板、动态的网页布局还是响应式的移动应用，Grid Layout Plus 都能够提供必要的支持。通过其直观的拖拽和缩放功能，开发者可以快速构建出既美观又实用的用户界面。

VueHooks Plus 旨在简化 Vue 3 开发者的 Hook 使用过程。它提供了基础和高级的 Hook，让开发者能够以简洁的语法和易用的特性快速上手。无论你是 Vue 的新手还是老手，VueHooks Plus 都能帮助你轻松构建高性能的逻辑。VueHooks Plus 不仅仅是一个 Hooks 库，它是一个全面的解决方案，涵盖了从请求处理到状态管理，再到 DOM 操作和开发辅助的各个方面。通过插件化的设计和丰富的功能，VueHooks Plus 极大地提升了 Vue 3 开发的效率和体验。

通过使用这些工具函数，开发者可以更轻松地处理和展示日期时间信息，为用户提供更准确和友好的时间表述。

首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。语法为卡片组件添加样式，包括卡片布局、边框、阴影等。

Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。

当处理默认值时，??（空值合并运算符）和||（逻辑或运算符）是 JavaScript 中的两个重要工具。尽管它们的目标相似，但它们在实现和使用上存在一些关键区别。本文将详细探讨它们的区别和相似之处。

JavaScript提供了多种方式来获取对象的属性。这些方法可以根据不同的需求和情况来选择使用。

JavaScript提供了多种方式来获取对象的属性。这些方法可以根据不同的需求和情况来选择使用。

在前端开发中，我们经常需要判断变量的类型以进行相应的操作或处理。TypeScript 提供了基础的类型检查，但有时我们需要更复杂或更灵活的类型检查。这篇博客文章将介绍一组实用函数，用于各种常见的类型检查。

在日常开发中，尤其是在处理配置对象或者嵌套的数据结构时，对象的深度合并成为一项常见需求。这篇博客将介绍如何在JavaScript中实现对象的深度合并，并提供具体的使用例子。lodash-es是一个提供了很多有用工具函数的JavaScript库。其中，assign函数用于将一个或多个源对象自身的可枚举属性从一个对象复制到目标对象。本文将详细介绍如何使用lodash-es中的assign函数进行对象合并。

JS 通过 URL 下载文件并重命名（两种方式）

需要注意的是，如果表达式中含有多个操作符，那么它们的优先级将根据 JavaScript 运算符优先级规则来确定，需要使用括号来明确优先级。在 JavaScript 中，if语句的括号内可以放置任何可转换为布尔值的表达式。

npm install --save-dev : 安装包并将其添加到 devDependencies 列表中。pnpm add --save-dev: 安装包并将其添加到 devDependencies 列表中。npm install --save : 安装包并将其添加到 dependencies 列表中。yarn add --dev: 安装包并将其添加到 devDependencies 列表中。pnpm add : 安装包并将其添加到 dependencies 列表中。

【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition。

【前端工具类】002-监听窗口尺寸变化工具类：WindowSizeTracker。

【代码】【前端工具类】001-本地存储工具类：LocalStorageUtil。

JS数组、对象扁平化（多维转一维）

早期的 JavaScript 程序员一般有过使用 JavaScript **“模拟面向对象”**的经历；实际上，JavaScript 本身就是正统的面向对象语言！描述对象的方式 = 基于类（Java等） + 基于原型（JavaScript等）；基于类的描述方式更成功，导致人们错误地认为这样的方式才是面向对象。由于公司的一些政治原因，JavaScript 在推出之时，被要求去模仿 Java ，因此有了 、等语言特性，使其看起来更像 Java ！ES6 提供了 这个关键字来定义类，尽管其仍然是基于原型运行时系

对象： 一切事物的总称。对象的三个特征：面向对象要有类，有类的封装、继承、多态特性，类是静态的，不可在运行时添加新属性。使用原型描述对象，JavaScript 对象可以在运行时自由添加属性。很多人认为：JavaScript 不是面向对象，而是基于对象。通过”类“描述对象：最成功的流派，如 C++ ，Java等流行的编程语言；通过”原型“描述对象：JavaScript；Java：类是静态的 + 一旦定义好，在运行时无法改变 + 对象的状态和行为分别是对象属性和函数**。JavaScript：可以在运行时往里添

运行时类型 = 代码实际执行过程中的类型；JavaScript 代码运行过程中产生的数据都具有运行时类型；运行时类型一共有 7 种；JavaScript 语言的每一个值都属于某一种数据类型；JavaScript 语言规定了 7 种语言类型；这 7 种类型广泛应用于变量、函数参数、表达式、函数返回值等场合；这 7 种类型分别是：Undefined 表示未定义，它的类型只有一个值，就是 undefined ；任何变量在赋值前都是 Undefined 类型，值是 undefined ；一般我们可以使用全局变量 u

文章目录五、Sass 的基本特性-运算1 加法2 减法3 乘法4 除法5 变量计算6 数字运算7 颜色运算8 字符运算五、Sass 的基本特性-运算程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 Sass 中的数学运算。1 加法加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：.box { wi

文章目录四、Sass 的基本特性-基础（重要）1 声明变量1.1 定义变量的语法1.2 简单示例1.3 代码演示2 普通变量与默认变量2.1 普通变量2.2 默认变量3 变量的调用4 局部变量和全局变量4.1 概述4.2 全局变量与局部变量4.3 全局变量的影子4.4 什么时候声明变量5 嵌套5.1 概述5.2 选择器嵌套5.3 属性嵌套5.4 伪类嵌套5.5 避免选择器嵌套6 混合宏6.1 概述6.2 声明混合宏不带参数的混合宏带参数的混合宏复杂的混合宏6.3 调用混合宏6.4 传一个不带值的参数6.5

文章目录三、Sass的语法格式及编译调试1 Sass 语法格式1.1 概述1.2 Scss 语法格式1.3 代码示例2 Sass 编译2.1 概述2.2 命令编译概述单文件编译多文件编译缺点和解决方案watch 举例2.3 GUI 界面工具编译2.4 自动化编译概述Grunt 配置 Sass 编译的示例代码Gulp 配置 Sass 编译的示例代码2.5 常见的编译错误3 不同样式风格的输出方法3.1 概述3.2 嵌套输出方式 nested3.3 展开输出方式 expanded3.4 紧凑输出方式 compa

文章目录二、Sass 环境安装1 Sass安装（windows版）1.1 安装 Ruby第一步：下载 Ruby 安装包第二步：安装 Ruby1.2 安装 Sass第三步（选）：通过命令安装 Sass第四步（选）：通过 Compass 来安装 Sass第五步（选）：本地安装 Sass第六步（选）：淘宝 RubyGems 镜像安装 Sass2 查测 Sass 及更新2.1 查测 Sass2.2 更新 Sass3 卸载/删除 Sass二、Sass 环境安装1 Sass安装（windows版）1.1 安装 R

文章目录一、Sass简介1 什么是 CSS 预处理器1.1 定义1.2 其它 CSS 预处理语言1.3 我们为什么选择 Sass1.4 示例代码2 什么是 Sass2.1 官网描述2.2 Sass 前世今生2.3 为什么早期不如 LESS 普及2.4 示例代码3 Sass 和 SCSS 有什么区别3.1 概述3.2 Sass 语法示例3.3 Scss 语法示例3.4 编译出来的 CSS3.5 代码演示4 Sass/SCSS 和纯 CSS 写法差很多吗4.1 Sass 和 CSS 写法有差别4.2 Sass

【重学前端】001-开篇词文章目录【重学前端】001-开篇词一、重新理解前端1、前端发展现状2、当前前端工程师存在的问题3、怎么学前端4、四个模块JavaScriptCSS 和 HTML浏览器前端综合应用二、明确你的前端学习路线与方法1、前端现状2、学习路径与学习方法0基础入门有了1年工作经验后两个学习前端的方法三、列一份前端知识架构图1、JavaScript2、HTML 和 CSSHTML 部分CSS 部分3、浏览器的实现原理和 API4、前端工程实践一、重新理解前端1、前端发展现状随着移动时代的

JS 字典1、概述字典是一种以键-值对形式存储数据的数据结构，比如：名字-电话号码，通过名字就能找到对应的电话号码，名字就是键(key)，电话号就是值(value)；字典中的键，是值在字典中的索引；对于 js 来说，字典类（Dictionary）的基础是 Array 类， js 中的 Array 既是一个数组，同时也是一个字典。2、字典的创建和使用：方法一const dic = { 1: "dage", 2: "erge", 3: "sange",}/

文章目录axios一、axios1、安装CDN 方式npm 方式yarn 方式与 vue-axios 插件一起安装在 main.js 中使用2、基本使用配置封装 config-util.js请求封装 http-util.js返回数据封装 return-util.js测试 api使用演示axios一、axios1、安装CDN 方式<script src="https://unpkg.com/axios/dist/axios.min.js"></script>npm 方式

前言：本文大部分参考自阮一峰的Flex布局教程，部分进行了“易于理解”的描述；原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.html一、语法篇1、概述网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + f.

目录一、功能概述二、String.prototype.matchAll1、概述2、代码实现3、运行结果三、类的私有属性1、概述2、代码实现3、运行结果四、Promise.allSettled1、概述2、代码实现3、运行结果五、可选链操作符1、概述2、代码实现3、运行结果六、动态import导入1、概述2、代码实现hello.js：app.js：动态import加载.html：3、运行结果七、BigInt1

一、功能概述

目录一、Rest 参数与 spread 扩展运算符1、概述2、代码实现3、运行结果二、正则扩展：命名捕获分组1、概述2、代码实现3、运行结果三、正则扩展：反向断言1、概述2、代码实现3、运行结果​四、正则扩展：dotAll 模式1、概述2、代码实现3、运行结果一、Rest 参数与 spread 扩展运算符1、概述Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了

目录一、ES8功能概述二、async和await、对象方法扩展1、概述2、async 函数概述：代码实现：3、await 表达式概述：代码实现：4、async和await读取文件案例代码实现：运行结果：5、async 和 await 结合发送ajax请求代码实现：运行结果：6、对象方法扩展Object.values、Object.entries和Object.getOwnPropertyDescriptors：代码实现：运行结果：

目录一、功能概述二、Array.prototype.includes概述：代码实现：运行结果：三、指数操作符概述：代码实现：运行结果：一、功能概述1、Array.prototype.includes 判断数组中是否包含某元素，语法：arr.includes(元素值)； 2、指数操作符 幂运算的简化写法，例如：2的10次方：2**10； 二、Array.prototype.includes概述：Includes 方法用来检测数组中是.