// 1. class的基本用法 继承 和 类型约束 implements// 2. class的修饰符 readonly private protected public// 3. super原理// 4. 静态方法// 5. get set// private 只能在内部使用(不允许给子类和外部使用)// protected 给子类和内部去使用(不允许给外部使用)// public 默认是public, 可以给子类和内、外部使用interfaceOptions{el:string|HTMLElement,}interfaceVueCls{options:Optionsinit():void}// 虚拟dom 简单版interfaceVnode{tag:string,// div section headertext?:string,// 123children?:Vnode[],}classDom{constructor(){}privatecreateElement(el:string){returndocument.createElement(el)}// 填充文本的方法privatesetText(el:HTMLElement,text:string|null){el.textContent=text}// 渲染函数protectedrender(data:Vnode){letroot=this.createElement(data.tag)this.setText(root,data.textasstring)if(data.children&&Array.isArray(data.children)){data.children.forEach(item=>{constchild=this.render(item)root.appendChild(child)})}returnroot}}// 不允许外部使用// let dom = new Dom()// dom.// implements类型约束classVueextendsDomimplementsVueCls{// readonly options: Optionsoptions:Optionsstatica:stringconstructor(options:Options){// 为什么继承之后这里要加一个super?// 父类的prototype.constructor.call// super相当于先调用父类的构造函数，得先初始化父类的属性先有父在有子super()// 初始化下父类，一定要放在最上面// super('小满') // 初始化下父类，一定要放在最上面this.options=optionsthis.init()// super. 通过super.调用父类的方法}staticxxx(){console.log(this.a)}staticversion(){// 只能调用别的静态属性和方法this.a='123'this.xxx()return'1.0.0'}init():void{// 虚拟dom 就是通过js 去渲染我们这个真实的domletdata:Vnode={tag:'div',text:'123',children:[{tag:'section',text:'我是子节点1'},{tag:'section',text:'我是子节点2',children:[{tag:'section',text:'我是子节点3'},]},]}letapp=typeofthis.options.el==='string'?document.querySelector(this.options.el):this.options.el app?.appendChild(this.render(data))}}letvue=newVue({el:'#app'})Vue.version()// 静态方法vue.init()// Promise.all 这是一个静态方法classRef{_value:anyconstructor(value:any){this._value=value}getvalue(){returnthis._value+'vvv'}setvalue(newValue){this._value=newValue+'小满'}}// Object.defineProperty一样的constref=newRef('哈哈哈哈')console.log(ref.value)ref.value='坏人'console.log(ref.value)
