مكونات الويب و IoC

من الميزات الرائعة لمكونات الويب ، أو بالأحرى HTML ، القدرة على التفاف المحتوى الموجود بشفافية بمحتوى جديد. بفضل هذا ، يمكنك تعديل الشفرة القديمة الحالية تقريبًا بشكل غير جراحي ، بالإضافة إلى هيكلة الرمز الجديد بأناقة.

على وجه التحديد ، إذا قمت بلف بعض التخطيط بالعنصر المخصص الخاص بك (google.Custom Elements) ، ثم التكوين في ربط connectCallback () ، يمكن لعنصرك تحديد العناصر الفرعية الموجودة بداخله وتكوين خاصته وعملهم وفقًا لذلك إذا كنت بحاجة إلى تكييفهم متطلبات جديدة وسيكون هذا قرارًا مؤهلًا من الناحية المعمارية. سيتلقى أيضًا أحداثًا منبثقة من عناصره الفرعية ، وإذا قمت بتمكين عزل شجرة الظل ، فسيصبح وسيطهم غير المتنازع عليه (وإذا لم يتم تمكينه ، وكيل شفاف) ، منذ خارج حدوده ، لن يخرجوا وكل المسؤولية ستقع عليه. 

في إحدى المقالات السابقة "WebComponents كإطار عمل لتفاعل المكونات" ، والتي يمكنك قراءتها على https://habr.com/en/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/