跳至主要內容
深入了解 Chrome 的 PasswordCredential

深入了解 Chrome 的 PasswordCredential

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

1. PasswordCredential 是什么?

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


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

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

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

什么是可视化?《数据可视化 第 2 版》第一章读书笔记

概述

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

数据可视化简介

可视化的定义

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

可视化的作用


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

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

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


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

使用 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

深度解析 URL Scheme

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

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


h7mljavascriptURL SchemejavascriptURL Scheme大约 11 分钟
前端面试题-手写

1.统计字符串中字符出现的次数

统计字符串中字符出现的次数
/**
 * @description 统计字符串中字符出现的次数
 * @param str
 * @returns {{}}
 */
function computeString(str) {
  const obj = {};
  for (let i = 0; i < str.length; i++) {
    const key = str[i];
    if (obj[key]) {
      obj[key]++;
    } else {
      obj[key] = 1;
    }
  }
  return obj;
}
computeString('12121111');

h7ml小于 1 分钟
JavaScript ES6 Array 数组新增方法

JavaScript ES6 Array 数组新增方法

Array.of()

将参数中所有值作为元素形成数组。

没有参数则返回空数组

Array.of(1, '2', true); // [1, '2', true]

h7ml大约 2 分钟
JavaScript ES6 Function 箭头函数

JavaScript ES6 Function 箭头函数

传参

// 默认参数
// 使用默认参数时,不能有同名形参
function fn(name, age = 17) {
  console.log(name + ',' + age);
}

function f(...values) {
  // [1, 2]
  console.log(values.length); // 2
}
f(1, 2); // 2

h7ml大约 1 分钟
JavaScript ES6 Generator 函数

JavaScript ES6 Generator 函数

  • 执行机制
  1. function 后加 *,函数执行后返回 Iterator 对象
  2. 返回的对象调用 next 方法开始执行,遇到 yield 关键字会停止。
  3. 再次调用 next 方法会从上一次的结束的地方继续执行,直到 yield
  4. yield 后面的值会在 next 执行停止时返回
  5. next 传的参数会在函数内传给 yield
function* fnc() {
  console.log('开始');
  let a = yield '返回给next'; // next 没有传参 a 默认 undefined
  console.log(a, '结束'); // next传入 '结束'
  return '2';
}
let f = fnc();
f.next('next传入'); // {value: "返回给 next", done: false}
f.next(); // {value: undefined, done: true}

h7ml小于 1 分钟
JavaScript ES6 Iterator 迭代器

JavaScript ES6 Iterator 迭代器

核心概念:

  1. 迭代器是一个统一的接口,作用是使各种数据结构可被便捷的访问
  2. 是 Symbol.iterator 下的方法实现。提供这种接口的有 Array、String、arguments、Map、Set、Dom 元素(正在进行中)。可以被 for...of 遍历
  3. Array 下有 Symbol 属性,所以arr[Symbol.iterator]()调用,返回 Iterator 对象
  4. iterator 对象下 next 方法单次调用方法{value: '本次遍历的值', done: 是否遍历结束,返回 true/false }

h7ml小于 1 分钟
JavaScript ES6 Map 对象

JavaScript ES6 Map 对象

  • 方法

set()、get()、delete()、has()、clear()、size

set,get 键值对

key 是字符串

var myMap = new Map();
myMap.set('键', '和键关联的值'); // 设置 键值对
myMap.get('键'); // "和键关联的值" 获取值

h7ml大约 2 分钟
JavaScript ES6 Object 对象

JavaScript ES6 Object 对象

简写

对象简写

const age = 12;
const name = 'Amy';
const person = { age, name }; // {age: 12, name: "Amy"}
// 等同于 person = {age: age, name: name}

h7ml大约 2 分钟
2
3
4
5
...
24