一、模块化
一个JS文件就是一个模块，暴露出一个接口使用 .(js可以省略)
-
CommonJS
- require('http') 导入模块
- 相对路径 require('./module1');
- 绝对路径 require('');
- 模块名 先去找内置模块，内置模块没有在去文件夹node_models里面找， 、内置模块 => node_modules模块 require('http')
- modeule.exports 导出模块 建议使用module.exports全部导出, 会覆盖exports内存地址， exports一个个导出
- require('http') 导入模块
-
AMD require.js
-
CMD sea.js
-
ES6模块(采用严格模式)
- import导入模块(预解释完成了)、import()按需导入模块，返回promise对象
- export导出模块、export default 导出默认模块
二、定义和使用模块 (ES6 )
1. 导出模块和导入模块对应 - export const a =1; ===> import {a} from './module1.js' - export { a, b } ===> import {a, b} from './module1.js' - export {a as xx} ===> import {xx, b as cc} from './module1.js' - export default function() {} ===> import fn from './module1.js' - export default { ===> import mod from './module1.js' mod.new Person() Person } - export {a, b, c, d} ===> import * as common from './module1.js', common.a common.b复制代码 module1.js文件 //==> 1.一一导出 export let a = 1; export let b = 2; =======>> import {a, b, c} from './a.js' export let c = 3; //==>2.全部一次导出 let a = 1; let b = 2; let c = 3; export { =======>> import {a, b, c} from './a.js' a, b, c } //==> 3.使用别名 let a = 1; let b = 2; let c = 3; export { =======>> import {x, y, z} from './a.js' import里面也可以用别名哦! =======>> ***接收所有用别名 import * as modTwo from './a.js' import接收所有的导出用别名 a as x, modTwo.a modTwo.b modTwo.c b as y, c as z } //==> 4.导出函数 const let fn = function() { } export {fn}; ============>> import {fn} from './module1.js' //==> 5.导出类 class Peron { } export {Person}; //==> 6.export default默认导出, import导入不需要加{} export default let a = 1; ============>> import a from './module.js' // 6.1) 导出类 class Person { } export default Peron; ============>> import Person from './module.js' // 6.2导出匿名函数 export default function() { ============>> import tools from './module.js' } //6.3导出对象 class Person { constructor(x) { this.x = x; } } export default { ============>> import mod from './module.js' Person mod.new Person('x'); } 复制代码 2.导入模块
import
-
可以是相对路径，也可以是绝对路径引入
- import ''; 导入jQuery文件
- import './module1.js' 引入JS文件
- import {a} from './a' export导出的文件
- import tools from './tools' export default tool 导出默认的
- import Routers from './routers' export default {Routers: Routers} Routers.Routers default默认导出对象
-
import模块只会导入一次，无论你引入多少次，同一个模块下
-
import后缀.js可以省略，但是相对路径必须加./，以后估计会去掉
-
import {a as x, b as y} from './module1.js' 相对引入模块
-
import * as modTwo from './module1.js'; modTwo.a ， modTwo.b
-
导出使用了export default 就不要加{}， 没有defaullt必须加，解构
-
有提升效果，import自动提升到顶部，首先执行，可以在import上面执行，哈哈
-
导出去的模块，如果里面有定时器更改，外面也会随之改变，不像common规范缓存
-
默认import语法不能写到if之类里面
-
动态加载模块， import()函数，类似node里面的require函数，可以动态引入模块， 返回一个promise对象，可以使用then，或者Promise.all
- 按需加载
- 可以写到if判断里面
总结:
- 1.当用export default people导出时，就用 import people 导入（不带大括号）- 2.一个文件里，有且只能有一个export default。但可以有多个export。3.当用export name 时，就用import { name }导入（记得带上大括号）4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as exampleimport和import()的区别是什么? ==> import是在预解释的时候就加载完毕 了，所以可以在导入前面使用，但是他没有按需加载模块功能 ==> import()是在执行的时候才去加载相应的模块，按需加载 ==> 都可以绝对路径和相对路径引入复制代码 import('模块路径相对或者绝对').then((res) => { console.log('模块加载成功'); }).catch(err => { console.log('模块加载失败'); }); // ==> 2.按需加载 let a = 1; if (a > 1) { import('./a.js').then(res =>{ }) } else { import('./b.js').then(res =>{ }) } //==> 3.采用Promise.all加载多个模块 Promise.all([ import('./a.js'), import('./b.js'), import('./c.js') ]).then(res => { let [aModuel, bModuel, cModule] => res; // ==> 解构赋值 }).catch(err => { cosole.log(err); }); //==> 4.配合 async函数使用, 一个个导入 async function main() { // => 4.1 分开写， (有顺序问题) const mod1 = await import('./a.js'); const mod2 = await import('./b.js'); const mod3 = await import('./c.js'); console.log(mod1, mod2, mod3); //==>导入多个模块 Promise.all([ import('./module1.js'), import('./module2.js'), import('./module3.js'), ]).then(([module1, module2, module3]) => { // ==>>直接解构赋值了，太方便了 ··· }); // => 4.2 合并写 Promise.all (没有顺序问题), 配合async函数， 直接全部导入 ,都没有then方法了 async function getModule() { const [mod1, mod, mod3] = await Promise.all([ // ==>> await 等待执行完的结构给前面解构 import('./a.js'), import('./b.js'), import('./c.js') ]); console.log(mod1, mod2, mod3); } }复制代码 eg1: 提升效果和函数预解释差不多
=>module1.js export const a = 1; =>a.js console.log(a); // ==> 1 import {a} from './module1.js';复制代码 eg2: 案例分析
导入的模块, 导出模块怎么写呢? =>a.js import mod, {show, sum, a, b} from './module1.js'; let p1 = new mod.Person('es6-moduel'); console.log(p1.showName()); show(); sum(); console.log(a, b); => b.js 分离a, b const let a = 1; const let b = 2; export { a, b } =>moduel1.js import {a, b} from './bjs' cosnt let sum = () =>{ console.log(a + b); }; const show = () => { console.log('show'); } export { a, b, sum, show } class Person { constructor(name) { this.name = name; } showName() { return this.name; } } export default { Person } 复制代码