ES6——模块化

注意：模块化定义与使用，需要在服务器环境下。

定义与使用

在js文件中定义

export let a=1; export const b=2; export const c=3;

或者

let a=1; const b=2; const c=3; 

export{a,b,c}

在html文件中使用

<script type="module">

      import {a,b,c} from './modules.js';//引入模块中多个具体的变量等等

</script>

---

也可以使用别名：

let a=1; const b=2; const c=3;

  export{a as aa, b as bb, c as cc}

<script type='module'>

    import {aa,bb,cc} from './modules.js';//引入模块中多个具体的变量等等

</script>

或者

let a=1; const b=2; const c=3;

export{a as aa, b as bb, c as cc}

<script type='module'>

import {aa as a,bb as b,cc as c} from './modules.js';//引入模块中多个具体的变量等等

</script>

或者

<script type="module">

    import * as mod from './mod.js';

    console.log(mod.a);

</script>

也可以配合default定义

export default 12;//注意区别

  export let b=12;

  export let c=17; 

<script type="module">

import a,{b,c}from './mod.js';//注意区别，不带{ }

console.log(a,b,c);

</script>

也可以结合Promise.all()使用:

<script type="moudle">

    Promise.all([

         import("./mod1.js");

         import("./mod2.js");

        ]).then(([mod1,mod2])=>{

            console.log(mod1,mod2);

        })

</script>

特点

a).import可以是相对路径，也可以是绝对路径。

        import  'https://code.jquery.com/jquery-3.3.1.js';

b).import模块只会导入一次，无论你引用多少次。但是，导出去的模块内容中，如果里面有定时器动态更改数据，外面也会跟着动态更改。

c).import  './modules.js'; 这样相当于引入文件。

d).import会自动提升到顶部，首先执行。

e).默认import语法不能写到if之类的语句里面，要想实现按需加载模块，可以使用import( ) ，类似node里面require，其优点：1、可以动态引入模块，2、可以写入if等语句，3、路径也可以写成动态的。例如：

import('./mod.js').then(res=>{

    console.log(res.a,res.b);

})

或者

import('https://code.jquery.com/jquery-3.3.1.js').then(res=>{

    $(function(){

        $('body').css({

                background:'gray';

          })

    })

})

使用方式小综合：

html中：

<script type="module">

import mod,{show,sum,a,b} from './mod.js';

let p1=new mod.Person('yangyi','18');

console.log(p1.showName());//我的名字是yangyi,我今年18岁

console.log(show());// 执行了show

console.log(sum());//333

console.log(a,b);//111 222

</script>

mod.js中：

import {a,b} from './mod2.js';

class Person{

constructor(name,age){

this.name=name;

this.age=age;

}

showName(){

return `我的名字是${this.name},我今年${this.age}岁`;

}

}

const show=()=>{

return '执行了show'

};

const sum=()=>{

return a+b;

}

export{

a,

b,

show,

sum

}

export default{

Person

}

mod2.js中：

const a=111;

const b=222;

export{

a,

b

}