ts

Class

下面是一个简易的vue用class写的

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
interface Options {
    el: string | HTMLElement
}

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

interface Vnode{
    tag:string
    text?:string
    children?.Vnode[]
}
// 虚拟dom
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.chlidren && 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;
    }
    init():void{
        let data:Vnode ={
            tag:"div",
            children:[
                {
                    tag:"section",
                    text:"子节点一"
                },
                {
                    tag:"section",
                    text:"子节点二"
                }
            ]
        }

        let app = typeof this.options.el == 'string' ?  document.querySelector(this.options.el) : this.option.el;

        app.appendChild(this.render(data));
       
    }
}

抽象类

抽象类是面向对象编程中的一个重要概念，主要用于定义一组接口和共享的行为，同时不提供具体实现。以下是关于抽象类的一些要点和示例：

  1. 定义
    抽象类: 不能被实例化的类，通常包含一个或多个抽象方法（没有具体实现）。
    目的: 强制子类实现某些方法，并提供基本的共享功能。
  2. 特性
    可以包含具体方法（有实现）和抽象方法（无实现）。
    子类必须实现所有的抽象方法，除非子类也是抽象类。