Introduction to RequireJS - Implementation of the first example_javascript skills

Why learn RequireJS?

A novice like me will mention AMD, JS modular programming, asynchronous... etc. mentioned in tons of articles

RequireJS lets you write JavaScript differently than usual. You will no longer use script tags to introduce JS files in HTML and manage dependencies through script tag order.

RequireJS is a Javascript file and module framework that can help us manage js code (my understanding).

With in-depth study, we will be forced to accept a series of nouns: data-main, require, define, baseUrl, paths, shims, deps. . . Wait;

In short, many articles are selling us terms and concepts that we don’t even understand.

Keep it simple, now we have to make a simple requirement, use RequireJS to manage our js code, and be able to use jquery!

1. Build a web project and run it!

The files inside are as shown below:

There are a lot of pitfalls here, so I put all the files in the file root directory to eliminate these small problems first!

Among them, jquery.js and require.js need to be downloaded from the website. Please Baidu.

2. Add script tag

in index.jsp

You can add a tag in 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846beeRequireJS asynchronous loading test94b3e26ee717c64999d7867364b1b4a3

3. Supplement the main.js file

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. Run~

You will see a pop-up box and the page has been rendered showing "RequireJS Asynchronous Loading Test".

Summary:

a. RequireJS was created by James Burke, who was also the founder of the AMD specification. It is a tool library for client-side module management.

From this example:

1. When the alert pops up, the page is also rendered at the same time, which reflects the asynchronous loading function. The traditional writing method in the head will cause blocking. The page can only be rendered after clicking OK.

2. The page only needs to introduce a require.js, and there is no need to introduce other complicated js codes. The rest of the work is left to the RequireJS framework!

b. Before learning, first understand the AMD specifications. AMD defines modules through define. The basic mode: define("id",[deps1,deps2,...],callback);

Why can this example run without define? Because jquery provides support for AMD. The path object is used to introduce various modules.

Can ordinary js code be managed by RequireJS? Yes, use shims to load these resources!

c. Summarize future coding ideas:

                  Functions and variables in each module.

d. Implement it yourself: Add a button to the page; add juqery's click listening event to main.js and test whether the monitoring is successful!

e. Remaining issues: path problem, it definitely cannot be in the root directory, but this is not a problem!

This article is the entire description of the first example of getting started with RequireJS. I hope it will be helpful to everyone.