Live Note

Remain optimistic

Posted on In

Example

假設現在有一個數據非常多的數組,但是我們只需要它的前幾個數據,并且進行一定的操作,這時候可以使用 generator 來進行 take 的操作.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const from = (arr) => arr[Symbol.iterator]()

const filter = (f) =>
  function* (iter) {
    let v = iter.next()
    while (!v.done) {
      if (f(v.value)) yield v.value
      v = iter.next()
    }
  }

const multipy = (n) =>
  function* (iter) {
    let v = iter.next()
    while (!v.done) {
      yield v.value * n
      v = iter.next()
    }
  }

const take = (n) =>
  function* (iter) {
    let i = 0
    let v = iter.next()
    while (!v.done && i < n) {
      yield v.value
      i++
      v = iter.next()
    }
  }

const pipe = (...arr) => arr.reduce((acc, func) => func(acc))

console.log([
  ...pipe(
    from(arr),
    filter((v) => v % 2 === 0),
    multipy(3),
    take(30),
    filter((v) => v > 15)
  ),
]) // [18, 24, 30, 36]

Posted on In

Reducer

Reducer 將多個 input fold 成一個 output.

1
2
3
4
const add = (a, b) => a + b
const multiply = (a, b) => a * b
const concatString = (a, b) => a + b
const concatArray = (a, b) => [...a, ...b]

Transducer

Transducer 做的事情大致相同,但是與普通的 reducer 不同的是,它可以通過多個 function 組合而成.而普通的 reducer 不能組合,因爲他們接受兩個參數,但是只返回一個值,所以不能將這次的結果傳入下一個 reducer:

1
2
3
4
5
6
7
// reducer
f: (a, c) => a
g: (a, c) => a

// transducer
f: (reducer) => reducer
g: (reducer) => reducer
Read more »

Posted on

閑著無聊看了看如何部署

公司内部有 k8s 集群,所以也需要學習如何寫 deploy 脚本.目前服務挂在 Travis CI 上,後續可能會使用自己的機器裝個 Github Runner 啥的…

步驟大致為:

  1. 在 Travis 中登錄,然後選擇需要 watch 的倉庫
  2. 編寫 deploy 文件,需要内部暴露字段的可以在 setting 中添加
  3. 在 github 中拿到 person access token,添加到 Travis

因爲 blog 還不需要 build 和 test 的步驟,所以我的 deploy file 暫時還沒有這些:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
language: node_js
node_js:
  - 10 # hexo目前似乎還不支持node 14版本

branches:
  only:
    - master # 需要監聽的branch

before_install:
  - npm install -g hexo-cli

install:
  - npm install
  - npm install hexo-deployer-git

before_script:
  - git config user.name "${username}"
  - git config user.email "${email}"
  - rm -rf themes/next
  - git clone https://github.com/theme-next/hexo-theme-next themes/next
  - cp assets/config/_config.yml themes/next/_config.yml # 我將自己的theme config存在assets中
  - cp assets/images/avatar.jpg themes/next/source/images/avatar.jpg
  - sed -i "s/github_token/${GITHUB_TOKEN}/g" _config.yml

script:
  - hexo clean
  - hexo generate
  - echo "Generation finished."
  - hexo deploy

notifications:
  email:
    - foo@example.com
  on_success: change
  on_failure: always

October Plan

  • React Hook: 首要完成的目標
  • shell: 不知道能學到什麽程度
  • Linux 命令: 不知道能學到什麽程度
  • 優化之前的 code: 算是屎山了
Read more »

Posted on

買了個阿里雲服務

有點太貴了。隨便跑點什麽 Memory 就 100%。

時常掉綫，不知道是不是網絡的問題。拿到公司 Network 環境一樣掉綫。

想搭個 Gatsby 玩玩，還是用自己的電腦吧。

Posted on

工作以來的感受

最大的感受就是，需要學習的還有很多很多。獨立思考可以讓你的思維更加開放、活躍，同時可以激發更多的靈感。
目前的技術棧：React+Mobx+TypeScirpt

