WebComponents学习与实践

前两天看到了前端的 Web Components 学习了一下。组件是前端的发展方向。而 Web Components 是浏览器的原生组件。相比第三方框架，其简单直接，不用加载任何外部模块，代码量小。现在其还在不断发展，但已经可用于生产环境。Web Components 包含的内容很多，我只是做了一个简单的弹框案例。其他的功能则需要你自己去学习、去扩展了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .dialog_box {
            width: 521px;
            height: 563px;
            border-radius: 8px;
            box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.4);
            background-color: #fff;
            position: absolute;
            padding: 0 40px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .dialog_box.bg1 {background-image: url("img/bg_03.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .dialog_box.bg2 {background-image: url("img/bg_06.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .dialog_header {height: 215px;}
        .dialog_title {
            height: 57px;
            font-size: 30px;
            text-align: center;
            line-height: 57px;
        }
        .dialog_content {
            height: 130px;
            text-align: center;
            font-size: 24px;
            line-height: 29px;
            padding: 30px 52px 0;
        }

        .btn_line {
            height: 110px;
            display: flex;
            justify-content: center;
        }
        .btn {
            width: 221px;
            height: 74px;
            border-radius: 4px;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
            font-size: 30px;
            line-height: 74px;
            text-align: center;
            cursor: pointer;
            margin: 0 20px;
        }
        .btn.cancel {background: #e7e7e7;}
        .btn.confirm {
            background: #e5322e;
            color: #fff;
        }
        .mask {background: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div class="dialog_box bg2">
        <div class="dialog_header"></div>
        <div class="dialog_title"> 标题 </div>
        <div class="dialog_content"> 内容 </div>
        <div class="btn_line">
            <div class="btn cancel"> 知道了 </div>
            <div class="btn confirm"> 马上来抢 </div>
        </div>
    </div>
</body>
</html>

效果：

主要是利用 DOM HTMLElement 对象和 windows 属性 customElements 来实现。

<my-com></my-com>
<script type="module">
    class myCom extends HTMLElement{constructor(){super();
            this.render();  // 初始化弹框}
        render(){this.obj = document.createElement('div');
            this.obj.innerHTML = `
             <div class="mask"></div>
            <div class="dialog_box bg2">
                <div class="dialog_header"></div>
                <div class="dialog_title"> 标题 </div>
                <div class="dialog_content"> 内容 </div>
                <div class="btn_line">
                    <div class="btn cancel"> 知道了 </div>
                    <div class="btn confirm"> 马上来抢 </div>
                </div>
            </div>
            `
            this.append(this.obj);
        }
    }
    customElements.define('my-com',myCom)
</script>

给 my-com 组件添加 title 和 content 属性，在再 js 中修改获取到属性值，更改相应的数据。

<my-com  title='这里是自定义的标题' content='这里是我们自定义的内容'></my-com>
constructor(){super();
  let attr = this.attributes;
   this._data = {
       title:attr.title?attr.title.value:'默认标题',
       content:attr.content?attr.content.value:'默认内容'
   }
   this.render();  // 初始化弹框}
render(){this.obj = document.createElement('div');
   this.obj.innerHTML = `
    <div class="mask"></div>
   <div class="dialog_box bg2">
       <div class="dialog_header"></div>
       <div class="dialog_title">${this._data.title}</div>
       <div class="dialog_content">${this._data.content}</div>
       <div class="btn_line">
           <div class="btn cancel"> 知道了 </div>
           <div class="btn confirm"> 马上来抢 </div>
       </div>
   </div>
   `
   this.append(this.obj);
}

先新写一个事件构造函数。在利用弹框相应的元素上添加 data-[事件名] 的属性。点击相应的元素，会触发响应。

class popEvent {constructor(option) {
     /*
      * 接收四个参数：* 1，对象的 this
      * 2，要监听的元素, 不传则为对象 this
      * 3，要监听的事件, 默认监听点击事件
      * 4，是否冒泡, 默认冒泡
      * */
     this.eventObj = option.obj;
     console.log(this.eventObj.__proto__['hide'])
     this.target = option.target || this.eventObj;
     this.eventType = option.eventType || 'click';
     this.popup = option.popup || true;
     this.bindEvent();}
 bindEvent() {
     let _this = this;
     _this.target.addEventListener(_this.eventType, function (ev) {
         let target = ev.target;
         let dataset, parent, num, b;
         popup(target);

         function popup(obj) {if (obj === document) {return false;}
             dataset = obj.dataset;
             num = Object.keys(dataset).length;
             parent = obj.parentNode;
             if (num < 1) {popup(parent);
                 num = 0;
             } else {for (b in dataset) {console.log(b);
                     if (_this.eventObj.__proto__[b]) {_this.eventObj.__proto__[b].call(_this.eventObj, {
                             obj: obj,
                             ev: ev,
                             target: dataset[b],
                             data: _this.eventObj
                         });
                     }
                 }
                 _this.popup && popup(parent);
             }
         }
     })
 }




 constructor(){super();
    let attr = this.attributes;
    this._data = {
        title:attr.title?attr.title.value:'默认标题',
        content:attr.content?attr.content.value:'默认内容'
    }
    this.render();  // 初始化弹框
    this.event = new popEvent({obj: this});
}
hide(){console.log("点击了 hide")
    this.obj.style.display = 'none';
}
cancle(){console.log("点击了 concle")
}
confirm(){console.log("点击了 confirm")
}
render(){this.obj = document.createElement('div');
    this.obj.innerHTML = `
     <div class="mask"  data-hide='true'></div>
    <div class="dialog_box bg2">
        <div class="dialog_header"></div>
        <div class="dialog_title">${this._data.title}</div>
        <div class="dialog_content">${this._data.content}</div>
        <div class="btn_line">
            <div class="btn cancel"  data-hide='true' data-cancel='true'> 知道了 </div>
            <div class="btn confirm" data-confirm='true'> 马上来抢 </div>
        </div>
    </div>
    `
    this.append(this.obj);
}

在 img 标签上添加 is 属性，利用 HTMLImageElement 对象和 customElements 来实现。

    <img is="my-img" src=""alt="">
    <script>
        class myIMG extends HTMLImageElement {constructor() {super();
                setTimeout(() => {
                    this.src =
                        'https://hbimg.huabanimg.com/67bcf019c3aba12abc19624e1afe3418a03fb2021cf00-iDEjac_fw658/format/webp';
                }, 2000);
            }
        }
        customElements.define('my-img', myIMG, {extends: 'img'});
    </script>

欢迎关注公众号（web 学习吧），一起学习进步：

本文使用 mdnice 排版

WebComponents学习与实践

1、静态弹框（以前的写法）

二、利用 Web Components

三、添加组件属性，修改弹框内容

四、添加事件

创建 img 标签时注意因素

Just My Socks（注册教程内含优惠码）

WebComponents学习与实践

1、静态弹框（以前的写法）

二、利用 Web Components

三、添加组件属性，修改弹框内容

四、添加事件

创建 img 标签时注意因素

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）