JavaScript面向对象3：组件

组件是什么？

组件 ：数据和方法的简单封装；

弹窗功能

• 属性：宽、高、标题、内容；

• 方法：打开 、关闭、渲染、拖拽

• 配置

  {
  	width: "30%",
  	height: "250px",
  	title: "测试标题",
  	content: "测试内容",
  	dragable: true, //是否可拖拽
  	maskable: true, //是否有遮罩
  	isCancel:false //是否有取消
  }
  

合并配置

• 解构赋值添加默认参数
• 通过Object.assagin来合并
• 通过展开运算符合并
  都可以覆盖默认样式

渲染视图

• 创建dom解构；es6表达式做判断；
• 初始化
• 打开方法
• 关闭方法
• 拖拽方法

事件委托

• 节点不存在绑定事件，委托给父级添加事件

 init() {
        // 组件初始化；
        this.renderHtml();
        // 绑定自定义事件
        this.addEventListener("success", this.opts.success);

        // 事件委托
        let dialog = this.divEle.querySelector(".k-dialog");
        dialog.onclick = e => {
            switch (e.target.className) {
                case 'k-close':
                default:
                    console.log("未点中")
                    break;
            }
        }
    }

触发自定义事件

confirm(value) {
    // 触发自定义事件的方法
    let myevent = new CustomEvent("success", {
        detail: value
    });
    this.dispatchEvent(myevent);
}

继承扩展功能

• 遮罩层、取消按钮；

• 重写和功能相关的方法；

通过webComponent自定义组件

通过继承html组件来给特定标签添加功能

• 比如img标签，继承并设置一个定时器，2s后添加src，显示图片
• 需要给这个img标签添加一个is属性

class MyImg extends HTMLImageElement{
    constructor(){
        super();
        // console.log("??",this);
        setTimeout(() => {
            this.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588957947704&di=b31c0d05c485896c063da527274565bb&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01dfcbc38578dac4c2.jpg"
        }, 2000);
    }
}
// 给需要的img标签添加is属性
customElements.define("my-c",MyImg,{
    extends:"img"
})

通过继承HTMLElement自定义独立组件

• 自定义一个标签<my-c>
• 可对这个标签进行样式修改

<my-c
    index="1"
></my-c>

class MyCom extends  HTMLElement{
    constructor(){
        super();
        console.log(this.attributes['index'])
        this.innerHTML = `<button>按钮</button>`;
        this.style.display = "block";
        this.style.width = "100px";
        this.style.height = "100px";
    }
}

customElements.define("my-c",MyCom);