重点
implements 约束class类的
readonly 只能给属性用,只能读取
private 只能在内部使用
protected 给子类和内部去使用
public 哪里都能使用
super
父类的 prototype.constructor.call
static
可以给方法也可以给属性是一个静态方法 他的this指向的是 static
// 1.class 的基本用法 继承 和 类型约束 implements
// 2.class 的修饰符 readonly private public protected
// 3. super 原理
// 4.静态方法 static
// 5. get set
// 重点
// implements 约束class类的
// readonly 只能给属性用,只能读取
// private 只能在内部使用
// protected 给子类和内部去使用
// public 哪里都能使用
// super
// 父类的 prototype.constructor.call
// static
// 可以给方法也可以给属性是一个静态方法
// 他的this指向的是 static
interface Options {
el: string | HTMLElement
}
interface VueClas {
options: Options
init(): void
}
interface Vnode {
tag: string // div section header
text?: string//123
children?: VNode[]
}
class Dom {
// 创建节点的方法
private createElement(el: string) {
return document.createElement(el)
}
// 填充文本的方法
private setText(el: HTMLElement, text: string | null) {
el.textContent = text
}
// 渲染函数
protected 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 VueClas {
readonly options: Options
constructor(options: Options) {
super()
this.options = options
this.init()
}
static xx() {
}
static version() {
return '1.0.0'
}
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"
})
// set get
class Ref {
_value: any
constructor(value: any) {
this._value = value
}
// 这个地方的value和上面的value的不能重复
get value() {
return this._value + 'hm'
}
set value(newValue) {
this._value = newValue + '鹤鸣'
}
}
const ref = new Ref('鹤鸣')
console.log(ref.value) // 输出结果 鹤鸣hm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./index9.js"></script>
</body>
</html>