從前對狀態管理沒有什麽概念，自從接觸到工程項目之後，對爲何要進行 State Management 越來越清晰。
當然也產生了一定的不良影響 -> 只要上手就會想如何設計 State，導致有的地方代碼實在冗餘。

同時在項目代碼中瞭解了許多新知識，如何去設計一個可繼承、可復用的 Function；如何將 Store 封裝，便於使用；如何對請求進行封裝；何時使用 Interface、何時使用 Type；等等……

接下來需要做的

  • 思考之前的代碼如何優化
  • 思考目前的代碼是否還能拆分
  • 閲讀 State Management 的文章
  • ……

課餘時間的活動

  • 書籍

    • 熵的世界
    • 我的簡史 - 霍金

  • 日常

    • 陰陽師
    • B 站
    • 手游 - 跑跑卡丁車
    • 音樂

  • 綜藝

    • 説唱新世代
    • 中國新説唱

  • 影視劇

    • 甜蜜蜜
    • 投名狀
    • 親愛的
    • 八佰
    • Mulan
    • 信條

挖坑

考慮用點什麽搭一個自己的博客。

Posted on In

使用 HOC 进行代码复用

假设存在下面两个组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react"

class ButtonCounter extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
    }
  }

  increase = () => {
    let { step } = this.props

    this.setState((pre) => {
      return {
        count: pre.count + step,
      }
    })
  }

  render() {
    let { count } = this.state

    return <button onClick={this.increase}>click {count} times</button>
  }
}

export default ButtonCounter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react"

class ButtonCounter extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
    }
  }

  increase = () => {
    let { step } = this.props

    this.setState((pre) => {
      return {
        count: pre.count + step,
      }
    })
  }

  render() {
    let { count } = this.state

    return <div onMouseLeave={this.increase}>click {count} times</div>
  }
}

export default ButtonCounter

使用 HOC 进行改造

HOC 通过传入的组件，返回一个新的组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react"

const withCounter = (OriginalComponent) => {
  class newComponent extends React.Component {
    render() {
      return <OriginalComponent />
    }
  }

  return newComponent
}

export default withCounter
Read more »

Posted on In

防抖

浏览器中有的事件触发非常频繁，如果在事件触发的时候就调用，这时就会不断地产生新的调用，导致变‘卡’。
防抖就是在某段时间间隔内，不调用函数，直到一段时间后不在再新的事件触发，再调用函数；或者是先调用函数，在一段时间间隔内继续触发不再重复调用函数。

Read more »

Posted on In

Factory

缺点：对象无法区分，所有的实例指向一个原型

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name) {
  let o = new Object()
  o.name = name
  o.getName = function () {
    return this.name
  }

  return o
}

let person = new Person("Edward")
console.log(person instanceof Person) // false
console.log(person instanceof Object) // true
Read more »

Posted on In

JavaScript 采用的是词法作用域（lexical scoping）

JavaScript 函数的作用域在函数定义的时候就确定了，所以实际使用的值与函数定义位置有关系。

1
2
3
4
5
6
7
8
9
10
11
12
let value = 1

function foo() {
  console.log(value)
}

function bar() {
  let value = 2
  foo()
}

bar() // 1

上面这个例子中，foo函数中的value向上寻找为在全局定义的1，所以会打印出1。

1
2
3
4
5
6
7
8
9
10
11
value=1

function foo(){
  echo $value
}

function bar() {
    local value=2
    foo
}
bar #2

而在bash中，由于是动态作用域，所以会打印出2。

Read more »

Posted on In

先行断言

  • lookahead assertion：x在y之前才匹配，格式为/x(?=y)/
  • negative lookahead assertion：只有x不在y之前才匹配，格式为/x(?!y)/
1
2
3
4
let str = 'now is 02:11:44'

/\d+(?=:)/.exec(str) // ['02']
/\d+(?!\.)/.exec(str) // ['0']
Read more »