feat: js ESM & TODOs

xgqfrms · Aug 15, 2024 · a2b327d · a2b327d
1 parent fa44b20
commit a2b327d
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 4 deletions.
diff --git a/docs/app.js b/docs/app.js
@@ -0,0 +1,24 @@
+
+export const echo = () => console.log(`%c雅思考试官方指南（第2版）音频、视频资源`, `background: #000; color: #0f0; font-size: 23px;`);
+
+/*
+TODO:
+
+1. Node.js 遍历 tree (js 没有读写本地文件的权限 ？)
+2. 判断 folder / file 递归，动态生成 URL
+3. URL Unicode encodeURI / encodeURIComponent, 把中文转换成标准的纯字符 URL
+4. 返回结果集合数组
+5. 动态插入 DOM
+
+*/
+
+export const autoInsertToDOM = () => {
+  // document.body
+  // const body = document.querySelector(`body`);
+  const app = document.querySelectorById(`app`);
+  // app.insertAdjacentElement(`beforebegin`, dom)
+  // app.insertAdjacentText(`beforebegin`, `text`)
+  app.insertAdjacentHTML(`beforebegin`, `<h3>插入 DOM 测试</h3>`)
+  // app.insertAdjacentHTML(`beforebegin`, `<ul>tree???</ul>`)
+}
+
diff --git a/docs/index.html b/docs/index.html
@@ -10,21 +10,94 @@
 </head>
 <body>
   <header>
-    <h1>ielts-guide-2th</h1>
+    <h1>ielts-guide-2nd</h1>
     <p>雅思考试官方指南（第2版）音频、视频资源</p>
     <a href="https://ielts-guide-2nd.xgqfrms.xyz/index.html" class="href">https://ielts-guide-2nd.xgqfrms.xyz/index.html</a>
   </header>
-  <main>
+  <main id="app">
     <section>
       <a href="https://ielts-guide-2nd.xgqfrms.xyz/《雅思考试官方指南》（第2版）/图书介绍.mp4">图书介绍.mp4</a>
       <br />
       <a href="https://ielts-guide-2nd.xgqfrms.xyz/%E3%80%8A%E9%9B%85%E6%80%9D%E8%80%83%E8%AF%95%E5%AE%98%E6%96%B9%E6%8C%87%E5%8D%97%E3%80%8B%EF%BC%88%E7%AC%AC2%E7%89%88%EF%BC%89/%E5%9B%BE%E4%B9%A6%E4%BB%8B%E7%BB%8D.mp4">《雅思考试官方指南》（第2版）/图书介绍.mp4</a>
     </section>
-    <article></article>
+
+    <article>
+      <!-- todos
+      1. Node.js 遍历 tree
+      2. 判断 folder / file 递归，动态生成 URL
+      3. 返回结果集合数组 -->
+    </article>
+    <pre>
+      └── 《雅思考试官方指南》（第2版）
+      ├── 写作Task 2答题实例
+      │   └── 05 Comments on Writing Samples.pdf
+      ├── 视频：IELTS评分标准
+      │   ├── 01 Listening Band Descriptor.mp4
+      │   ├── 02 Reading Band Descriptor.mp4
+      │   ├── 03 Writing Band Descriptor 1 - Task Response.mp4
+      │   ├── 04 Writing Band Descriptor 2 - Coherence & Cohesion.mp4
+      │   ├── 05 Writing Band Descriptor 3 - Lexical Resource.mp4
+      │   ├── 06 Writing Band Descriptor 4 - Grammar.mp4
+      │   ├── 07 Speaking Band Descriptor 1 - Fluency & Coherence.mp4
+      │   ├── 08 Speaking Band Descriptor 2 - Lexical Resource.mp4
+      │   ├── 09 Speaking Band Descriptor 3 - Grammar.mp4
+      │   └── 10 Speaking Band Descriptor 4 - Pronunciation.mp4
+      ├── 图书介绍.mp4
+      ├── 口语练习音频
+      │   ├── 01 IELTS Speaking Sample - Part 1.mp3
+      │   ├── 02 IELTS Speaking Sample - Part 2.mp3
+      │   ├── 03 IELTS Speaking Sample - Part 3.mp3
+      │   └── 04 IELTS Speaking Sample - Full.mp3
+      ├── 听力练习音频
+      │   ├── 01 Letters of the Alphabet.mp3
+      │   ├── 02 Groups of Letters.mp3
+      │   ├── 03 Spelling.mp3
+      │   ├── 04 Numbers.mp3
+      │   ├── 05 Short-answer Questions.mp3
+      │   ├── 06 Test Practice - Section 1.mp3
+      │   ├── 07 Matching Information.mp3
+      │   ├── 08 Multiple Choice.mp3
+      │   ├── 09 Test Practice - Section 2.mp3
+      │   ├── 10 Map 1.mp3
+      │   ├── 11 Map 2.mp3
+      │   ├── 12 Sentence Completion.mp3
+      │   ├── 13 Test Practice - Section 3.mp3
+      │   ├── 14 Signposts.mp3
+      │   ├── 15 Table Completion.mp3
+      │   ├── 16 Flow Chart Completion.mp3
+      │   ├── 17 Summary Completion.mp3
+      │   └── 18 Test Practice - Section 4.mp3
+      ├── 模拟试题听力录音
+      │   ├── 01 Academic Test 1.mp3
+      │   ├── 02 Academic Test 2.mp3
+      │   ├── 03 Academic Test 3.mp3
+      │   └── 04 Academic Test 4.mp3
+      ├── 视频：雅思写作指导
+      │   └── 07 Video - POWER Writing.mp4
+      ├── 《雅思手册》相关视频
+      │   ├── 雅思考试机考操作系统简介.mp4
+      │   ├── 雅思视频通话口语考试流程.mp4
+      │   ├── 雅思考试机考写作部分操作指南.mp4
+      │   ├── 雅思考试机考听力部分操作指南.mp4
+      │   └── 雅思考试机考阅读部分操作指南.mp4
+      └── 视频：口语考试实况录像
+          ├── 01 Speaking Sample 1.mp4
+          ├── 02 Speaking Sample 2.mp4
+          ├── 03 Speaking Sample 3.mp4
+          ├── 04 Speaking Sample 4.mp4
+          └── 05 Comments on Speaking Samples.pdf
+
+  9 directories, 51 files
+    </pre>
   </main>
   <footer>
     <p>copyright&copy; xgqfrms 2024</p>
   </footer>
-  <!-- <script type="module" src="./app.js"></script> -->
+  <script type="module" src="./test.js"></script>
+  <!-- <script type="module" src="./app.js"> -->
+  <script type="module">
+    import {echo} from "./app.js";
+    echo();
+  </script>
 </body>
 </html>
diff --git a/docs/test.js b/docs/test.js
@@ -0,0 +1,5 @@
+// export const test = () => console.log(`%c雅思考试官方指南（第2版）音频、视频资源`, `background: #000; color: #f0f;`);
+
+const test = () => console.log(`%c雅思考试官方指南（第2版）音频、视频资源`, `background: #000; color: #f0f;`);
+// call function in module itself ✅
+test();