ES6-module的使用

2023-12-02 16:46:22

ES6 模块化

准备三个文件
m1.js、m2.js、m3.js

m1.js

// 分别暴露
export let school = {
    name: '尚硅谷'
}
export let mySchool = '尚硅谷'

export function fn() {
    console.log('我可以的！请相信自己！');

}

m2.js

//统一暴露
let school = '尚硅谷'

function findJob() {
console.log('我们帮助你找工作');
}

export { school, findJob };

m3.js

//默认暴露--其实就是把后面对象的值给了变量 default默认变量。

export default  {
school:'aiguigu',
    change: function () {
    console.log('我们可以改变你');
    }
}

<!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>ES6 模块化</title>
  </head>

  <body>
    <script type="module">
    //1.通用的导入方式  --整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
      //使用open with live server
       //import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。
      // import * as m1 from "./m1.js";
      // import * as m2 from "./m2.js";
      //  import * as m3 from "./m3.js";
      //  console.log(m2);
      // console.log(m3);
     
     //2.解构赋值形式
    //  import {school, mySchool,fn} from "./m1.js"
    //  console.log(school,mySchool);
    //  console.log(fn);
    //  import {school as a, findJob} from './m2.js'
    //  console.log(a,findJob);
     //3.简便形式  针对默认暴露
// import m3 from "./m3.js"
//不能写import default as m3 from "./m3.js"错误
//  相当于import {default as m3} from "./m3.js"

//也不能写 import m2 from "./m2"--指针对默认暴露
console.log(m3);
    </script>
  </body>
</html>

第二种引入方式

码农公寓

相关文章