ES6 & class extends All In One

合集 - ES6(82)

1.如何使用 js 实现一个 ES6 中 class 的 extends 功能 All In One2023-03-072.ECMAScript 2023 & Temporal All In One2022-11-273.js ES5 arguments & arguments.callee & this & ES6 new.target All In One2022-10-184.ES6 Map Object index All In One2022-06-055.TypeScript Decorator Metadata All In One2022-04-136.js ES6 Proxy All In One2022-02-137.js ES6 Reflect All In One2022-02-138.js @decorator All In One2021-12-039.Vue warn All In One2021-09-1710.ES6 解构赋值 All In One2021-09-0311.ES6 & export & export default All In One2021-07-2012.ES6 Async Await bug All In One2021-06-1013.ES6 destructuring assignment & default value & rename All In One2021-05-3114.ES6 Symbol All In One2021-03-0715.ES6 Map & WeakMap All In One2021-03-0716.ES6 Reflect All In One2021-03-0717.ES6 Proxy & Reflect All In One2021-03-0718.composition-api & setup2021-03-0519.ES6 Arrow Function & this bug2021-03-0320.ES5 arguments vs ES6 ...rest params All In One2021-02-2721.ES6 export & export.default All In One2021-02-2222.es6 string html2021-02-2023.js create Array ways All In One2021-02-1624.ES6 version repeatify2021-01-0525.es6 curry function2020-12-2926.JavaScript convert ES6 Map to Array All In One2020-12-2327.JavaScript string repeat methods All In One2020-12-0828.ES6 Set All In One2020-11-1829.ES6 Map All In One2020-11-1830.ES6 Arrow Function All In One2020-10-2831.如何用 js 实现一个 ES6 class 类函数 All In One2020-10-2032.ES6 进制字面量 All In One2020-10-1933.redux 中间件 redux-saga 使用教程2020-10-1234.how to convert Map to Object in js2020-10-0135.ES6 Set vs ES5 Array2020-10-0136.ES6 getter & setter2020-10-0137.ES6 arrow function vs ES5 function All In One2020-09-3038.ES6 Class vs ES5 constructor function All In One2020-09-3039.ES6 Generator vs ES6 async/await2020-09-3040.ES6 Map vs ES5 Object All In One2020-09-3041.js swap array2020-09-2242.ES6 ...rest In Action2020-09-1843.Webpack 4.x 默认支持 ES6 语法2020-08-1244.2020 面经(大前端，算法，设计模式，架构)2020-07-1745.js ES5 inheritance All In One2020-07-1046.JavaScript Learning Paths(ES5/ES6/ES-Next)2020-07-0947.ES5 function & ES6 class & method type2020-06-0448.Unicode & \u2028 & \u2029 & ES6 Template literals All In One2020-05-2749.random array & shuffle 洗牌算法 / 随机算法2019-12-0350.js in depth: ES6 destructuring assignment2019-11-2851.gradient text & gradient background2019-11-1852.V8 & ECMAScript & ES-Next2019-09-0853.js 数据劫持 (应用场景) All In One2019-08-2854.ES6 Arrow Function return Object2019-08-2255.ES6 Class & super All In One2019-08-2156.ES6 & tagged-template-literals & template strings All In One2019-08-1657.Enums & JavasScript & TypeScript2019-08-1358.es6 & map & set2019-07-2459.ES6 & import * & import default & import JSON All In One2019-07-0860.vue @ path2019-06-1761.ES6 & Classes & Interface2019-06-06

62.ES6 & class extends All In One2019-06-05

