javascript的一些知识(八)--原生组件及封装

养成架构师

已于 2022-11-29 23:13:00 修改

阅读量731

点赞数

文章标签： javascript 前端 vue.js

于 2022-11-28 22:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_43160562/article/details/128088730

版权

原生组件封装

<body>
  <button class="dailog1"></button>
</body>

<script>
//原则：对内：封闭，对外：开放(api，配置)
/*{//配置内容
  width:30%;
  height:250px;
  title:"测试标题";
  content:"测试内容";
  dragable:true;//是否拖曳
  maskable:true;//是否遮蔽
  isCancel:false;//是否取消
} */

//封装的js
class Dailog{
  constructor(options){
    //合并配置；1，es6默认值 
    //let {width="100px"} = options
    //或者2.Object.assign()
    this.opts = Object.assign({
      width:"30%",
      height:"250px",
      title:"测试标题",
      content:"测试内容",
      dragable:true,//是否拖曳
      maskable:true,//是否遮蔽
      isCancel:false,//是否取消
      success(){
        console.log('确定')
      },
      cancel(){
        console.log('取消')
      }
    },options);
    this.init();
  }
  
  init(){
    this.renderView();
    //方法1
    /* this.dialogHtml.Selector(".k-close").onclick = ()=>{
      this.close();
    }
    if(this.dialogHtml.Selector(".k-cancel")){
      this.dialogHtml.Selector(".k-cancel").onclick = ()=>{
        this.close();
      }
    }
    this.dialogHtml.Selector(".k-primary").onclick = ()=>{
      this.close();
    } */  //取消按钮也许由也许没有，可能会出现问题
   
    //方法2  通过事件委托
    this.dailogHtml.onclick = e=>{
      switch(e.target.className){
        case 'k-close':
          this.close();
          //this.opts.cancel();
          break;
        case 'k-cancel':
          this.close();
          this.opts.cancel();
          break;
        case 'k-primary':
          this.close();
          this.opts.success();
          break;
      }
    } 
    
    
    
  }
  //关闭对话框
  close(){
    this.dailogHtml.querySelector(".k-wrapper").style.display="none";
    this.dailogHtml.querySelector(".k-dialog").style.display="none";
  }
  //显示对话框
  open(){
    this.dailogHtml.querySelector(".k-wrapper").style.display="block";
    this.dailogHtml.querySelector(".k-dialog").style.display="block";
  }
  renderView(){
    this.dailogHtml = document.createElement("div");
    this.dailogHtml.innerHTML = `<div class="k-wrapper"></div>
                              <div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height};">
                              <div class="k-header">
                                <span class="k-title">${this.opts.title}</span><span class="k-close">x</span>
                              </div>
                              <div class="k-body">
                                <span>${this.opts.content}</span>
                                <input class="input-inner" type="text" />
                              </div>
                              <div class="k-footer">
                                ${this.opts.isCancel?'<span class="k-cancel">取消</span>':''}
                                <span class="k-primary">确定</span>
                              </div>
                            </div>`;
    document.querySelector("body").appendChild(this.dailogHtml)
  }
}


//开发者调用
let dailog1 = new Dailog({
  width:"40%",
  height:"250px",
  success(){
    console.log('确定了')
  },
  cancel(){
    console.log('取消了')
  }
})

document.querySelector(".dailog1").onclick = function(){
  dailog1.open();
}


</script>

方法3 通过自定义事件封装(适用于大项目)

<body>
  <button class="dailog1"></button>
</body>

<script>
//原则：对内：封闭，对外：开放(api，配置)
/*{//配置内容
  width:30%;
  height:250px;
  title:"测试标题";
  content:"测试内容";
  dragable:true;//是否拖曳
  maskable:true;//是否遮蔽
  isCancel:false;//是否取消
} */


//方法3
    //通过自定义事件回调
    /* class MyEvent{
      constructor(){
        this.handle = {};
      }
      addEvent(eventName,fn){
        if(typeof this.handle[eventName] ==='undefine'){
          this.handle[eventName] = [];
        }
        this.handle[eventName].push(fn);
      }
      trigger(eventName){
        if(!(eventName in this.handle)){
          return ;
        }
        this.handle[eventName].foreach(v=>{
          v();
        })
      }
      removeEvent(eventName,fn){
        if(!(eventName in this.handle)){
          return ;
        }
        for(let i=0;i<this.handle[eventName].length;i++){
          if(this.handle[eventName][i]===fn){
            this.handle[eventName].splice(i,1);
            break;
          }
        }
      }
    } */
    
//浏览器自带了自定义事件函数 EventTarget;
//可以直接继承系统的EventTarget 
//在使用时需先实例化一个对象
//let cancel = new Event("cancel");
//this.addEventListener("cancel",this.opts.cancel);

//触发时
// this.dispatchEvent(cancel) //括号里是实例化对象


class Dailog extends EventTarget{
  constructor(options){
    super();
    this.opts = Object.assign({
      width:"30%",
      height:"250px",
      title:"测试标题",
      content:"测试内容",
      dragable:true,//是否拖曳
      maskable:true,//是否遮蔽
      isCancel:false,//是否取消
      success(){
        console.log('确定')
      },
      cancel(){
        console.log('取消')
      }
    },options);
    this.init();
  }
  
