Web Components e IoC

Um grande recurso dos Web Components, ou melhor, mesmo do HTML, é a capacidade de envolver de forma transparente o conteúdo existente com o novo. Graças a isso, você pode modificar o código legado existente de forma praticamente não invasiva, bem como estruturar o novo com elegância.

Especificamente, se você envolver algum layout com seu elemento personalizado (google.Custom Elements) e, em seguida, configurar no gancho connectedCallback () , seu elemento poderá determinar quais subelementos ele tem dentro e configurar o seu próprio e seu trabalho de acordo se você precisar adaptá-los novos requisitos e será uma decisão bastante competente em termos de arquitetura. Ele também receberá eventos pop-up de seus subelementos, e se você habilitou o isolamento da árvore de sombra, ele se tornará seu corretor não contestado (e se não habilitado, um proxy transparente), uma vez que além de seus limites, eles não surgirão e toda a responsabilidade recairá sobre ele. 

 "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/

Início rápido com WebComponents - https://habr.com/ru/post/460397/