跳至主要內容
番茄

标题 2

这里是内容。

标题 3

这里是内容。


h7ml蔬菜小于 1 分钟
页面配置

more 注释之前的内容被视为文章摘要。


Ms.Hope使用指南页面配置使用指南大约 2 分钟
深入了解 Chrome 的 PasswordCredential

在现代网络生态系统中,用户帐户和密码是用户身份验证的关键元素。为了提供更好的用户体验和安全性,浏览器提供了许多 API 以便开发者更好地管理用户凭据。其中,Chrome 提供了 PasswordCredential 对象,为用户的密码管理和自动填充提供了便利。

1. PasswordCredential 是什么?

PasswordCredential 是一个 Web Credential Management API 的一部分,它允许开发者在不牺牲安全性的前提下管理用户的密码。这个 API 可以通过以下方式创建:


h7mlWeb 开发安全性密码管理Chrome APIPasswordCredentialWeb Credential Management API用户密码自动填充用户体验大约 4 分钟
JavaScript 中的 Symbol 类型与其特性详解

ES6(ECMAScript 2015)引入了一种新的基本数据类型——Symbol。Symbol 类型的引入使得开发者能够创建一种独一无二的值,这在某些场景下非常有用。

1. Symbol 的基本概念

Symbol 是一种原始数据类型,它的值是唯一且不可变的。通过 Symbol() 函数创建一个新的 Symbol,每次调用都会返回一个不同的值。

const mySymbol = Symbol();
const anotherSymbol = Symbol();

console.log(mySymbol === anotherSymbol); // false

h7mljavascript前端开发SymboljavascriptSymbol大约 4 分钟
微前端架构:拆分前端应用的艺术
  1. 什么是微前端架构?他是如何形成的,以及有什么优缺点。
  2. 如何设计一个微前端架构的系统?
  3. 如何合理的拆分前端应用?
  4. 引入”微“害架构的概念,即不合理的实施微架构将对系统产生什么影响

1. 微前端

微前端是一种类似于徽服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用

各个前端应用还可以独立开发、独立部署。同时,它们也可以进行并行开发,这些组件可以通过 NPM、Git TagGit 或者 Submodule 来管理


h7mljavascript前端开发javascript微前端前端架构微前端设计前端应用拆分微前端模式大约 39 分钟
javascript文件上传

交互

点击上传多个文件 multiple

用户可以选择多个文件,然后文件列表会显示出来。需要注意的是,文件的选择是通过<input type="file" multiple>标签来实现的,其中multiple属性允许选择多个文件。

点击上传文件夹 odirectory

允许用户上传整个文件夹,而不仅仅是单个文件。使用<input type="file" webkitdirectory mozdirectory odirectory>标签来启用文件夹上传功能。在处理时,代码会检查文件是否为文件夹,然后递归读取文件夹中的文件列表。


h7mljavascriptjavascript大约 5 分钟
Redux初体验及高级使用

什么是 Redux

Redux 是一个用于 JavaScript 应用程序的状态管理库,它帮助我们有效地管理应用程序的状态,并使组件之间的数据传递更加简单和可控。Redux 使用单一的数据存储(store)来保存整个应用程序的状态,并通过 Reducers 和 Actions 来处理状态的变化。

Redux 的核心概念

Redux 的单一数据流是指整个应用程序中的数据状态(state)存储在一个单一的 JavaScript 对象中,通常称为"Store"。这个 Store 是唯一的,并且整个应用程序共享它。所有的数据改变都通过派发(dispatch)"Action"来完成,Action 是一个包含描述改变的信息的简单对象。然后,这些 Action 会被传递给 Reducer 函数,Reducer 会根据 Action 的类型来更新 Store 中的数据状态。组件可以订阅(subscribe)Store 的状态变化,以便在状态改变时重新渲染自己。


h7mlReduxreactReduxreact大约 8 分钟
控制反转(IOC)与依赖注入(DI)

