Home > Developer > JavaScript
First contact with JS require. js modular tool, jsrequire. js
As Website Functions become more and more abundant, Javascript in Web pages become more and more complicated and bloated. The original method of importing js files through script tags cannot meet the current Internet development mode, we need a series of complex requirements such as team collaboration, module reuse, and unit testing.
RequireJS is a very small JavaScript module loading framework and one of the best practitioners of AMD specifications. The latest version of RequireJS is compressed with only 14 kb, which is very lightweight. It can work with other frameworks at the same time. Using RequireJS will definitely improve the quality of your front-end code.
What are the benefits of requirejs?
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.
Meaning:
In the browser, it can be used as a module loader for js files, or in the Node and Rhino environments, balabala .... This section describes the basic function "modular loading" of requirejs. What is modular loading? We will explain one by one from the subsequent sections
Let's take a look at a common scenario and explain how to use requirejs through examples.
Normal writing mode
Index.html:
<!DOCTYPE html>A. js:
function fun1(){ alert("it works");} fun1();Maybe you prefer writing like this.
(function(){ function fun1(){ alert("it works"); } fun1();})()The second method uses the block scope to declare the function to prevent global variables from being contaminated. The essence is the same. When running the above two examples, you do not know if you noticed that alert is executed, the html content is blank, that is, the <span> body </span> is not displayed. It appears only after you click OK. This is the result of JS blocking browser rendering.
Writing requirejs
Of course, you must first download js> requirejs. rog from the requirejs website.
Index.html:<!DOCTYPE html>A. js:
define(function(){ function fun1(){ alert("it works"); } fun1();})The browser prompts "it works", indicating that the operation is correct, but it is a little different. This time the browser is not blank and the body has already appeared on the page. So far, you 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 scenarios<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="d.js"></script><script type="text/javascript" src="e.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 the content in this article. I hope to help you understand the require. js modular tool.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