63.Google Advanced Search operators All In One2019-05-2064.React Native & ES6 & emoji All In One2019-04-2565.ES6 & Map & hashMap2019-04-0766.array to object2018-12-1867.ES6 Set & Map2018-12-1168.ES6 Destructuring Assignment All In One2018-11-1469.vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug2018-11-1470.HTML Imports & polyfill2018-10-2371.yarn & vue-cli & hui-cli All In One2018-09-1372.ES6 Map & WeakMap & ES6 Set & WeakSet2018-07-1973.ES6 polyfills & String.includes() & Array.includes()2018-06-2874.ES6 Arrow Function & this bug2018-06-2075.ES6 Proxies2018-06-1176.ES6 import json2018-06-0877.disable VS Code auto format javascript when save codes2018-06-0878.how to create a javascript components framework using HTML5, CSS3, ES6 All In One2018-05-2979.eslint es6 syntax & object rest spread2018-05-0380.!function() & IIFE2017-10-2581.React.createClass vs. ES6 Class Components2017-02-1982.ES2015 (ES6) 新特性： 20 个2016-07-10

收起

ES6 & class extends

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Using_templates_with_web_components

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description app.js
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

customElements.define("element-details",
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById("element-details-template").content;
            log(`element-details's template =`, template);
            let dom = template.cloneNode(true);
            log(`element-details's template's dom =`, dom);
            log(`this =`, this);
            const shadowRoot = this.attachShadow({mode: "open"}).appendChild(dom);
            log(`shadowRoot =`, shadowRoot);
        }
    }
);

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description app.js
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

// customElements.define(name, constructor, options);

class ElementDetails extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById("element-details-template").content;
        log(`element-details's template =`, template);
        let dom = template.cloneNode(true);
        log(`element-details's template's dom =`, dom);
        log(`this =`, this);
        const shadowRoot = this.attachShadow({mode: "open"}).appendChild(dom);
        log(`shadowRoot =`, shadowRoot);
    }
}

customElements.define("element-details-2", ElementDetails);
// customElements.define("element-details-2", ElementDetails, {});

---

Web Components

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks

practical

practice

https://www.htmlelements.com/
https://github.com/HTMLElements

https://hybrids.js.org/
https://github.com/hybridsjs/hybrids

https://www.polymer-project.org/
https://github.com/polymer
https://github.com/Polymer/polymer
https://polymer-library.polymer-project.org/

CSS Pseudo Selectors

::slotted & :empty

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

/* Selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

/* Selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}

https://css-tricks.com/building-skeleton-screens-css-custom-properties/

1. You can use the :empty selector and a pseudo element to draw the skeleton, so it only applies to empty card elements.

   Once the content is injected, the skeleton screen will automatically disappear.

/* css skeleton */

/*
 * Card Skeleton for Loading
 */

.card {
  width: 280px; //demo
  height: var(--card-height);

  &:empty::after {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    border-radius:6px;
    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:
      linear-gradient(
        90deg,
        rgba(lightgrey, 0) 0,
        rgba(lightgrey, .8) 50%,
        rgba(lightgrey, 0) 100%
      ),                          //animation blur
      var(--title-skeleton),      //title
      var(--desc-line-skeleton),  //desc1
      var(--desc-line-skeleton),  //desc2
      var(--avatar-skeleton),     //avatar
      var(--footer-skeleton),     //footer bar
      var(--card-skeleton)        //card
    ;

    background-size:
      var(--blur-size),
      var(--title-width) var(--title-height),
      var(--desc-line-1-width) var(--desc-line-height),
      var(--desc-line-2-width) var(--desc-line-height),
      var(--avatar-size) var(--avatar-size),
      100% var(--footer-height),
      100% 100%
    ;

    background-position:
      -150% 0,                      //animation
      var(--title-position),        //title
      var(--desc-line-1-position),  //desc1
      var(--desc-line-2-position),  //desc2
      var(--avatar-position),       //avatar
      var(--footer-position),       //footer bar
      0 0                           //card
    ;

    background-repeat: no-repeat;
    animation: loading 1.5s infinite;
  }
}

@keyframes loading {
  to {
    background-position:
      350% 0,
      var(--title-position),
      var(--desc-line-1-position),
      var(--desc-line-2-position),
      var(--avatar-position),
      var(--footer-position),
      0 0
    ;
  }
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---