控制反转(IOC)和依赖注入(DI)是面向对象编程中的重要设计原则,用于降低代码间的耦合度,并提高可维护性和可测试性。本文将介绍 IOC 和 DI 的概念、解决的问题、实现思路以及在 Nest 框架中的具体实现。

什么是 IOC

IOC(Inversion of Control,控制反转)是一种设计原则,通过将对象的创建和管理交给一个容器来实现。在非 IOC 模式下,对象之间的依赖关系由调用者来控制和管理。而在 IOC 模式下,对象的创建和依赖关系的管理都由容器来完成,从而实现了对象之间的解耦。

要解决的问题

在非 IOC 模式下,如果一个类 B 需要使用类 A 的实例,通常会在 B 中创建 A 的实例对象。而如果类 C 又依赖于类 B,这种控制权的嵌套会持续下去,导致依赖关系变得复杂。例如,在一个典型的三层架构中,Controller 依赖于 Service 来实现业务逻辑,Service 依赖于 Repository 来进行数据库操作,Repository 又依赖于 DataSource 来建立数据库连接,而 DataSource 需要从 Config 对象中获取用户名密码等信息。


h7mlIOCDInestjsDIIOCnestjs大约 4 分钟
PostgreSQL的语法知识和常见查询操作

PostgreSQL 的语法知识和常见查询操作

1. 数据定义语句(DDL)

1.1. 登录数据库

psql -U username -d database_name

1.2. 创建数据库


h7mlPostgreSQLeventsourcePostgreSQLeventsource大约 5 分钟
探索数据可视化:前端工程师的视角

概述

说到可视化,大家可能会想到表格、饼图、柱状图、三维大屏图、建筑图等等,或者会想到 excel、matlab、echarts 等工具,但可视化真的仅限于此吗?本章将从前端工程师的角度,结合《数据可视化》,对可视化的基础、架构以及选型做一次探讨。

数据可视化简介

可视化的定义

  • 动词:生成符合人类感知的图像。
  • 名词:使某物、某事可见的动作或事实。

可视化的作用

  • 发现、决策、解释、分析、探索和学习。
  • 通过可视化提高人们完成某些任务的效率。

h7ml数据可视化前端开发可视化工具数据科学DIKW模型前端工程可视化方法技术选型渲染流程WebGLSVG大约 7 分钟
读懂React的Transition实现原理

Transition 是 react18 引入的新概念,用来区分紧急和非紧急的更新。

  • 紧急的更新,指的是一些直接的用户交互,如输入、点击等;
  • 非紧急的更新,指的是 UI 界面从一个样子过渡到另一个样子;

react 官方的 demo 如下:

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

h7mljavascriptreactreact大约 14 分钟
使用 react-query 让状态管理更加高效优雅

什么是 react-query

React Query 是一个基于 React 的轻量级数据获取和状态管理库,其主要关注点在于客户端如何更好地管理服务器端状态。与传统的状态管理库(如 Redux 和 MobX)相比,它专注于处理服务器状态,简化了与后端数据交互的逻辑。

React Query 通过提供 useQuery、useMutation 等 hooks,使得开发者能够轻松地获取、更新、删除服务器端数据。此外,它还内置了数据缓存、自动更新、重试等功能,进一步优化了客户端与服务器端状态同步的体验。

因此,React Query 的核心价值在于帮助开发者更优雅地管理客户端与服务器端状态的交互,提升前端开发效率。


h7mlreactreact queryReact状态管理React Query大约 10 分钟
使用 Node.js 连接多种类型数据库

关系对比

