ES6 modular

Tips ： When the article is finished , Directories can be generated automatically , How to generate it, please refer to the help document on the right

List of articles

Catalog

List of articles

1. Modular classification

2. Modular features

3.export export

4.import Import

5.  hold js Script written in the page 3 Ways of planting

 6. Introduce on demand 、 Import on demand

---

1. Modular classification

   ES6 The introduction of modularity , Its design idea is to be able to determine the dependency of modules at compile time , And the input and output variables .

   ES6 The modularization of is divided into export （export） And Import （import） Two modules .

2. Modular features

（1）ES6 The module automatically turns on strict mode , Whether you have Add use strict;.

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

 （3） Each module has its own context , The variables declared in each module are local variables , Does not contaminate the global scope .

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

3.export export

         And default Associated use , And one js Module There can only be one export default sentence

var obj={name:"karen"}

export var num=100

export function  tool () {return obj}

// Separately exported   The exported identifier must be used to import on demand , There can be multiple separate exports

// The default is derived There can only be one or... In this file 0 individual

var a=20

var arr=[100,203,4]

var fm=()=>{}

export default {a,arr,fm,num,tool}

4.import Import

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

• The singleton pattern ： Repeat the same sentence several times import sentence , that It's only going to be executed once , It's not executed many times .import The same module , Declare different interface references , Will declare the corresponding variable , But only once import

give an example ：

<script type="module">
	import People from './js/myModule.js';
	let p = new People();
	p.say();
</script>

5.  hold js Script written in the page 3 Ways of planting

1. Inline :js The engine is going to execute some of the tags ( event ) Properties of the

 

 2. The embedded

3. Import src My address is a js The path of Will load js code (jsonp)

 6. Introduce on demand 、 Import on demand

   import x,{num,tool} from "./src/model1.js"

            console.log(num)

            console.log(tool)

            console.log(obj)

            var re=tool()

            console.log(re)

            console.log(x.arr)

            import {tool} from "./src/model1.js"

            import x from "./src/model1.js"

            x.tool

            import Hq from './src/model1.js'

            console.log(Hq.Photo)

            import {Photo as a} from './src/model1.js'

            let a=Photo

            console.log(Photo.name)