【JS】模块导出与使用场景总结（一文看懂）

模块导出与使用场景

总结：

1.逐个导出
2.统一导出
3.别名导出
4.默认导出
5.混合导出
6.全部导出

1.逐个导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块导入-1：逐个导出</title>
</head>
<body>
    <!-- type = "module" ,浏览器中支持JS模块 -->
    <script type="module">
        //模板导入
        //import 成员列表 from 模块名
        // import {hello,username} from './modules/m1.js'
        console.log(username);
        console.log(hello(username));
        //import 自动提升，先执行
        import {hello,username} from './modules/m1.js'
    </script>
</body>
</html>

js示范：

// todo 逐个导出
//声明与导出：二合一/同步导出
export let username = '老马';
export function hello(username){
    return `Hello,${username}`;
}

2.统一导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块导入-2：统一导出</title>
  </head>
  <body>
    <script type="module">
        //统一导出 -> 逐个导入
        import {hello,username} from './modules/m2.js';
        console.log(username);
        console.log(hello(username));
    </script>
  </body>
</html>

js示范：

// todo 统一导出
//声明与导出：分两步完成
//1.声明
let username = '老马';
function hello(username){
    return `Hello,${username}`;
}
// 2.导出
// 将导出的成员，放到一个 {}
export{username,hello};

3.别名导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块导入-3：别名导出</title>
  </head>
  <body>
    <script type="module">
        //统一导出 -> 逐个导入
        import {uname,getHello} from './modules/m3.js';
        console.log(uname);
        console.log(getHello(uname));
    </script>
  </body>
</html>

JS示范：

// todo 统一导出
//声明与导出：分两步完成
//1.声明
let username = '老马';
function hello(username){
    return `Hello,${username}`;
}
// 2.导出
// 将导出的成员，放到一个 {}
// as 别名导出
// 隐藏成员的真实名称
// 外部使用也必须使用别名，原名失效
export{username as uname,hello as getHello}

4.默认导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块导入-4：默认导入</title>
  </head>
  <body>
    <script type="module">
        //默认导出
        //导入时，不能使用{...}
        //导入默认值
        // import site from './modules/m4.js';
        // //通过模块默认函数进行计算求和
        // console.log(site);
        // //导入函数
        // import sum from './modules/m4.js';
        // //通过模块默认函数进行计算求和
        // console.log(sum(1,2,3,4,5));
        //导入对象
        import course from './modules/m4.js';
        // 模块的对象 不能被更新，而对象的属性可以更新
        course.score = 110;
        console.log(course.score);
    </script>
  </body>
</html>

JS示范：

// todo 默认导出（重要）
/***
 * * 1.之前导出，是导出一个‘声明’
 * * 2.默认导出，是导出一个具体的‘值’
 * * 3.默认导出的值，默认名称是'default'
 * * 4.外部导入时，可以自定义'default'名称
 * ? 所以，默认导出，也称为‘匿名导出’（成员没有名称）
 * ? 即，导出成员名称，导入时可以自定义
 */
//1.返回值
///export default 'PHP中文网';
// ! 一个模块，仅允许有一个‘默认导出’
//2.函数
// export default function (...arr) {
//     return arr.reduce((a, c) => a + c);
// }
//3.对象 
export default {
    lesson: 'ES6',
    //与访问器属性冲突，可以放深一级
    //是为了防止递归调用陷入死循环
    // score:60,
    data: {
        score: 60,
    },
    //score 访问器属性
    get score() {
        //this.score访问的是访问器属性，陷入了死循环，所次使用下面的访问方法
        // return this.score
        return this.data.score;
        //需求：不及格全部返回60分，否则+5分返回
        let score = this.data.score;
        return score < 60 ? 60 : score + 5;
    },
    set score(value) {
        if(value>=0 && value<=100){
            this.data.score = value;
        }else{
            console.log('成绩必须在0-100之间')
        }
    }
}
//4.返回类
//export default class{}

5.混合导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块导入-5：混合导入</title>
  </head>
  <body>
    <script type="module">
      //默认导出
      //导入时，不能使用{...}
      //
      // import jz,{uname,bq};
      import jz,{uname,bq} from './modules/m5.js';
      console.log(uname);
      console.log(bq);
      console.log(jz);
    </script>
  </body>
</html>

JS示范：

// todo 混合导出（重要）
// 成员：1.普通成员；2.别名成员；3.默认成员
let uname = '灭绝师太';
let weapon = '打狗棒';
let uniqueSkill = '九阴白骨爪';
//混合导出：普通成员，别名成员，默认成员
export {uname,weapon as bq,uniqueSkill as default};

6.全部导出

HTML示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块导入-5：混合导入</title>
  </head>
  <body>
    <script type="module">
      //默认导出
      //导入时，不能使用{...}
      //
      // import jz,{uname,bq};
      // import jz,{uname,bq} from './modules/m5.js';
      import * as user from './modules/m6.js';
      //将全部成员，全部挂载到一个“对象”上
      //这个对象，可以看成模块成员的“命名空间”
      console.log(user.uname);
      console.log(user.bq);
      //默认成员，必须使用default访问
      // console.log(user.jz);
      console.log(user.default);
      //整体导入时，尽量不要使用默认成员
      //如果有多个成员，建议打包到对象中，再默认导出，遵循开发规范
    </script>
  </body>
</html>

JS示范：

// todo 整体导出（重要）
// 成员：1.普通成员；2.别名成员；3.默认成员
let uname = '灭绝师太';
let weapon = '打狗棒';
let uniqueSkill = '九阴白骨爪';
//混合导出：普通成员，别名成员，默认成员
export {uname,weapon as bq,uniqueSkill as default};

【JS】模块导出与使用场景 总结（一文看懂）

模块导出与使用场景

总结：

1.逐个导出

2.统一导出

3.别名导出

4.默认导出

5.混合导出

6.全部导出

相关文章