Live Note

Remain optimistic

Posted on Edited on In
  1. 从 Reflect 对象上可以获得语言内部的方法
  2. 修改某些 Object 方法的返回结果，让其变得更合理。比如 Object.defineProperty 在无法定义属性时会抛出一个错误，而 Reflect.defineProperty 则会返回 false
  3. 让 Object 操作都变成函数行为。
  4. 只要是 Proxy 对象的方法，就能在 Reflect 对象上找到相应的方法，无论 Proxy 怎么修改默认行为，总可以在 Reflect 上获取默认行为

静态方法

  • Reflect.apply(target, thisArg, args)
    等同于 Function.prototype.apply.call(func, thisArg, args)，用于绑定 this 对象后执行给定函数。

  • Reflect.construct(target, args)
    等同于 new target(…args)，提供了一种不使用 new 来调用构造函数的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    function Greeting(name) {
      this.name = name
    }
    //new 的写法
    const instance = new Greeting("张三")

    //Reflect.construct 写法
    const instance = Reflect.construct(Greeting, ["张三"])
Read more »

Posted on Edited 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 »

Posted on Edited on In

基本用法

Set 类似于数组，但是成员的值都是唯一的，没有重复。Set 本身是一个构造函数。

1
2
3
4
5
6
7
8
9
10
11
const set = new Set()
;[1, 2, 3, 4].forEach((x) => set.add(x))
for (let value of set) {
  console.log(value) //1, 2, 3, 4
}

const set = new Set([1, 2, 3, 4])
;[...set] //[1, 2, 3, 4]

//数组除重
;[...new Set(array)]

在 Set 内部，NaN 是相等的，两个对象总是不相等的。

1
2
3
4
5
6
7
8
let set = new Set()
let a = NaN
let b = NaN
set.add(a).add(b)
set.size //1

set.add({}).add({})
set.size //3
Read more »

Posted on Edited on In

Custom Scroll Indicator for ScrollView

Demo.tsx
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { useMemo, useState } from "react"
import { ScrollView, View } from "react-native"

const Demo: React.FC = () => {
  const [contentSize, setContentSize] = useState(0)
  const [scrollViewSize, setScrollViewSize] = useState(0)
  const [scrollPosition, setScrollPosition] = useState(0)

  const indicatorWidth = useMemo(() => {
    if (contentSize > 0 && scrollViewSize > 0) {
      return (scrollViewSize / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollViewSize])

  const indicatorPosition = useMemo(() => {
    if (contentSize > 0 && scrollPosition > 0) {
      return (scrollPosition / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollPosition, scrollViewSize])

  return (
    <View>
      <ScrollView
        // disable default scroll indicator
        showsHorizontalScrollIndicator={false}
        onLayout={(event) => {
          setScrollViewSize(event.nativeEvent?.layout?.width ?? 0)
        }}
        onContentSizeChange={(w) => {
          setContentSize(w)
        }}
        horizontal // set horizontal scroll
        scrollEventThrottle={16} // throttle scroll event to improve performance
        onScroll={(event) => {
          // change scroll position here
          const { contentOffset } = event.nativeEvent

          const { x = 0 } = contentOffset
          const max = contentSize - scrollViewSize
          const min = 0

          if (x > max) {
            setScrollPosition(max)
          } else if (x < min) {
            setScrollPosition(min)
          } else {
            setScrollPosition(x)
          }
        }}
      >
        {/* Content here */}
      </ScrollView>

      {/* custom scroll indicator */}
      <View
        style={{
          bottom: 0,
          height: 4,
          width: indicatorWidth,
          position: "absolute",
          left: indicatorPosition,
          borderRadius: 4,
          backgroundColor: "#EEEEEE",
        }}
      />
    </View>
  )
}

export default Demo

Posted on Edited on In

Introduction

I’ve recorded an MP4 demo to showcase the results. In the video, you’ll see the Markdown content being displayed
character by character, with dynamic rendering and automatic scrolling.

Demo MP4

In this article, I’ll walk you through a simple yet powerful demo of implementing stream output in JavaScript. This
demo
mimics the behavior of ChatGPT-like applications, where responses are displayed in a streaming fashion, and the
content
is dynamically rendered as Markdown. The best part? It’s incredibly simple to implement, and I’ll provide the full
source code and an MP4 demo to showcase the results.

Read more »