Usage examples of using the RequireJS library in ASP.NET MVC projects_javascript tips

RequireJS is a popular tool for front-end modular development. It is a Javascript library file, namely require.js.
Main functions of RequireJs:

(1) Implement asynchronous loading of js files to avoid web pages losing response;

(2) Manage dependencies between modules to facilitate code writing and maintenance.

There are many tools for front-end modular development, which are generally divided into two categories. One is high-end tools like dojo, which has built-in modular development components after dojo v1.8; the other is tools like require .js, sea.js is a tool that focuses on modular development.

From the rules of modular division, it is mainly divided into two categories: AMD and CMD. Dojo and require.js follow the former, while sea.js follows the CMD specification.

require works well in single-page applications. However, for traditional multi-page applications, using require can be somewhat confusing and inconvenient.

This article explains how to apply require in the structure of ASP.NET MVC, and provides a compression script to achieve semi-automatic compression.

Separate js code
Generally speaking, a route in ASP.NET MVC corresponds to a view. The file structure of the view may be as follows:

Views
 |--Shared
 |--_layout.cshtml
 |--Home
 |--Index.cshtml
 |--Blog
 |--Create.cshtml
 |--Edit.cshtml
 |--Detail.cshtml
 |--Index.cshtml

It is assumed that _layout.cshtml is shared by all pages. Under normal circumstances, we will reference public js libraries in _layout, such as jQuery, bootstrap, etc., so that other pages do not need to reference these libraries again, which improves coding efficiency. However, different pages will eventually rely on different js, especially custom js that implements the functions of the page itself. In this way, we have to reference special js in other pages, or even write js directly in the page, such as the following code Often appears in View:

<script type="text/javascript">
 $(function(){...});
</script>

This will cause the page to be confusing, and the code in the