New modularity in ES6

Before introducing modularity , Introduce the outside js File by <script src=" File path "></script>

Imported through this method js file ,js Global variables declared in the file Will pollute the present html Global of files .

stay ES6 when , Modularity is introduced to solve this defect , Each module has its own context , The variables declared in each module are local variables , Does not contaminate the global scope .

Modular features ：

1、 Avoid global pollution of variables ;

2、ES6 The module automatically turns on strict mode , Whether or not you add 'use strict';

3、 Various types of variables can be imported and exported in the module , Such as function , object , character string , Numbers , Boolean value , Class etc. ;

4、 Each module is loaded only once （ Is a singleton ）, If you load the same file in the same directory , Read directly from memory .

Modularity is divided into import and export modules

export （export）

There are two kinds of export     Separate export and default Export （ And default A combination of ）

Those exported separately must be imported on demand with the exported identifier , There can be multiple separate exports ;

export default The default is derived Only one or... Can be exported 0 individual .

<script>
    // There can be many separate exports  , You can export all kinds of data 
    export var a=10
    export var fn=function() {}
    export var arr=[1,2,3]
    export var obj={name:"xl",age:11}
    // wait 
    
    // The default export can only have one 
    export default {a,fn,arr,obj}
 // What is exported here is an object , It contains every previous item of data , This is written in es6 New object literal , Variables can be written directly into objects {a} Is equal to {a:10}
</script>

  When a module is exported , You need to use the data of this module , Import the exported module in the file .

Import （import）

import And from Associated use , here script Labeled type Must be set to module ,

Such as <script type="module"></script>

  Use format ：

import Received identifier form " Path to export file "

explain ： If it is exported separately , Here, the identifier of the receiving setting must be the same as the exported identifier and written in {} Inside , The exported by default is not required .

Code instructions

file 1.js：

    export var a=10

  file 2：

<script type="module">
   import {a} from "./ file 1.js" // Suppose you are in the same folder 
    // You can use a 了 
    console.log(a) //10
</script>

When there are many data exported separately , We don't have to write much import, Just according to our needs , Write the exported identifier in { } Separated by commas, import on demand , Code instructions ：

file 3.js：

     var obj={name:"karen"}
     export var num=100
     export function  tool () {return obj}
     export var arr=[1,2,3]
     export var str = "hello world"

  file 4：

<script type="module">
    // Import according to the data we need , Note that the identifier here should also be the same 
   import {num,tool,str} from "./ file 3.js" // Suppose you are in the same folder 
    console.log(num) //100
    console.log(tool()) //{name1:"karen"}
    console.log(str) //hello world
</script>

When we export an object data by default , I can use   A custom identifier receives , When you need the data inside , Directly use grammar sugar point grammar to get .

for example ：

file 5.js:

     var obj={name:"karen"}
     var num=100
     function  tool () {return obj}
     var arr=[1,2,3]
     var str = "hello world"
     export default {num,tool,arr,str}

  file 6：

<script type="module">
    
   import con from "./ file 5.js" // Suppose you are in the same folder   use con The recipient 
    // Use num data 
    console.log(con.num) //100
   // Use str data 
    console.log(con.str) //hello world
</script>