代码雨

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <body>
    <canvas id="canvas"></canvas>

    <script src="./index.js"></script>
  </body>
</html>

let canvas: HTMLCanvasElement = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
canvas.width = screen.availWidth
canvas.height = screen.availHeight

let str: string[] = "HHXXTTX010101S".split('')
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0)
console.log(Arr);

const rain = () => {
  ctx.fillStyle = 'rgba(0,0,0,0.05)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#0f0'
  Arr.forEach((item, index) => {
    ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
    Arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10
  })
}

setInterval(rain, 40)

类和接口实现简单VNode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <body>
    <!-- <canvas id="canvas"></canvas> -->
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

interface Options {
  el: string | HTMLElement
}

interface VueCls {
  options: Options
  init(): void
} 

interface VNode {
  tag: string
  text? : string
  children? : VNode[]
}

class Dom {
  createElement(el:string) {
    return document.createElement(el)
  }

  setText(el:HTMLElement, text:string| null) {
    el.textContent = text
  }

  render(data: VNode) {
    let root = this.createElement(data.tag)
    if(data.children && Array.isArray(data.children)) {
      data.children.forEach(item => {
        let child = this.render(item)
        root.appendChild(child)
      })
    } else {
      this.setText(root, data.text)
    }

    return root
  }
}

class Vue extends Dom implements VueCls {
  options: Options
  constructor(options: Options) {
    super()
    this.options = options
    this.init()
  }

  init(): void {
    let data: VNode = {
      tag: "div",
      children: [
        {
          tag: "section",
          text: "我是子节点1",
        },
        {
          tag: "section",
          text: "我是子节点2",
        },
        {
          tag: "section",
          text: "我是子节点3",
        }
      ]
    }
    let app = typeof this.options.el == "string" ? document.querySelector(this.options.el) : this.options.el
    app.appendChild(this.render(data))
    
  }
}




new Vue({
  el: "#app"
})

Ref类的简单实现

class Ref {
  _value: any
  constructor(val: any) {
    this._value = val
  }

  get value() {
    return this._value + "xxx"
  }

  set value(newVal) {
    this._value = newVal + "小满"
  }
}

const ref = new Ref("哈哈哈")
console.log(ref.value);

页面请求文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
  <body>
    <!-- <canvas id="canvas"></canvas> -->
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>


const axios = {
  get<T>(url:string): Promise<T> {
    return new Promise((resolve, reject) => {
      let xhr:XMLHttpRequest = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200) {
          resolve(JSON.parse(xhr.responseText))
        }
      } 
      xhr.send(null)
    })
  }
}

interface Data {
  message: string
  code: number
}

axios.get<Data>('./data.json').then(res => {
  console.log(res);
})

部分源码思想

代码雨

类和接口实现简单VNode

Ref类的简单实现

页面请求文件