Asynchronous module definition (AMD) is a specification for the programming language JavaScript. It defines code modules and their dependencies, and loads them asynchronously in on demand basis.
If you need more information. Refer https://requirejs.org/docs/whyamd.html.
GIT-SRC: https://github.com/andiappan-ar/AMD-REQUIRE-JS
As part of this sample created few components and their related JavaScript's. Using Require JS implemented AMD implementations.
All of the components related module JavaScript & their dependencies will load on demand basis.
Sample ASP.NET MVC project consists totally 3 modules pages(AboutUs, ContactUs, Roles) and home page. In home page will have all the modules.
First we have to include require plugin inside head tag. As mentioned below,
<!DOCTYPE html>
<html lang="en">
<head>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="/scripts/main/main" src="/scripts/main/require.js"></script>
</head>
This will treat main.js as a entry point of your application. Now in main js import the common dependencies.
Note: In real-time application main js will have all the common module initialization.
SRC: https://github.com/andiappan-ar/AMD-REQUIRE-JS/blob/master/AMD-REQUIREJS/Scripts/main/main.js
In the sample main.js importing layout related scripts & bootstrap JS. This two dependencies will use across all the pages. So its imported in layout JS.
You can import your local files or CDN as well like below,
requirejs([
"/scripts/main/components/layout.js", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
], function (util,boot) {
});
As shown like below home page will load all the modules JavaScript and their dependencies.
All the component specific dependencies will be import under every component. In sample ContactUs component requires jquery plugin & contactus.js , So this can be import like below in Contactus.cshtml.
requirejs([
"/scripts/main/jquery-3.4.1.min.js", "/scripts/main/components/contactus.js"], function ($, about) {
});
As showed image below , only component specific JavaScript & their dependencies will load on demand basis.