数据库 驱动/模块 连接方式 优缺点
MariaDB mariadb 使用 mariadb.createConnection() 创建连接,或者使用 mariadb.createPool() 创建连接池 MariaDB 是 MySQL 的一个分支,与 MySQL 兼容。驱动程序相对较新,但已受到广泛认可和广泛使用。
MongoDB mongodb 使用 mongodb.MongoClient.connect() 创建连接 MongoDB 是一个面向文档的 NoSQL 数据库,具有可伸缩性、灵活性和高速读写等特点。MongoDB Node.js 驱动程序是官方支持的,并且易于使用。
PostgreSQL pg 使用 new pg.Client() 创建连接 PostgreSQL 是一个功能强大的关系型数据库,具有高度的稳定性和可靠性。pg 驱动程序是 Node.js 中最流行的 PostgreSQL 驱动程序之一。
Oracle oracledb 使用 oracledb.getConnection() 创建连接 Oracle 是一个功能强大的关系型数据库,主要用于企业级应用程序。oracledb 驱动程序是官方支持的,并且具有很好的性能和可靠性。
Microsoft SQL Server mssql 使用 new mssql.ConnectionPool() 创建连接池 Microsoft SQL Server 是一个功能强大的关系型数据库,主要用于企业级应用程序。mssql 驱动程序是 Node.js 中最流行的 Microsoft SQL Server 驱动程序之一。
Redis ioredis 使用 new Redis() 创建连接 Redis 是一个内存数据结构存储系统,适用于需要快速读写和高并发的应用程序。ioredis 是一个支持 Redis 集群和复制功能的 Redis 驱动程序。
SQLite better-sqlite3 使用 better-sqlite3() 创建连接 SQLite 是一个非常轻量级的嵌入式数据库,适用于小型项目。better-sqlite3 是官方 SQLite3 驱动程序的代替品,速度更快且易于使用。
Couchbase couchbase 使用 new couchbase.Cluster() 创建连接 Couchbase 是一个面向文档的 NoSQL 数据库,适用于需要快速读写和高并发的应用程序。couchbase 驱动程序是官方支持的,并且具有很好的性能和可靠性。
Cassandra cassandra-driver 使用 new cassandra.Client() 创建连接 Cassandra 是一个分布式的 NoSQL 数据库,适用于大规模数据存储和处理。cassandra-driver 是官方支持的驱动程序,并具有很好的性能和可靠性。
Neo4j neo4j-driver 使用 neo4j.driver() 创建连接 Neo4j 是一个图形数据库,适用于需要处理高度连接数据的应用程序。neo4j-driver 是官方支持的 Node.js 驱动程序,并且易于使用。
ArangoDB arangojs 使用 new arangojs.Database() 创建连接 ArangoDB 是一个多模型数据库(支持文档、图形和键值数据),适用于需要存储多种类型数据的应用程序。ArangoJS 是一个用于 Node.js 的 ArangoDB 驱动程序。
RethinkDB rethinkdbdash 使用 rethinkdbdash() 创建连接 RethinkDB 是一个面向文档的 NoSQL 数据库,具有实时更新和可伸缩性等功能。它可以使用 RethinkDB 驱动程序或 rethinkdbdash。

h7mlNode.jsMySQLMongoDBPostgreSQL数据库连接Node.js大约 13 分钟
深度解析 URL Scheme

当我们使用移动应用时,我们通常会通过点击链接或按钮来跳转到其他页面或应用。在 iOSAndroid 系统中,这些链接或按钮是通过 URL Scheme 实现的。

URL Scheme 是一种在移动设备上通过链接或按钮调用应用程序的机制。它允许开发者在应用程序内部注册特殊的 URL,当用户点击带有该 URL 的链接或按钮时,系统会自动打开相应的应用程序,并执行相应的操作。

从前端角度来看,当我们在网页中包含了带有 URL Scheme 的链接或按钮时,我们可以使用以下代码来触发它们:


h7mljavascriptURL SchemejavascriptURL Scheme大约 11 分钟
布局与功能禁用

你可以通过设置页面的 Frontmatter,在页面禁用功能与布局。


h7ml使用指南禁用小于 1 分钟
Markdown 展示

VuePress 主要从 Markdown 文件生成页面。因此,你可以使用它轻松生成文档或博客站点。

你应该创建和编写 Markdown 文件,以便 VuePress 可以根据文件结构将它们转换为不同的页面。


h7ml使用指南Markdown大约 3 分钟