To review how require.js is written, let’s say we have two more js files index.js and content.js and then use the return result of content.js in index.js to look at the case require.js

    // Define first
        //content.js
    define(function(){                           // Use define to define a module
        return "Acquisition of Tencent" 
    })
    / / then the require
        //index.js
    require(["./cononent.js"].function(animal){  // use require to get the module and return it as an argument
        console.log(animal)  // Acquire Tencent
    })
Copy the code

CommonJS says this

    //index.js
    var animal = require("./content.js")
    //content.js
    module.exports = "Acquisition of Tencent"
Copy the code

Es6 writing

    //index.js
    import animal from "./content"
    //content.js
    export default "Acquisition of Tencent"
    // There are three types of modules listed here
Copy the code

The export command

Module functions are mainly composed of two commands export && import 1- export specifies the external interface of the module. Export is responsible for modularity and modularity output. 2-import is responsible for input 3- The export command is used to define the external interface of the module, so that other JS files can load the module through import

    // the temp.js file then outputs a module variable in the file to modularize a variable
    export var a = "chang";
    //index.js file as import
    import {a} from "./temp.js";
    // This is the output and import of a concise module
Copy the code

Multivariable output

    // Declare 3 variables, we need to modularize these 3 variables, this time we can wrap them as objects.
    var a ='jspang';
    var b =Big brother;
    var c = 'web';
    export {a,b,c}
Copy the code

Modularized output of a function

export function add(a,b){
       return a+b;
}   
add(1.2)
Copy the code

The use of AS modifies the variable name

    // Give the module a more semantic name, rather than expose the variable names inside the module. In this case we can use as.
    / / can't use | | don't want to use the variable name used as Xxxx
    var a ='jspang';
    var b =Big brother;
    var c = 'web';
    export {
        x as a,     / /! Usually the variable is the original name but can be renamed using the AS keyword
        y as b,
        z as c
    }
Copy the code

The use of export default plus default is a default entry. There can only be one export default in a file.

Difference between export and Export default

1.export
        export var a ='Cdd';
        export function add(a,b){
            return a+b;
        }
                                     // The corresponding import mode
        import {a,add} form './temp';// Can also be written separately
        
2.export defalut
        export default var a='Cdd';
                                     // The corresponding import mode
        import str from './temp';
Copy the code

If you want the default output of the input JS (defalut) to be written outside the curly braces import animal,{say,type} from “./content” and the overall loading of the module, see Git for details

Understand the difference between import&&require

  • Import is loaded at compile time (more efficient) (since it is loaded at compile time, the import command will raise the top of the entire module)
  • Import ES6 module is not an object. (Es6 module itself cannot be referenced because it is not an object.) Because es6 modules are loaded at compile time, static analysis makes it possible to extend JS syntax

CommonJs module and ES6 module differences

Es6 automatically adopts strict mode regardless of whether "use strict" is added to the header of the module. 3. Commonjs modules output a copy of a valueCopy the code

// Strict mode // Variables must be declared after use // function parameters must not have the same attribute or an error // cannot use the with statement // Read-only attributes cannot be assigned or an error // Undeletable attributes cannot be deleted or an error // Variables cannot be deleted // Eval does not hi reference variables eval and arguments in its outer scope cannot be reassigned //arguments does not automatically reflect changes in function arguments cannot use argments.callee argments.caller // disallow this Point to global objects // etc… !!!!! Note that this’ refers to undefined in es6 modules, meaning that this should not be used in top-level code