Most of the projects use modular development, requiringJS is a model for AMD module development, so it is necessary to learn it. By using requireJS step by step to write demos, we can learn the overall development process of requireJS and some of the feelings of using requireJS by yourself.
AMD: A mechanism for asynchronous loading of JavaScript code based on modules. It recommends developers to encapsulate JavaScript code into modules, and the dependence on global objects becomes a dependence on other modules, without declaring a lot of global variables. Resolve dependencies of individual modules through delay and on-demand loading. The benefits of modular JavaScript code are obvious. The loose coupling of various functional components can greatly improve the reusability and maintainability of the code. This non-blocking concurrent fast loading of JavaScript code enables other UI elements on the web page that do not rely on JavaScript code, such as pictures, CSS and other DOM nodes, to load first, the web page loads faster and users also get a better experience.
1. Download requieJS
Before modular development with requieJS, we need to prepare something. That must be downloading the require.js file, hahaha, because it was developed based on it.
2. Create an HTML file
After creating an HTML file, importing requireJS must use the <script> tag, there is no doubt about this. Then there is a data-main attribute in this tag. Its function is to act as an entrance and exit, that is, after loading requireJS, enter from the data-main attribute.
For example, the following is:
<!DOCTYPE html> <head> <title>require</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <!--This is requireJS, data-main is used as the entry module, here is js/main--> <script data-main="js/main" src="js/require.js"></script> </body></html>
When I load js/require.js, then I go to execute js/main's js file. main is also a js file. We can omit its .js suffix and requireJS will add it.
3. data-main
After the program executes <script data-main='js/main' src='js/require.js'></script>, enter main.js through data-main and execute main.js. So what is in main.js?
Please see the code:
/* require.config execute baseUrl as 'js', baseUrl refers to the root directory of the module file, which can be an absolute path or a relative path*/require.config({ baseUrl: 'js', paths: { jquery: 'jquery-1.8.2.min' }});/* Here, monkey.js is introduced through require, and then parameters are assigned to them through the anonymous function, such as monkey-->mk*/require(['monkey'],function(mk) { mk.init(); });From the above code, you can see that main.js contains two modules: require.config and require.
The function of require.config is to configure some parameters of requireJS and then refer to it publicly.
For example, the function of the above baseUrl is to use it as the base path and search for files under this path. I put all .js files in the js folder. Therefore, after configuring this property, the subsequent files will search for content in the js path.
as follows:
require(['monkey'], function(monkey){ monkey.init();});When it refers to monkey, it is the reference monkey, not js/monkey.
What is the role of paths? It is to replace some commonly used js files with common names. For example, jquery-1.8.2.min.js, we cannot write this every time we call it, so for convenience, we replace jquery-1.8.2.min.js. In the future, we can use jquery directly, which is fast and convenient.
Okay, require.config is basically familiar with it. In a word, its function is to configure requireJS.
What about required?
The function of requires is to execute. For example, here I only need monkey.js to execute, so I imported monkey and then obtained the return value after monkey execution through the mk parameter. If there is a return value, then we can do the corresponding processing of mk.
Hey, what is inside the monkey?
Let's take a look:
/* define parameter is an anonymous function, which returns an object*/define(['jquery'],function($){ var init = function(){ console.log($.browser); }; return { init: init };});define! Its function is to define a js module for use by other modules or require. Its method of referring to other js modules is similar to that of require. It introduces the required js files and then corresponds to the parameters one by one. It is important to note that other modules cannot access the methods or variables defined in define, so if you want other modules to be able to access them, you can throw the corresponding method out (return) objects or functions. Here, what I return is an object that provides init for other modules to call.