Komponen Web dan IoC

Fitur hebat dari Komponen Web, atau bahkan HTML, adalah kemampuan untuk membungkus konten yang ada dengan konten baru secara transparan. Berkat ini, Anda dapat memodifikasi kode lama yang ada secara praktis tanpa invasi, serta menyusun yang baru dengan elegan.

Secara khusus, jika Anda menggabungkan beberapa tata letak dengan elemen kustom Anda (google.Custom Elements), kemudian mengonfigurasi di hook connectedCallback () , elemen Anda dapat menentukan subelemen apa yang dimilikinya di dalamnya dan mengonfigurasi miliknya sendiri serta pekerjaannya sesuai jika Anda perlu menyesuaikannya persyaratan baru dan itu akan menjadi keputusan yang kompeten secara arsitektural. Ini juga akan menerima acara pop-up dari subelemennya, dan jika Anda telah mengaktifkan isolasi pohon bayangan, itu akan menjadi perantara mereka yang tidak terbantahkan (dan jika Anda belum mengaktifkannya, proxy transparan). di luar itu, mereka tidak akan muncul dan semua tanggung jawab akan jatuh pada dia. 

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

Mulai cepat dengan Komponen Web - https://habr.com/ru/post/460397/