  let cancel = new Event("cancel");
  this.addEventListener("cancel",this.opts.cancel);
  //let success = new Event("success");
  this.addEventListener("success",this.opts.success);
  //this.addEvent("cancel",this.opts.cancel);
  //this.addEvent("success",this.opts.success);
  
  init(){
    this.renderView();
    this.dailogHtml.onclick = e=>{
      switch(e.target.className){
        case 'k-close':
          this.close();
          this.trigger("cancel");
          //this.opts.cancel();
          break;
        case 'k-cancel':
          this.close();
          this.dispatchEvent(cancel)
          //this.trigger("cancel");
          //this.opts.cancel();
          break;
        case 'k-primary':
          this.close();
          this.confirm();
          //this.opts.success();
          break;
      }
    } 
  }
  confirm(value){
    let success = new CustomEvent("success",{
      detail:value
    });
    this.trigger("success");
  }
  //关闭对话框
  close(){
    this.dailogHtml.querySelector(".k-wrapper").style.display="none";
    this.dailogHtml.querySelector(".k-dialog").style.display="none";
  }
  //显示对话框
  open(){
    this.dailogHtml.querySelector(".k-wrapper").style.display="block";
    this.dailogHtml.querySelector(".k-dialog").style.display="block";
  }
  renderView(){
    this.dailogHtml = document.createElement("div");
    this.dailogHtml.innerHTML = `<div class="k-wrapper"></div>
                              <div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height};">
                              <div class="k-header">
                                <span class="k-title">${this.opts.title}</span><span class="k-close">x</span>
                              </div>
                              <div class="k-body">
                                <span>${this.opts.content}</span>
                                //<input class="input-inner" type="text" />
                              </div>
                              <div class="k-footer">
                                ${this.opts.isCancel?'<span class="k-cancel">取消</span>':''}
                                <span class="k-primary">确定</span>
                              </div>
                            </div>`;
    document.querySelector("body").appendChild(this.dailogHtml)
  }
}

//input框功能使用继承实现
class ExtendsDailog extends Dailog{
  constructor(options){
    super(options){
      super(options);
      this.renderInput();
    }
    renderInput(){
      let myInput = document.createElement("input");
      myInput.type = "text";
      myInput.classList.add("input-inner");
      this.dialogHtml.querySelector(".k-body").appendChild(myInput);
    }
    //获取input框里的值
    confirm(){
      let value = this.dialogHtml.querySelector(".input-inner").value;
      super.confirm(value);
    }
  }
  
}




//开发者调用
let dailog1 = new Dailog({
  width:"40%",
  height:"250px",
  success(e){
    console.log('确定了',e.detail)
  },
  cancel(){
    console.log('取消了')
  }
})

document.querySelector(".dailog1").onclick = function(){
  dailog1.open();
}


</script>

自定义事件

<button class="btn"></button>
//把函数当成事件来执行
<script>
  function fn1(){
    console.log("很多逻辑a");
  }
  function fn2(){
    console.log("很多逻辑b");
  }
 // document.querySelector(".btn").addEventListener("click",fn1);
 // document.querySelector(".btn").addEventListener("click",fn2);
  //以上点击一次，所有的函数都出发了
  
  //自定义事件
  let handle = {
    "myevent":[fn1,fn2]
  };
  addEvent("myEvent",fn1);
  addEvent("myEvent",fn2);
  removeEvent("myEvent",fn2);
  trigger("myEvent");
  
  
  
  function addEvent(eventName,fn){
    if(typeof handle[eventName] ==='undefine'){
      handle[eventName] = [];
    }
    handle[eventName].push(fn);
  }
  
  function trigger(eventName){
    if(!(eventName in handle)){
      return ;
    }
    handle[eventName].foreach(v=>{
      v();
    })
  }
  
  function removeEvent(eventName,fn){
    if(!(eventName in handle)){
      return ;
    }
    for(let i=0;i<handle[eventName].length;i++){
      if(handle[eventName][i]===fn){
        handle[eventName].splice(i,1);
        break;
      }
    }
  }
  
  //使用类管理自定义事件
  class MyEvent{
    constructor(){
      this.handle = {};
    }
    addEvent(eventName,fn){
      if(typeof this.handle[eventName] ==='undefine'){
        this.handle[eventName] = [];
      }
      this.handle[eventName].push(fn);
    }
    trigger(eventName){
      if(!(eventName in this.handle)){
        return ;
      }
      this.handle[eventName].foreach(v=>{
        v();
      })
    }
    removeEvent(eventName,fn){
      if(!(eventName in this.handle)){
        return ;
      }
      for(let i=0;i<this.handle[eventName].length;i++){
        if(this.handle[eventName][i]===fn){
          this.handle[eventName].splice(i,1);
          break;
        }
      }
    }
  }
  let newEvent = new MyEvent();
  newEvent.addEvent("myEvent",fn1);
  newEvent.addEvent("myEvent",fn2);
  newEvent.removeEvent("myEvent",fn2);
  newEvent.trigger("myEvent");
</script>