As the website functions gradually become richer, the js in the web pages have become more and more complex and bloated. The original method of importing js files through script tags can no longer meet the current Internet development model. We need a series of complex needs such as team collaboration, module reuse, unit testing, etc.
RequireJS is a very small JavaScript module loading framework and is one of the best implementers of the AMD specification. The latest version of RequireJS is only 14K after compression, which is very lightweight. It can also work in conjunction with other frameworks, and using RequireJS will surely improve the quality of your front-end code.
What benefits can requirejs bring
Official description of requirejs:
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
General meaning:
In the browser, it can be used as a module loader for js files, or it can be used in Node and Rhino environments, balabala... This passage describes the basic function of requirejs "modular loading". What is modular loading? We will explain one by one from the following page
Let’s first look at a common scenario, and explain how to use requirejs through examples
Normal writing method
index.html:
<!DOCTYPE html><html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body</span> </body></html>
a.js:
function fun1(){ alert("it works");} fun1();Maybe you prefer writing this
(function(){ function fun1(){ alert("it works"); } fun1();})()The second method uses block scope to declare that function prevents polluting global variables. The essence is still the same. When running the above two examples, I don’t know if you noticed that when alert is executed, the html content is blank, that is, <span>body</span> is not displayed, and it only appears after clicking confirmation. This is the result of JS blocking the browser rendering.
Requirejs writing method
Of course, first of all, you need to go to the requirejs website to download js -> requirejs.rog
index.html:
<!DOCTYPE html><html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body></html>
a.js:
define(function(){ function fun1(){ alert("it works"); } fun1();})The browser prompts "it works", which means it runs correctly, but there is a little difference. This time the browser is not blank, and the body has appeared on the page. So far, we can know that requirejs has the following advantages:
1. Prevent js loading from blocking page rendering
2. Load js using program calls to prevent the following ugly scenes
<script type="text/javascript" src="a.js"></script><script type="text/javascript" src="b.js"></script><script type="text/javascript" src="c.js"></script><script type="text/javascript" src="c.js"></script><script type="text/javascript" src="d.js"></script><script type="text/javascript" src="e.js"></script><script type="text/javascript" src="f.js"></script><script type="text/javascript" src="f.js"></script><script type="text/javascript" src="g.js"></script><script type="text/javascript" src="h.js"></script><script type="text/javascript" src="i.js"></script><script type="text/javascript" src="j.js"></script>
The above is all about this article. I hope it will be helpful to everyone to understand the required.js modular tool.