💜 📇 🖕🏽 WebコンポーネントとIoC 🈹 🧓🏽 🏿

Webコンポーネント、またはHTMLの優れた機能は、既存のコンテンツを新しいコンテンツで透過的にラップする機能です。このおかげで、既存のレガシーコードを実質的に非侵襲的に変更できるだけでなく、新しいコードをエレガントに構成することもできます。

具体的には、カスタム要素（google.Custom Elements）でレイアウトをラップし、connectedCallback（）フックで構成すると、要素は内部にあるサブ要素を判別し、それらを適応させる必要がある場合は、それに応じて独自のサブ要素とその動作を構成できます。新しい要件とそれはかなり建築的に有能な決定になります。また、サブ要素からポップアップイベントを受信し、シャドウツリーの分離を有効にしている場合は、競合しないブローカーになります（有効にしていない場合は、透過プロキシ）。それを超えて、彼らは出現せず、すべての責任は彼にあります。

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

WebComponentsのクイックスタート-https ： //habr.com/ru/post/460397/

WebコンポーネントとIoC

More articles: