模块化开发思想

模块化开发思想

• 本质为了解决 JS 文件之间相互引用， 用来开发大型的 web 应用
• 将项目的各个功能，封装成很多个JS组件 ，开发时，分开去研发各个组件，
• 最后利用 es6 提供的模块系统 将各个组件导入到一个指定的 主JS 组件中。
• 模块化开发依托于两个关键字：
  export{ }                 导出
  import {解构} from '路径'      导入

1. 导出 export

• 一个文件只能有一个 export default
• 在这里可以将这个文件里面的所有方法一起导出

// 1. 导出普通变量
export let a = 12;      // 写法一

let a1 = 1;
export {                // 写法二
    a1 as a2,  // 别名导出(命名冲突)
}

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

let fna1 = () => {                  
    console.log('这是方法一');
}
export {                            // 写法二
    fn1,
}


// 3. 导出一个类
export class Man{       // 写法一
    name = '男人';
}
class Woman{           // 写法二
    name = '女人';
}
export {    
    Woman,
}

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

2. 导入 import

// import 变量 from '路径'。  使用 export default 导出时使用。

import {
    a as a1,  // 更改名字(命名冲突)
    Man,
} from "./7. export";