ES6_模块化_noteimport优点:无论一个库导入多少次,只会执行一次import可以是绝对路径或者是相对路径im

####模块化

js不支持模块化
在es6之前,社区制定了一套规范:

规范	作用
Commonjs	主要用于服务端 nodejs require(‘http’)
AMD	requireJs,culJs
CMD	seaJs

es出来,统一服务端和客户端模块规范

注意:使用模块化需要放在服务器环境

如何定义模块:

// 此处可以是 let / const
export const a=12;

或者

<script >
// 使用 export default 出来的东西,则不需要使用 {}
export default 12;
export const e = 13;
export const b = 14;
export const c = 1;
</script>

或者

<script >
let a = 12;
let b = 13;
export {a, b};
</script>

如何使用模块:

注意:只要是 export 导出的东西,在使用时都要使用 {}

如果是使用 export default 出来的东西,则不需要

import优点:\

无论一个库导入多少次,只会执行一次

import可以是绝对路径或者是相对路径

import ‘./model.1.js’; 如果这样用,相当于引入文件

有提升效果,import会自动提升到顶部,首先执行

导入的模块,如果里面js的内容改了,外面的也会跟着改

在HTML中写入:

   <script type="module">
       import 绝对路径 / 相对路径    
       // 或者
       import {aaa, bbb, ccc} from './module/2.js';
       // 或者
       import * as modTwo from './module/2.js';
   </script>

在导入时起别名:

<script >
    import {aaa, bbb, ccc} from './module/2.js';
    console.log(aaa);
    console.log(bbb);
    console.log(ccc);
    console.log("split---");
    // 也可以在导入时起别名:
    import {aaa as a, bbb as b, ccc as c} from './module/2.js';
    console.log(a);
    console.log(b);
    console.log(c);
</script>

为模块起别名:

<script >
import * as modTwo from './module/2.js';
   console.log(modTwo);
</script>

一起使用 export default 导出东西的时候

<scripot>
   // import a from './module/3.js';
   //要使用 export default 和 export导出的东西的时候:
   import a, {e, b, c} from './module/3.js';
   console.log(a);
   console.log(e);
   console.log(b);
   console.log(c);
</scripot>

可以在导入的js源文件中再导入另一个js:

html文件:

<script type="module">
   import mod, {show, sum, e, f} from './module/4.js';

   let p1 = new mod.Person('张三', 18);
   console.log(p1.showName());
   show();
   sum();
   console.log('split---');
   console.log(e, f);
</script>

4.js文件:

import {e, f} from './5.js';

console.log('split---');

const a = 12;
const b = 15;

export {
   a,
   b,
   sum,
   show,
   e,
   f
}
const sum = () => {
   console.log(a + b);
   return a + b;
}
const show = () => {
   console.log('执行了show');
   return 1;
}

class Person {
   constructor(name, age) {
       this.name = name;
       this.age = age;
   }

   showName() {
       return `我的名字是${this.name}`;
   }
}

export default {
   Person
}

5.js文件:

export const e = 101;
export const f = 4;

import有提升效果:

<script type="module">
   // 验证提升效果
   console.log('提升了吗');
   import mod, {show, sum, e, f} from './module/4.js';

   console.log(e);
</script>

导入的模块,如果里面js的内容改了,外面的也会跟着改,不像common规范如:

html文件:

<script type="module">
   import {a, b} from './module/6.js';
   // 导入的模块,如果里面js的内容改了,外面的也会跟着改
   console.log(a, b);
   setTimeout(() => {
       console.log(a, b);
   }, 3000);
</script>

6.js:

let a = 12;
let b = 13;

setTimeout(() => {
   a = 11111;
}, 2000);

export {a, b};

import可以动态引入:

import()类似于node里面的require,可以动态引入

默认import语法不能写入if等语句里
可以使用按需加载的方式来加载:\
<script >
   import ('https://code.jquery.com/jquery-1.12.4.js').then(res => {
           $(function () {
               $('body').css({
                   background: 'red'
               })
           })
       })
</script>
此种方法的优点:

按需加载

可以写在if中

路径也可以是动态的

import() 的返回值是一个promise对象

模块化的动态引入:

不能在if中直接引入 import 语法,

import() 的返回值是一个promise对象

可以使用 import() 来引入,如:
<script >
   // 也可以引入绝对地址
   import('./module/1.js').then(res => {
       console.log(res.a+res.b);
   });
</script>

可以进行动态加载,如:

<script >
   let sign = 1;
   function config() {
       switch (sign) {
           case 1:
               return './module/1.js';
               break;
           case 2:
               return './module/2.js';
               break;
       }
   }
   import(config(1)).then(res => {
   });
</script>

也可以使用promise.all(),如:

<script >
    Promise.all([
        import('./module/1.js'),
        import('./module/2.js'),

    ]).then(([mod1,mod2])=>{
        console.log(mod1);
        console.log(mod2);
    })
</script>