模块开发的思想

• 本质上，是为了解决 js文件之间相互引用
• 用来开发 大型的web应用
• 将项目的各个项目，封装成一个一个JS组件
• 开发时，分开去研发各个组件
• 最后利用es6 提供的模块系统，将各个组件导入到一个指定的主js组件中

es6 模块系统依托于两个关键字

• 1、export() 导出
  一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量
• 2、import(解构) from '路劲' 导入
  使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
  import命令接受一对大括号，里面指定要从其他模块导入的变量名。
  import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口，但是如果是为一个被导入的对象改写属性，是可以的。

export.js

//导出 export


//1、导出 普通变量
export let a = 12;
export let b = 'qwe';

//2、第二种写法
let a1 = 1;
let b1 = 'zxc';
export{
    a1 as a2,
    b1,
}

//3、导出方法
export let fn1 = () =>{
    console.log('这是方法一');
}


let fn2 = () =>{
    console.log('这是方法二');
}
function fn3(){
    console.log('这是方法三');
}
export {
    fn2,
    fn3,
}


//4、导出一个类
class Ball{
    type = '人类';
}
export {
    Ball,
}


//导出的第三种写法
//一个文件中，只能有一个 export default{}
export default{
    //在这里，可以将这个文件里面的 所有方法一起导出
    Ball,
    a,
    b,
    a1,
    b1,
    //由于这个方法是将一个文件整体导出
    //所以导入时也不一样，不能使用解构 来接
    // import 变量 from '路径'
}

import.js

import {
    //as 设置 别名
    a as a1,
    b,
} from  './13-export';

console.log(a1,b);

var a = new Person();
console.log(a);