The difference between require and import

Before es6, js has not had its own module syntax. In order to solve this problem, there is a requirement for require.js. After the release of es6, js introduced the concept of import so that students who are not clear about the difference between the two have caused their own misunderstandings in the actual use process. After reviewing the relevant materials, they recorded their own small opinions.

• Basic syntax of require

Core concept: define module.export in the exported file, the type of the exported object is not limited (can be any type, string, variable, object, method), call the require() method in the imported file to introduce the object can.

//a.js
module.export = {
    a: function(){
     console.log(666)
  }
}

//b.js
var obj = require('../a.js')
obj.a()  //666

[Note]: Essentially, the object to be exported is assigned to the export attribute of the object of module. In other files, the attribute is accessed by the require method.

• Basic syntax of import
  Core concept: The exported object must correspond to the values ​​in the module.The exported object and the entire module are structurally assigned. Yes, you didn't get it wrong. Grasp the key points and deconstruct the assignment! ! ! ! !

//a.js
 Export default{ // (The most commonly used method, adding the default keyword means that you can use any variable name in import and don't need curly braces {})
     a: function(){
         console.log(666)
   }
}

 Export function(){ //export function

}

 Export {newA as a ,b,c} // Deconstructing the assignment syntax (as keyword indicates that the data interface that exposes newA as a is exposed to the outside, and the external cannot directly access a)

 //b.js
 Import a from '...' //import common syntax (requires export with default keyword) can arbitrarily specify the name of import

 Import {...} from '...' // Basically, the imported object needs to be destructured with the export object.

 Import a as biubiubiu from '...' //Use the as keyword, which means that a represents biubiubiu (this can be used to resolve conflicts when variable names have conflicts)

 Import {a as biubiubiu,b,c} //Other use of the as keyword

The difference between them

• Require is an assignment process and is executed at runtime, import is a destructuring process and is executed at compile time. Require can be understood as a global method, so it can even do the following operations, a method means that it can be executed anywhere. The import must be written at the top of the file.

var a = require(a() + '/ab.js')

• The performance of require is slightly lower than that of import, because require is introduced at runtime and is also assigned to a variable, and import only needs to import the specified module at compile time according to the interface in import, so the performance is slightly higher.

• The value exported after module.export in commom.js cannot be changed, but it is ok in the es6 export.

var a = 6
export default {a}
 a = 7 //export in es6 can

var a = 6
module.export = a
 a = 7 //This is wrong in common.js