跳至主要內容
前端物语

前端物语

每一个不曾起舞的日子,都是对生命的辜负!

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 分钟
使用 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 分钟
JavaScript ES6 Promise

JavaScript ES6 Promise

Promise 状态

Promise 状态

  • pending(进行中) ----> fulfilled/resolved(成功)
  • pending(进行中) ----> rejected(失败)

只要处于 fulfilled/resolved [成功] 和 rejected [失败],状态就不会再变。

  1. 创建 Promise 参数内的函数会立即执行,并返回 Promise 对象
  2. 两个参数代表状态,resolve 成功调用,reject 失败调用

h7ml大约 1 分钟
JavaScript ES6 Proxy

JavaScript ES6 Proxy

  • target:即目标对象
  • handler:是一个对象,代理 target 的指定行为
let proxy = new Proxy(target, handler);
let target = {
  name: 'Tom',
  age: 24,
};

let handler = {
  get: function (target, key) {
    // 获取target的值会触发次函数
    console.log('getting ' + key);
    return target[key]; // 不是target.key
  },
  set: function (target, key, value) {
    // 设置target的值会触发次函数
    console.log('setting ' + key);
    target[key] = value;
  },
};

h7ml小于 1 分钟
JavaScript ES6 Set 对象

JavaScript ES6 Set 对象

  • 原型方法
    • add()、delete()、has()、clear()、 size
  • Set 对象允许存储任何类型的唯一值,原始值或引用值都可。
  • 特殊值
    • +0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复。
    • undefined 与 undefined 是恒等的,所以不重复。
    • NaN 与 NaN 是不恒等的,但是在 Set 中只能存一个,不重复。

h7ml大约 1 分钟
JavaScript ES6 Symbol 对象

JavaScript ES6 Symbol 对象

符号本身是原始类型,所以 typeof 操作符对符号返回 symbol。

let sym = Symbol();
console.log(typeof sym); // symbol

h7ml大约 10 分钟
JavaScript ES6 let、cont、解构

JavaScript ES6 let、cont、解构

let 和 const

  1. 遇到 {} 就形成作用域
  2. 同一作用域不能重复声明变量或函数 [如:let 声明过不能用 const 和 var 声明相同名字]
  3. 没有变量提升
  4. const 必须初始化赋值,不能被修改,而 let 声明的变量不用
  5. const 定义的对象或者数组,其实是可变的。
  • 可以修改添加属性
const car = { color: 'white' };
car.color = 'red'; // 修改属性:
car.owner = 'Johnson'; // 添加属性

h7ml大约 2 分钟
JavaScript ES6 async 函数

JavaScript ES6 async 函数

  1. async 函数返回 Promise 对象,用同步流程来表达异步操作
  2. 虽然返回的是 Promise 对象,但不能在 async 函数中调用 resolve,reject 函数
  3. async 可以单独使用,await 只能在 async 函数中使用
  4. 调用 async 函数会立即执行,遇到 await 关键字会暂停执行,await 后的指向完成后,async 函数接着执行。
  5. 如果 await 后的异步需要时间,await 下一行会接着执行,导致 await 的结果比下一行代码后得到
  6. 解决异步需要时间的问题,await 等待的是 Promise 的结果。所以 await 后面配合 Promise 执行异步函数,但 await 不能处理 Promise 失败后的结果
  7. 解决失败结果方法一:await prm().catch(e => {}); 阅读不方便
  8. 解决方法二 : 在 prm() 结果中不管成功还是失败,都调用 resolve 方法,成功传[null,数据],失败传 [err]; await 执行后 [e,d]=await prm(); 结构判断 e 是否出错

h7ml大约 1 分钟
2
3
4
5
...
23