How to read modular JavaScript files using require

require is usually used to read modular JavaScript files. In this article, we will introduce to you how to use require to read modular JavaScript files.

Usually, when reading JavaScript programs, we use script tags to describe HTML, but if JavaScript is run separately on the server side, such as Node.js, then Script tag cannot be used. Therefore, a modular JavaScript file can be read from it and executed.

Let’s first take a look at the basic usage of require

require in Node.js is a method that can be used on the JavaScript side for modules read by npm.

var 变量 = require( 模块名称 );

In the above code, we only need to specify the name of the module to be loaded as the require parameter.

Since the loaded module is stored in the specified variable, it is similar to creating a generic JavaScript instance.

This way you can use JavaScript alone to read and use the module (library) without using the script tag.

Let’s seeHow to load the module?

Look at the example below

var gulp = require('gulp');
gulp.task('clean', function() {
    //在此描述gulp的处理
});

In this example, you can see that gulp is specified as the module name to be read in the require parameter.

With this, you can use gulp on the JavaScript side and then write the task process you want to automate.

How to use RequireJS?

Use RequireJS to read JavaScript files

How to use Require on the front-end browser

As JavaScript files are split and the number increases, managing them using just script tags becomes difficult.

However, the front end (browser) does not provide the use of require files like Node.js.

Therefore, a library called RequireJS can be used.

This allows us to load files through the front-end require.

However, since the syntax (writing) is slightly different, please check the following examples carefully!

require(加载的文件名,函数处理)

One thing that is different is that the JavaScript file to be read is specified in the first parameter of require; it can be specified as an array, so it can even support multiple file reading.

After that, we write JavaScript code based on the file read in the function processing of the second parameter.

How to load JS files using RequireJS

When loading with RequireJS, it is necessary to describe the code of the original JavaScript file in define().

For example, create a file called sample.js and write it as follows.

define(function() {
    return function(num) {
 
        return num * num;
 
    };
});

This is a simple function that can square any number.

This is done by describing this process in define() and returning it using "return".

Next, use require to read sample.js, as follows.

require(['sample'], function(num) {
 
  var result = num(10);
  
  console.log(result);
 
});

Execution results

100

You can see that it is set by setting "sample" as the file name as the first parameter of require and returning square in the function.

By writing num(10), you can use the function defined in "sample.js".

Check the execution results and you can see that the square value has been obtained!

The above is the detailed content of How to read modular JavaScript files using require. For more information, please follow other related articles on the PHP Chinese website!