Brief introduction and use of require. js and brief introduction of require. js

Brief introduction and use of require. js and brief introduction of require. js

Official Website: http://www.requirejs.org/

RequireJS is a JavaScript file and module loader.

Restore the source of the requirement: at the beginning of a Web page, all js Code is written in a file, as long as this one is loaded. As applications become more complex and Code increases, one file is not enough. For various reasons, it must be divided into multiple files and other frameworks are used. In this way, multiple js files must be loaded. One problem is that when loading, the browser will stop rendering the web page. The more loading, the longer the response is lost. In addition, there is a dependency between js files, therefore, to ensure the Loading Order, it is difficult to write and maintain code when the dependency is complex. To solve the above problems, a project like require. js was born.

Example:

<! Doctype html> 
The data-main attribute of the script tag in the code above is the js file (main. js) to be loaded after require. js is loaded)
Next is main. js,
require.config({   paths: {     jquery:[       'http://cdn.staticfile.org/jquery/1.11.1/jquery.min',       'http://cdn.bootcss.com/jquery/1.11.1/jquery.min'    ]  }});require(['jquery'],  function(_jj) {     alert(_jj.fn.jquery);  });
You can use the require. config () method to customize the module loading behavior. The require. config () parameter is an object. The paths attribute of this object specifies the loading path of each module. Here is the online address referenced directly (remove the. js suffix ).
The require () function accepts two parameters. The first parameter is an array that indicates the dependent module. The second parameter is a callback function. After all the specified modules are loaded successfully, it will be called. The loaded module will pass in the function as a parameter, so that these modules can be used within the callback function. When require () asynchronously loads jquery, the browser does not lose the response. The callback function specified by require () runs only after the previous modules are loaded successfully, solving the dependency problem.
If main. js is just,
require(['jquery'],   function(_jj) {     alert(_jj.fn.jquery);  });
By default, it loads the jquery. js file in the same directory as main. js. If the directory is not the same, it is necessary to use the require. config () method. You can also use baseUrl to change the base directory.
Here is a brief description of the shim parameter. Theoretically, the module loaded by require. js must be a module defined by the define () function according to AMD specifications. But more popular databases do not exist. Therefore, before such modules are loaded with require (), some of their features must be defined first.
Finally, require. js requires that each module be a separate js file. In this way, if multiple modules are loaded, multiple HTTP requests will be sent, which will affect the webpage loading speed. Therefore, require. js provides an optimization tool, r. js. After the module is deployed, you can use this tool to merge multiple modules into one file to reduce the number of HTTP requests.

Front-end require js usage Problems
Obviously, the dependency file can only be loaded before the code is executed at the bottom. You can use require to load the code at the bottom, put the code after the dependent file, and put it in window. onload = function () {here}

Differences between php require include require_ones
When an include () error occurs, skip this step and continue executing the subsequent code. Require () died when an error occurred.
Require_ones checks whether the file is included. If the file is not included, the file is included. If the file is included, the file is ignored.