ES6入门---第二单元 模块五：模块化

js不支持模块化
注意： 必要放到服务器情况
1、怎样定义模块？
export  东西
例：1.js文件中

2. console.log('1模块加载了');//显示是否加载了
3. export const a =12;
4. export const b = 5;
5. export let c = 101;

复制代码

2. const a=12;
3. const b=5;
4. const c=101;
6. export {//可以起别名 as *** 也可以去掉
7.     a as aaa,
8.     b as banana,
9.     c as cup
10. }

复制代码

2. <script type="module">
3.         import {a, b, c} from './modules/1.js';
5.         console.log(a,b,c);
6.     </script>

复制代码

起别名版import ：

2. <script type="module">
3.         import {aaa, banana, cup} from './modules/2.js';
5.         console.log(aaa, banana, cup);
6.     </script>

复制代码

补充 export default **  作用：引用时间可以不消加{ }


2、怎样使用？
 在html文件里<script type="module"></script>
引入模块
import './modules/1.js';
【新增】*表现引用全部

2. <script type="module">
3.         import * as modTwo from './modules/2.js';
4.         console.log(modTwo.aaa);
5.     </script>

复制代码

2. <script type="module">
3.         import mod,{show, sum, a, b} from './modules/4.js';
4. // show sum 是函数
5.         let p1 = new mod.Person('老肖');
7.         console.log(p1.showName());
9.         show();
11.         sum();
13.         console.log(a,b);
14.     </script>

复制代码

js文件可以引用另一个js文件里的东西 ：格式同理
import:  特点
        a). import 可以是相对路径，也可以是绝对路径
            import 'https://code.jquery.com/jquery-3.3.1.js';
        b). import模块只会导入一次，无论你引入多少次
        c). import './modules/1.js';  如果这么用，相称于引入文件
        d). 有提升效果，import会自动提升到顶部，起首实行
             也就是说：不管放前面放后面都最先引入
        e). 导出去模块内容，如果里面有定时器更改，表面也会改动
  import()  类似node里面require， 可以动态引入, 默认import语法不能写到if、for之类里面

错误例：

2. if(a==12){
3.             import {a} from './modules/1.js';
4.         }else{
5.             import {b} from './modules/2.js';
6.         }

复制代码

正确例：
        返回值是个promise对象 

2. <script type="module">
3.         import('./modules/1.js').then(res=>{
4.             console.log(res.a+res.b);
5.         });
6.     </script>

复制代码

 路径也可以动态

2. <script type="module">
3.         let sign=1;
4.         function config(){
5.             switch(sign){
6.                 case 1:
7.                     return './modules/1.js';
8.                     break;
9.                 case 2:
10.                     return './modules/2.js';
11.                     break;
12.             }
13.         }
14.         import(config(1)).then(res=>{
15.             $(function(){
16.                 $('body').css({
17.                     background:'gray'
18.                 })
19.             })
20.         });
21.     </script>

复制代码

与promise联合版：

2. <script type="module">
3.         Promise.all([
4.             import('./modules/1.js'),
5.             import('./modules/2.js')
6.         ]).then(([mod1,mod2])=>{
7.             console.log(mod1);
8.             console.log(mod2);
9.         })
10.     </script>

复制代码

【ES2017】async  await

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。