Webkomponenten und IoC

Eine großartige Funktion von Webkomponenten, oder besser gesagt sogar HTML, ist die Möglichkeit, vorhandene Inhalte transparent mit neuen Inhalten zu versehen. Dank dessen können Sie den vorhandenen Legacy-Code praktisch nicht-invasiv ändern und den neuen elegant strukturieren.

Insbesondere , wenn Sie einige Layout mit Ihrem eigenen Element (google.Custom Elemente) wickeln, dann in der Konfiguration connectedCallback () Haken, kann Ihr Element bestimmen , welche Subelemente es im Inneren hat und seine eigene und ihre Arbeit entsprechend konfigurieren , wenn Sie anpassen müssen , um sie zu neue Anforderungen und es wird eine ziemlich architektonisch kompetente Entscheidung sein. Es empfängt auch Popup-Ereignisse von seinen Unterelementen. Wenn Sie die Schattenbaumisolation aktiviert haben, wird es zu ihrem unbestrittenen Broker (und, falls nicht aktiviert, zu einem transparenten Proxy) Über ihre Grenzen hinaus werden sie nicht auftauchen und jede Verantwortung wird auf ihn fallen. 

 "WebComponents ", https://habr.com/ru/post/461153/ . 

?

, , . .. - . , , , , . .. , , , /, .. , - . 

IoC-, .. . Java , . .. ( ;). , , , , . , HOST, 20 , -, , , HOST , Search & Replace. 

, , , . , , , , API - ( “” Spring Boot).  

, , , Angular Composite API Vue. JSX React Context API “ ”, .. . IoC “” , .

Angular -,   . injection-js typescript. , , , . -, - . 

, . , , - , , , , .

- . ! - :

mkdir testioc
cd testioc
npm init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

-

npm i skinny-widgets --save
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

index.html

body

<sk-config
       theme="antd"
       base-path="/node_modules/skinny-widgets/src"
></sk-config>

<script src="/node_modules/skinny-widgets/dist/sk-compat-bundle.js"></script>
<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";

   window.registry = window.registry || new Registry();

   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
   });
</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

sk-config , , - . , ( ) , is customElements. , , .

window.registry = window.registry || new Registry(); , , , - “ ”.

<sk-button>Open</sk-button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

npx http-server
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

http://127.0.0.1:8080

, : .

.

<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
   import { MyDialog } from "./my-dialog.js";

   window.registry = window.registry || new Registry();

   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
       myDialog: { def: MyDialog, is: 'my-dialog' },
   });
</script>


<sk-button>Open</sk-button>
<my-dialog>This is my dialog</my-dialog>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

SkDialog , . my-dialog.js .

export class MyDialog extends SkDialog {

}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , “” click open() . HTML -, , .

- MyView customElements. . my-view.

  my-view.js :

export class MyView extends HTMLElement {


   bindDialog() {
       if (this.dialogCfg) {
           let button = this.querySelector(this.dialogCfg.buttonSl);
           let dialog = this.querySelector(this.dialogCfg.dialogSl);
           if (button) {
               button.addEventListener('click', (event) => {
                   dialog.open();
               });
           }
       }
   }

   render() {
       this.bindDialog();
   }

   connectedCallback() {
       this.render();
   }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.. .

, - connectedCallback(), .

render(), bindDialog() - .

bindDialog() click . ,  

this.dialogCfg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
   import { MyDialog } from "./my-dialog.js";
   import { MyView } from "./my-view.js";

   window.registry = window.registry || new Registry();

   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
       dialogCfg: { buttonSl: '#dialogButton', dialogSl: '#dialog' },
       myDialog: { def: MyDialog, is: 'my-dialog' },
       myView: { def: MyView, deps: { dialogCfg: 'dialogCfg' }, is: 'my-view' },
   });
</script>

<my-view>
   <sk-button id="dialogButton">Open</sk-button>
   <my-dialog id="dialog">This is my dialog</my-dialog>
</my-view>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , , . :

, , HTML   , . HTML, javascript . , .

-:

-

WebComponents ,

Material WebComponents - https://habr.com/ru/post/462695/

Schnellstart mit WebComponents - https://habr.com/ru/post/460397/