9、Class类

皇子_2344

已于 2023-06-05 11:29:09 修改

阅读量24

点赞数

分类专栏： TS 文章标签： typescript

于 2023-03-31 17:21:58 首次发布

本文链接：https://blog.csdn.net/hz_2344/article/details/129880502

版权

TS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、类的用法

//使用interface 对一些方法进行约束
interface Options {
  el: string | HTMLElement
}
interface VueCls {
  options: Options,
  init(): void
}

// 使用implenments 对类进行约束
class Vue implements VueCls {
  options: Options
  // 默认的constructor构造函数：里面可以对默认参数、默认方法进行初始化
  constructor(options: Options) {
    this.options = options
  }
  init(): void {

  }
}

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

2、继承

index.ts

// 实现一个虚拟Dom
interface Options {
  el: string | HTMLElement
}
interface VueCls {
  options: Options,
  init(): void
}
interface Vnode {
  tag: string, // 标签 div，span...
  text?: string, // 标签中的内容
  children?: Vnode[], // 是Vnode类型的数组，子节点不是必须的
}
// 虚拟Dom
class Dom {
  // 创建真实节点
  createElement(el: string) {
    return document.createElement(el)
  }
  // 填充文本
  setText(el: HTMLElement, text: string | null) {
    el.textContent = text
  }
  // 渲染Dom(把js描述的虚拟dom渲染为真实的dom)
  render(data: Vnode) {
    let root = this.createElement(data.tag) // 创建根节点
    // 判断是否有子节点
    if (data.children && Array.isArray(data.children)) {
      // 遍历
      data.children.forEach(i => {
        // 不确定层级，所以进行递归
        let child = this.render(i)
        root.appendChild(child)
      })
    } else {
      // 填充内容
      this.setText(root, data.text)
    }
    return root
  }
}

// 如何在子类中调用方法呢（render）->使用继承
// 继承用法：extends+ 父类名称 写在类名(子类)和implements中间
class Vue extends Dom implements VueCls {
  options: Options
  // 默认的constructor构造函数：里面可以对默认参数、默认方法进行初始化
  constructor(options: Options) {
    super() // 初始化父类（规范：必须写在第一行）
    this.options = options
    this.init() // 初始化init()
  }
  init(): void {
    // 虚拟dom就是通过js去渲染真实dom
    let data: Vnode = {
      tag: "div", // 根节点
      children: [{
        tag: 'p',
        text: '儿子1',
      },
      {
        tag: 'p',
        text: '儿子2',
      },
      {
        tag: 'p',
        text: '儿子3',
      }]
    }
    let app = typeof this.options.el === 'string' ? document.querySelector(this.options.el) : this.options.el
    app.appendChild(this.render(data))  // 调用render
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

页面：

3、修饰符

readonly、private、public、protected

interface Options {
  el: string | HTMLElement
}
interface VueCls {
  options: Options,
  init(): void
}
interface Vnode {
  tag: string, // 标签 div，span...
  text?: string, // 标签中的内容
  children?: Vnode[], // 是Vnode类型的数组，子节点不是必须的
}

class Dom {
  constructor(name: string) {

  }
  //  *private 可放在属性或者方法前面：但是只能在Dom这个类的内部使用
  private createElement(el: string) {
    return document.createElement(el)
  }

  private setText(el: HTMLElement, text: string | null) {
    el.textContent = text
  }
  // *protected给子类和内部去使用 （let dom=new Dom  dom.还是无法使用Dom内部的render()滴）
  protected render(data: Vnode) {
    let root = this.createElement(data.tag) // 创建根节点
    // 判断是否有子节点
    if (data.children && Array.isArray(data.children)) {
      // 遍历
      data.children.forEach(i => {
        // 不确定层级，所以进行递归
        let child = this.render(i)
        root.appendChild(child)
      })
    } else {
      this.setText(root, data.text)
    }
    return root
  }
}

class Vue extends Dom implements VueCls {
  // *静态方法可以加在属性和方法上
  static aaa: string
  static version() {
    return '静态方法'
  }
  static ff() {
    // *静态方法中的this只能指向别的静态方法
    this.version()
    return '静态方法'
  }
  // *readonly 用在索引签或者属性上
  readonly options: Options // 代表此属性不能被修改
  constructor(options: Options) {
    // *super指向的是父类prototype.constructor.call 可以给父类的constructor传参
    super('皇子')
    this.options = options
    this.init()
    // super.render() // *可以调用父类方法
  }
  public init(): void { // 所有方法默认是public，可以子类、内部、外部使用
    // 虚拟dom就是通过js去渲染真实dom
    let data: Vnode = {
      tag: "div", // 根节点
      children: [{
        tag: 'p',
        text: '儿子1',
      },
      {
        tag: 'p',
        text: '儿子2',
      },
      {
        tag: 'p',
        text: '儿子3',
      }]
    }
    let app = typeof this.options.el === 'string' ? document.querySelector(this.options.el) : this.options.el
    app.appendChild(this.render(data))  // 调用render
  }
}

let vue = new Vue({
  el: "#app"
})

vue.init() // 这样就可调用，因为它是public
Vue.version() // *静态方法的使用 通过实例调用（使用Vue）
Vue.aaa // 静态方法的使用 通过实例调用（使用Vue）

4、get、set方法

// 可以通过get、set做拦截器
class Ref {
  _value: any
  constructor(value: any) {
    this._value = value
  }
  get value() {
    return this._value + '被读取'
  }
  set value(newVal) {
    this._value = newVal + '被重置'
  }
}
const ref = new Ref('777')
console.log(ref.value) // 777被读取
ref.value = '888'
console.log(ref.value) // 888被重置被读取