Summary of Require.js/AMD modular loading usage cases in javascript

Require.js/AMD Modular Loading

Developers want to use script loaders to make chaotic rich script applications more orderly, and Require .js is one such option. Require.js is a powerful toolkit that automatically works with AMD technology to smooth out even the most complex script dependency graphs.
Now let’s look at a simple script loading example using the function of the same name in Require.js.

require(['moment'], function(moment) {
  console.log(moment().format('dddd')); // 星期几
});

require function accepts an array of module names and loads all these script modules in parallel. Unlike yepnope, Require.js does not guarantee that the target scripts are run in order, but only ensures that their running order can meet their respective dependency requirements, but only if the definition of these scripts complies with AMD (Asynchronous Module Definition, asynchronous module definition) specifications.

Case 1: Loading JavaScript files

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

As shown in Case 1, there are two JavaScript files a. js and b.js respectively define two methods myFunctionA and myFunctionB. You can use RequireJS to load these two files in the following way. The code in the function part can reference the methods in these two files.

The string array parameter in the require method can allow different values. When the string ends with ".js", or starts with "/", or is a URL, RequireJS will It is considered that the user is loading a JavaScript file directly. Otherwise, when the string is similar to "my/module", it will think that this is a module, and will load the JavaScript where the corresponding module is located based on the baseUrl and paths configured by the user. document. The configuration part will be introduced in detail later.

It should be pointed out here that RequireJS does not guarantee that myFunctionA and myFunctionB must be executed after the page is loaded by default. When there is a need to ensure that the script is executed after the page is loaded, RequireJS provides a For the independent domReady module, you need to go to the RequireJS official website to download this module. It is not included in RequireJS. With the domReady module, the code in Case 1 can be slightly modified and added with a dependency on domReady.

Case 2: Execute JavaScript after the page is loaded

##

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

Execution case After the second code, you can see through Firebug that RequireJS will insert a 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag for a.js and b.js on the current page, which is used to download JavaScript files asynchronously. The async attribute is currently supported by most browsers, which indicates that the js file in the 27835793f4768f4164d1421d99e293bc tag will not block the download of other page content.

Case 3: RequireJS inserted 3f1c4e4b6b16bbbd69b2ee476dc4f83a

##

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 
 data-requiremodule="js/a.js" src="js/a.js"></script>

AMD implements a Require. js is responsible for providing a global function named define, which has three parameters:

module name,

• module dependency list,

• Callback triggered at the end of loading of those dependent modules.
Use RequireJS to define JavaScript modules

The JavaScript module here is different from traditional JavaScript code in that it does not need to access global variables. The modular design allows JavaScript code to pass these "global variables" as parameters to the implementation body of the module through dependencies when it needs to access "global variables", thus avoiding the need to access or declare global variables in the implementation. Variables or functions, effectively avoiding large and complex namespace management. As stated in the AMD specification of CommonJS, defining JavaScript modules is achieved through the define method. Let's first look at a simple example. In this example, by defining a student module and a class module, the student object is created in the main program and the student object is placed in the class.


Case 4: student module, student.js

##

define(function(){ 
   return { 
    createStudent: function(name, gender){ 
       return { 
         name: name, 
         gender: gender 
       }; 
    } 
   }; 
 });

Case 5: class module, class.js

 define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

Case 6: Main program

 require(["js/student", "js/class"], function(student, clz) { 
   clz.addToClass(student.createStudent("Jack", "male")); 
   clz.addToClass(student.createStudent("Rose", "female")); 
   console.log(clz.getClassSize()); // 输出 2 
 });

student module and class module are independent modules. Next we define a new module, which depends on student and class modules. class module, so that the logic of the main program part can also be packaged.

Case 7: Manager module that relies on student and class modules, manager.js

##

define(["js/student", "js/class"], function(student, clz){ 
  return { 
    addNewStudent: function(name, gender){ 
    clz.addToClass(student.createStudent(name, gender)); 
    }, 
    getMyClassSize: function(){ 
    return clz.getClassSize(); 
    } 
   }; 
});

Case 8: New main program

require(["js/manager"], function(manager) { 
   manager.addNewStudent("Jack", "male"); 
   manager.addNewStudent("Rose", "female"); 
   console.log(manager.getMyClassSize());// 输出 2 
 });

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。

The above is the detailed content of Summary of Require.js/AMD modular loading usage cases in javascript. For more information, please follow other related articles on the PHP Chinese website!