好的，我会根据内容的逻辑性和可读性对排版进行优化，使其更加清晰和美观。以下是优化后的排版布局：

ES6 Module

主流的模块化方案

• ESM（ECMAScript Module）
• CommonJS（Node.js 模块系统）

通常情况下，一个文件就是一个模块。

ESM 展示

导出模块

在一份 JavaScript 文件中导出模块的方式如下：

// 命名导出
export const aTitle = 'a模块的标题';
export function aFn() {}

// 默认导出（default 只能导出一种）
export default {
  name: 'a模块'
};

使用模块

在 HTML 文件中使用模块时，需要通过 <script> 标签并添加 type="module" 来声明：

<script type="module" src="./main.js"></script>

导入模块

默认导入

import moduleA from './a.js';
import moduleB from './b.js';

这里的 moduleA 和 moduleB 对应的是默认导出的内容。

解构导入

可以通过解构的方式导入命名导出的内容，并且可以使用 as 起别名：

import { aTitle, aFn } from './a.js';
import { bTitle, bFn as bFunction } from './b.js';

CommonJS 展示

导出模块

在 CommonJS 中，模块的导出方式如下：

// 方式1：直接导出对象
module.exports = {
  a: 1,
  b: 2,
  c: 3
};

// 方式2：逐个导出
exports.a = 1;
exports.b = 2;

导入模块

使用 require 导入模块：

const moduleA = require('./c');

这样调整后，内容结构更加清晰，层次分明，方便阅读和理解。希望对你有所帮助！