Componentes web e IoC

Una gran característica de los componentes web, o incluso HTML, es la capacidad de envolver de forma transparente el contenido existente con contenido nuevo. Gracias a esto, puede modificar el código heredado existente de forma prácticamente no invasiva, así como estructurar el nuevo de forma elegante.

Específicamente, si envuelve algún diseño con su elemento personalizado (google.Custom Elements), luego configurando en el gancho connectedCallback () , su elemento puede determinar qué subelementos tiene adentro y configurar los suyos propios y su trabajo en consecuencia si necesita adaptarlos a nuevos requisitos y será una decisión arquitectónicamente competente. También recibirá eventos emergentes de sus subelementos, y si ha habilitado el aislamiento del árbol de sombra, se convertirá en su agente indiscutible (y si no está habilitado, en un proxy transparente). más allá de ella, no emergerán y toda la responsabilidad recaerá sobre él. 

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

Inicio rápido con WebComponents: https://habr.com/ru/post/460397/