HTML5 Web Component & Vanilla JavaScript All In One

HTML5 Web Component & Vanilla JavaScript All In One

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

https://www.codementor.io/ayushgupta/vanilla-js-web-components-chguq8goz

https://ayushgp.github.io/html-web-components-using-vanilla-js-part-2/

web-components

https://developers.google.com/web/fundamentals/web-components/

https://developers.google.com/web/fundamentals/web-components/examples/howto-checkbox
https://googlechromelabs.github.io/howto-components/howto-checkbox/#demo

https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs
https://googlechromelabs.github.io/howto-components/howto-tabs/#demo

https://developers.google.com/web/fundamentals/web-components/examples/howto-tooltip
https://googlechromelabs.github.io/howto-components/howto-tooltip/#demo

https://github.com/GoogleChromeLabs/howto-components

Pub/Sub pattern & JavaScript

https://gist.github.com/learncodeacademy/777349747d8382bfb722
http://github.com/learncodeacademy
https://github.com/learncodeacademy/react-js-tutorials
https://www.youtube.com/learncodeacademy/

Pub/Sub JavaScript Object

https://davidwalsh.name/pubsub-javascript
https://github.com/darkwing
https://github.com/darkwing/LazyLoad

publish/subscribe pattern

https://addyosmani.com/blog/understanding-the-publishsubscribe-pattern-for-greater-javascript-scalability/
https://msdn.microsoft.com/en-us/magazine/hh201955.aspx
https://github.com/addyosmani
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

Event Type Checker

    // utils
    /**
     * @author xgqfrms 2018.05.28
     * @description show Event Type
     * @param {String} event
     */
    const showEventType = (event) => {
        let stringType = Object.prototype.toString.call(event),
            type = "";
        switch (stringType) {
            case "[object Function]":
                type = "Function";
                break;
            case "[object Object]":
                type = "Object";
                break;
            case "[object Array]":
                type = "Array";
                break;
            case "[object Number]":
                type = "Number";
                break;
            case "[object Boolean]":
                type = "Boolean";
                break;
            case "[object Symbol]":
                type = "Symbol";
                break;
            case "[object String]":
                type = "String";
                break;
            default:
                // "[object Undefined]"
                // type = `${stringType}`;
                type = undefined;
                break;
        }
        return type;
    };
    /**
     * @author xgqfrms 2018.05.28
     * @description show Typeof
     * @param {String} event
     */
    const showTypeof = (event) => {
        let stringType = typeof (event),
            type = "";
        switch (stringType) {
            case "function":
                type = "Function";
                break;
            case "object":
                if (Array.isArray(event)) {
                    type = "Array";
                } else {
                    type = "Object";
                }
                break;
            case "number":
                type = "Number";
                break;
            case "boolean":
                type = "Boolean";
                break;
            case "symbol":
                type = "Symbol";
                break;
            case "string":
                type = "String";
                break;
            default:
                // "undefined"
                // type = `${stringType}`;
                type = undefined;
                break;
        }
        return type;
    };

arguments

function test(a, b, c) {
    let args = Array.prototype.slice.call(arguments, 1);
    // 1
    console.log("(arguments =\n", arguments);
    console.log("shaped args =\n", args );
}

test({}, [], "str");

function new_test(a, b, c) {
    let args = Array.prototype.slice.call(arguments, 0);
    // 0
    console.log("(arguments =\n", arguments);
    console.log("shaped args =\n", args );
}

new_test({}, [], "str");

polymer

https://www.polymer-project.org

https://www.polymer-project.org/3.0/docs/about_30

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  </head>
  <body>
    <likeable-element></likeable-element>
  </body>
</html>

import './likeable-element.js';

// Import an element
import '@polymer/paper-checkbox/paper-checkbox.js';

// Import the PolymerElement base class and html helper
import {PolymerElement, html} from '@polymer/polymer';

// Define an element class
class LikeableElement extends PolymerElement {

  // Define publc API properties
  static get properties() { return { liked: Boolean }}

  // Define the element's template
  static get template() {
    return html`
      <style>
        .response { margin-top: 10px; } 
      </style>
      <paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox>

      <div hidden$="[[!liked]]" class="response">Web components like you, too.</div>
    `;
  }
}

// Register the element with the browser
customElements.define('likeable-element', LikeableElement);
  

refs

---

---

©xgqfrms 2012-2020

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

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

---