From 834cdfdf6efb797fd46cd510f8db44ae8340db0a Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Thu, 13 Feb 2025 09:15:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E6=9E=90md=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=8Cjs=E6=A8=A1=E5=9D=97=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 10 + public/summer.md | 36 ++++ src/layout/components/lay-content/index.vue | 1 + src/router/modules/demo.ts | 4 + src/style/reset.scss | 201 +++++++++++--------- src/views/demo/module/img/1.png | Bin 0 -> 1891514 bytes src/views/demo/module/index.vue | 24 +++ 8 files changed, 184 insertions(+), 93 deletions(-) create mode 100644 public/summer.md create mode 100644 src/views/demo/module/img/1.png create mode 100644 src/views/demo/module/index.vue diff --git a/package.json b/package.json index 08482e0..5b8f3da 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "element-plus": "^2.8.0", "js-cookie": "^3.0.5", "localforage": "^1.10.0", + "marked": "^15.0.7", "mitt": "^3.0.1", "nprogress": "^0.2.0", "path": "^0.12.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db7239f..8d959db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: localforage: specifier: ^1.10.0 version: 1.10.0 + marked: + specifier: ^15.0.7 + version: 15.0.7 mitt: specifier: ^3.0.1 version: 3.0.1 @@ -2206,6 +2209,11 @@ packages: magic-string@0.30.11: resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==} + marked@15.0.7: + resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==} + engines: {node: '>= 18'} + hasBin: true + mathml-tag-names@2.1.3: resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} @@ -5693,6 +5701,8 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 + marked@15.0.7: {} + mathml-tag-names@2.1.3: {} mdn-data@2.0.14: {} diff --git a/public/summer.md b/public/summer.md new file mode 100644 index 0000000..3766dce --- /dev/null +++ b/public/summer.md @@ -0,0 +1,36 @@ +CommonJS、AMD、CMD 和 ESM（ES6 Modules）是 JavaScript 中的不同模块化规范。它们之间有一定的关系和区别，以下是对它们的概述及相互关系的说明： + +### CommonJS +- **定义**：主要用于服务器端的模块化，广泛应用于 Node.js。 +- **特点**： + - **同步加载**：模块是同步加载，适合服务器环境。 + - **导入导出**：使用 `require()` 导入模块，使用 `module.exports` 导出模块。 + +### AMD (Asynchronous Module Definition) +- **定义**：主要用于浏览器端的模块化，支持异步加载。 +- **特点**： + - **异步加载**：模块可以异步加载，适合在浏览器中使用。 + - **导入导出**：使用 `define()` 定义模块，使用 `require()` 加载模块。 + +### CMD (Common Module Definition) +- **定义**：对 AMD 的一种改进，主要由 SeaJS 提出。 +- **特点**： + - **按需加载**：支持动态依赖，模块可以在需要时才加载。 + - **导入导出**：使用 `define()` 定义模块，依赖在使用时声明。 + +### ESM (ECMAScript Modules) +- **定义**：ES6 引入的模块化标准，现已成为 JavaScript 的官方模块系统。 +- **特点**： + - **静态解析**：在编译时解析模块依赖，支持树摇优化。 + - **导入导出**：使用 `import` 导入模块，使用 `export` 导出模块。 + - **异步加载**：通过 `