浅谈 DI(依赖注入)

文章参考:https://zhuanlan.zhihu.com/p/311184005
项目参考:darukjs InversifyJS

依赖注入是 IoC(控制反转) 的一种实现方式,通过依赖注入可以动态的将某种依赖关系注入到对象中,而不用手动一个个实例化。
在依赖注入中,将实例化对象这个步骤交给外部(IoC 容器),即为控制反转。

如何设置 Node 的 header size

Header size 是什么

每当任何客户端向服务器发送请求时,它也会发送一些头信息,所有服务器都对头缓冲区有一些预定义的限制。如果头缓冲区大小超过预定义的限制服务器,它将拒绝客户端请求,NodeJS 从 v6.15.0、v8.14.0、v10.14.0、v11.3.0 版本显著减小了(从80KB到8KB)头缓冲区的大小。

Git rebase 基础用法

git rebase 被翻译为变基,该命令的作用就是整理提交历史,效果是使得提交历史变成连续的,没有分叉。在团队开发时,经常需要进行合并,我们知道,一般使用 git pullgit merge 合并远程代码,合并时会优先使用快速合并,若不能快速合并则会采取三方合并,会添加一个 commit,commit 记录了被合并的两个 parent。

其实合并的方式不止默认的这两种方式,rebase/squash 等合并方式更是可以带来干净整洁的提交历史。

Git内部存储原理

转载源:Git内部存储原理

目录

Git是程序员工作中使用频率非常高的工具,要提高日常的工作效率,就需要熟练掌握Git的使用方法。相对于传统的版本控制系统而言,Git更为强大和灵活,其各种命令和命令参数也非常多,如果不了解Git的内部原理,要把Git使用得顺手的话非常困难。本文将用一个具体的例子来帮助理解Git的内部存储原理,加深对Git的理解,从掌握各种Git命令,以在使用Git进行工作时得心应手。

微前端

技术圈是比较爱炒概念的,中台、微服务、DDD一时都变成比较热门的话题,微前端作为微服务的一种自然也免不了俗。在我看来,大多数情况下大多数公司都用不上微前端。当然微前端不是什么新技术,只是为了解决实际问题的一种方法。微前端这三个字听起来不明所以,实际上只是将项目打散,变成若干小项目的合集,使用一种方案使得在多个项目之前平滑切换的方法。

CSS 粘性定位 position: sticky

顾名思义,sticky 就是将某元素粘在某个位置的意思。这里不用固定而用”粘“是因为要”粘“住一个东西必须先与这个东西要有接触才能说得上粘住。

”粘“针对两个物体,被粘物与粘结物。这里的被粘物指我们的元素,粘结物是滚动容器的边界(上下左右)。通常我们实现这个效果都会使用 JS 来监听滚动并计算滚动位置来实现。现在你可以通过 CSS 来实现,通过查看 caniuse 可知,兼容性不是太好,不过可以使用 polyfill

扩展巴科斯范式

扩展巴科斯-瑙尔范式(EBNF, Extended Backus–Naur Form)是表达作为描述计算机编程语言和形式语言的正规方式的上下文无关文法的元语法(metalanguage)符号表示法 —— wikipedia。

白话就是定义的一种用来表示一种语言的语法形式的一种表示方法。

Mobx-react

Mobx 是一种状态管理方案。不同于 redux 将状态定义为不可变状态,mobx 会自动收集依赖,以可变状态的方式直接修改原始状态,这点与 Vue 的状态管理很像。

在 es6 环境下,可以直接使用装饰器定义状态及方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { observable } from "mobx";

class CounterStore {
@observable count = 0;

@action
increase() {
this.count++;
}

@action
decrease() {
this.count--;
}
}

export default new CounterStore();

Vue-nextTick

在 Vue 中 nextTick 实际上是一个 microTask(在 2.5 中曾被替换为 macroTask 实现,2.6 中又恢复为 microTask),源码位于 src/core/util/next-tick.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}

Vue-computed

computed 与 data 类似,在 init 阶段的 initState 中初始化的:

1
2
3
4
5
6
7
// 遍历 computed,,为子项创建 watcher
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)

如果 key 不是 vm 的属性则会调用:

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×