非得记住模块化

小饼儿~

已于 2023-12-04 15:05:29 修改

阅读量351

点赞数 8

文章标签： es6

于 2023-11-24 10:12:01 首次发布

本文链接：https://blog.csdn.net/weixin_48432293/article/details/134592246

版权

本文详细介绍了ES6模块化中的导出和导入语法，包括定义后导出、同时定义导出、导出函数/类、默认导出以及commonJS模块化在Node.js中的应用。还讨论了如何通过all.js文件统一导出和批量导入资源。

摘要由CSDN通过智能技术生成

一、ES6模块化

ES6模块化的导出和导入语法，必须在script标签中，type="module"。

可以先定义变量，后导出。也可以定义变量的同时导出。可以导出函数和类。

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名。这个时候就可以使用export default。

例如方式四，注：export default在同一个模块中，不允许同时存在多个。

index.html

<body>
<script src="./a.js" type="module"></script>
<script src="./b.js" type="module"></script>
</body>

a.js（导出方式）

// 方式一：定义后导出
var flag = 'true';
function sum(a,b){
  return a+b;
}
export{flag,sum}

//方式二：同时定义导出
export const num1 = 1000;
export const height = 1.88;

// 方式三：导出函数或者类
export function mul(a,b){
  return a*b;
}
export class Person{
  run(){
    console.log('run');
  }
}

//方式四：导出默认，名字可以改变。

// const address='北京市';
// export default address;

export default function (argument){
  console.log(argument);
}

b.js（导入方式）

// 方式一：
import {flag,sum} from './a.js';
if(flag){
  console.log(sum(20, 30));
}

// 方式二：
import{num1,height} from './a.js';
console.log(num1);
console.log(height);

// 方式三：
import{mul,Person} from './a.js';

console.log(mul(2, 3));
var p = new Person();
p.run();

//方式四：
import addr from './a.js';
// console.log(addr);
addr('miaomiao');

// 方式五：接受全部
import * as aaa from './a.js';

console.log(aaa.flag);  //true
console.log(aaa.sum(5, 6));   //11
const l = new aaa.Person();
l.run();   //run

统一导出资源，批量导入导出

假如一个文件中，引用了aaa,bbb,ccc。再多几个，代码就显得很杂乱，这个地方我们可以处理一下。

import aaa from './aaa.vue'
import bbb from './bbb.vue'
import ccc from './ccc.vue'

将所有的文件都在一个js中引入，不管有多少，都丢进来，然后暴漏出去。这样子，我们只需要引入一个all.js就ok了。

import {aaa,bbb,ccc} from './all.js'

all.js

export {default as aaa} from './aaa.vue'
export {default as bbb} from './bbb.vue'
export {default as ccc} from './ccc.vue'
//相当于
import aaa from './aaa.vue'
import bbb from './bbb.vue'
import ccc from './ccc.vue'
export {aaa}
export {bbb}
export {ccc}

二、commonJS模块化

基于node，该种方法要有底层解析。

aaa.js 导出

module.exports = {
  flag,
  sum
}

bbb.js 导入

var {flag,sum} = require('./aaa.js');
//等同于
var ms = require('./aaa.js');
var flag = ms.flag;
var sum = ms.sum;

小饼儿~

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
非得记住模块化

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名。这个时候就可以使用export default。可以先定义变量，后导出。也可以定义变量的同时导出。
复制链接

扫一扫