Scribd
Upload
8 views2 pages

loadComponent Function Explained

The document explains the JavaScript function 'loadComponent', which dynamically loads HTML and JavaScript files for components based on the provided name. It fetches the HTML content, converts it to text, injects it into a specified div, and then adds the corresponding JavaScript file. This allows for on-the-fly loading of components in a web application.

Uploaded by

xihew59374
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views2 pages

loadComponent Function Explained

The document explains the JavaScript function 'loadComponent', which dynamically loads HTML and JavaScript files for components based on the provided name. It fetches the HTML content, converts it to text, injects it into a specified div, and then adds the corresponding JavaScript file. This allows for on-the-fly loading of components in a web application.

Uploaded by

xihew59374
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

🔍 Understanding loadComponent

Function
• We will now break down the JavaScript
function step by step...
📦 loadComponent Breakdown
export function loadComponent(name) Defines a function named 'loadComponent'.
{ It takes 'name' (like 'login') as input.
fetch(`components/${name}/$ 1. Fetches the HTML file of the component.
{name}.html`)
.then(res => [Link]())
2. Converts the fetched content to text.
.then(html => { 3. Injects HTML into the <div id='app'>.
4. Dynamically adds the component's JS file.
[Link]('app').inner This lets you load HTML+JS on the fly!
HTML = html;
const script =
[Link]('script');
[Link] = `components/$
{name}/${name}.js`;

[Link](script);
});
}

You might also like