JS modularity-RequireJS

Today I bring you JS modularization-RequireJS. What are the precautions about JS modularization and how to use RequireJS? The following is a practical case, let’s take a look.

I have always heard of RequireJS before, but I have never had the opportunity to understand it. I only know that it is an API for modularization of js. I'm working on React recently, and its componentization ideas coincide with js modularization ideas. I just want to add RequireJS to the project while applying React to see if it will have a good effect on page loading or development.

What is RequireJS?

Before explaining what RequireJS is, I have to mention the background of the history of Javascriptmodularization. In fact, in the early days, JavaScript emerged as an emerging scripting language with a huge vision. It was not a language designed only for the client. It’s just that with the popularity of web applications later, JavaScript quickly spread as a browser-side scripting language, and the competition between Netscape and Microsoft standardized it prematurely. This has led to many defects of JS, one of which is modularity (but you can be surprised to find that javascript actually uses import, export, etc. as reserved words, which shows that it was actually considered during the design. The new standard es6 also allows native Supports modularization). Then as web applications become more and more complex, more and more JavaScript codes are embedded, and with the rise of node, modular programming becomes a must.

So there was the module system later supported by the Dojo toolkit and Google's Closure library. There are also two very common standards specifications, CommonJS and AMD. I won’t go into details here. We only need to know that the API that implements the CommonJS specification loads modules synchronously, while the API that implements the AMD specification loads modules asynchronously.
So theoretically speaking, the non-blocking loading of AMD specifications is more suitable for the browser side. RequireJS is the best implementation of the AMD specification. Copy a description of RequireJS from an official document:

RequireJS is a JavaScript module loader. It's great for use in the browser, but it can also be used in other scripting environments, like Rhino and Node. Using RequireJS to load modular scripts will improve the loading speed and quality of your code.

Why RequireJS?

So, now that we know what RequireJS does, we almost know why we use RequireJS. But let’s summarize the benefits of using RequireJS.

Asynchronous "loading". We know that websites usually put the script at the end of the html, so as to avoid page blocking caused by the browser executing js. Using RequireJS, the callback function will be executed after the relevant js is loaded. This process is asynchronous, so it will not block the page.

Load on demand. Through RequireJS, you can load the corresponding js module when you need to load the js logic, thus avoiding a large number of requests and data transmission when initializing the web page. Perhaps for some people, some modules may not be available at all. If it is needed, then it seems unnecessary.

More convenient module dependency management. I believe you must have encountered dependency errors due to script tag order issues. This function is undefined, that variable is undefined, and so on. Through the mechanism of RequireJS, you can ensure that relevant files are executed after all dependent modules are loaded, so it can play a role in dependency management.

More efficient version management. Think about it, if you still use a script script to introduce a jQuery2. Go modify these 100 pages. But if your requireJS has jQuery path mapping in the config, then you only need to change one place.

Of course, there are other advantages such as cdn unable to load js files, local files can be requested, etc., which will not be listed here.

RequireJS Use

Files that need to be introduced in the page

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

Using RequireJS, you only need to introduce a require.js. It should be noted that a better practice is that you should only introduce this js through the