koa router抽象实现业务代码解耦

Posted on 2020-09-08 | In 学习笔记

之前做内部项目，后台用koa搭建，router处理那里是由各个细分路由组合起来，在每个路由的回调里处理业务代码，将数据返回给前台。这几天看koa的书，里面讲到在koa里运用MVC将各个模块抽出来，实现代码解耦，记录一下。

原代码结构

优化列表数据显示卡顿

Posted on 2020-09-05 | In 性能优化

问题

环境

vue : 2.6.10
element-ui : 2.13.0
koa : 2.7.0

描述

列表数据大概300条左右，请求一次性请求所有数据，在操作之后到页面上显示表格数据大概有3秒卡顿，想到用chrome performance面板进行分析。
对performance运用比较陌生，看了两篇performance调试文章，链接贴出来
前端性能测试
 全新Chrome Devtool Performance使用指南

结果如下：
原网页性能分析

MongoDB记录_基本操作

Posted on 2020-08-20 | In 学习笔记

基础用法（增删改查）

新建数据库

1 2	// DATABASE_NAME 为数据库名称 use DATABASE_NAME

查看所有数据库
1
show dbs

Redux源码阅读_4

Posted on 2020-08-10 | In 源码阅读

applyMiddleware.ts

函数重载声明

首先是对applyMiddleware函数的重载，重载了七个函数，主要是传入参数个数的区别。

export default function applyMiddleware(): StoreEnhancer
export default function applyMiddleware<Ext1, S>(
  middleware1: Middleware<Ext1, S, any>
): StoreEnhancer<{ dispatch: Ext1 }>
export default function applyMiddleware<Ext1, Ext2, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>,
  middleware4: Middleware<Ext4, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, Ext5, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>,
  middleware4: Middleware<Ext4, S, any>,
  middleware5: Middleware<Ext5, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 & Ext5 }>
export default function applyMiddleware<Ext, S = any>(
  ...middlewares: Middleware<any, S, any>[]
): StoreEnhancer<{ dispatch: Ext }>

Redux源码阅读_3

Posted on 2020-08-08 | In 源码阅读

combineReducers.ts

函数重载声明

首先是对combineReducers函数的重载，重载了三个函数，主要区别是传参reducers类型的不同。

// 重载函数
export default function combineReducers<S>(
  reducers: ReducersMapObject<S, any>
): Reducer<CombinedState<S>>
export default function combineReducers<S, A extends Action = AnyAction>(
  reducers: ReducersMapObject<S, A>
): Reducer<CombinedState<S>, A>
export default function combineReducers<M extends ReducersMapObject>(
  reducers: M
): Reducer<
  CombinedState<StateFromReducersMapObject<M>>,
  ActionFromReducersMapObject<M>
>

函数结构

然后看看combineReducers函数的结构。
combineReducers函数结构

Redux源码阅读_2

Posted on 2020-08-08 | In 源码阅读

compose.ts

从右到左来组合多个函数，是reduce函数的一个应用实现。

首先仍然是重载了多个参数的函数声明，区别主要是传入参数个数。

export default function compose<F extends Function>(f: F): F

/* two functions */
export default function compose<A, T extends any[], R>(
  f1: (a: A) => R,
  f2: Func<T, A>
): Func<T, R>

/* three functions */
export default function compose<A, B, T extends any[], R>(
  f1: (b: B) => R,
  f2: (a: A) => B,
  f3: Func<T, A>
): Func<T, R>

/* four functions */
export default function compose<A, B, C, T extends any[], R>(
  f1: (c: C) => R,
  f2: (b: B) => C,
  f3: (a: A) => B,
  f4: Func<T, A>
): Func<T, R>

/* rest */
export default function compose<R>(
  f1: (a: any) => R,
  ...funcs: Function[]
): (...args: any[]) => R

export default function compose<R>(...funcs: Function[]): (...args: any[]) => R