模块化 导入和导出

导入和导出

• 第一步：首先script要申明类型type="module"；

• 模块化1.划分代码功能，封装 2.防止变量污染(每个模块会拥有独立命名空间);

• 单个导出和导入的两种方式

 - 第一种
导入 import "./a.js";
导出 export {变量}
导出 export{a as b}  //起别名 as  接收的变量要和导出的一致，且要加大括号

- 第二种  不用加{}
导出export default b；
导入import b from './b.js';//这里接收的b可以随便定义一个变量

总结：export defalut 和 export 在导出和导入上的区别： 1.导出 export defalut只能导出一个 export 可以导出多个； 2.导入 ： export 接收的变量要和导出的一致，且要加大括号，
export defalut ： 接收变量可以自定义，且不需要加大括号

• 导出和接收多个

export {a as d};
export {b};
export {c};
export default b;//等同于export {b as default}

import b,{d,b,c} from './b.js';//接收多个变量
console.log(b,d,b,c);

• 导入所有导出的元素

import * as obj from './b.js';  // * 是通配符

• 按需加载

// 按需加载导入模块 import("./a.js")
// import a from './a.js';
document.querySelector("button").onclick = function(){
           import("./a.js").then(res=>{   //所有变量怎么取 用then方法
               console.log(res);
           })
        }