From 062c8726aeb50df4a1dd87a6dc982d77ffd4aba5 Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 22 Dec 2024 11:40:18 +0800
Subject: [PATCH] add js

---
 homework/README.md           |   2 +-
 skills/web/js/README.md      |   2 +
 skills/web/js/index.mjs      |  79 +++++++++++++
 skills/web/js/profile.mjs    |   7 ++
 skills/web/js/promise.drawio | 216 +++++++++++++++++++++++++++++++++++
 5 files changed, 305 insertions(+), 1 deletion(-)
 create mode 100644 skills/web/js/README.md
 create mode 100644 skills/web/js/index.mjs
 create mode 100644 skills/web/js/profile.mjs
 create mode 100644 skills/web/js/promise.drawio

diff --git a/homework/README.md b/homework/README.md
index 18debc3..e996066 100644
--- a/homework/README.md
+++ b/homework/README.md
@@ -24,4 +24,4 @@ Web全栈开发(Book Api): 必须完成
 
 day01: book restful api + config 包 的版本, 跑起来能验证成功
 day02: book mvc 版本是必须要写出来(log 包允许你copy), mcube的版本是体验, mcube版本不做要求
-day05: 自己使用map这种数据结果 做一个 轻量级的ioc框架
\ No newline at end of file
+day05: 自己使用map这种数据结果 做一个 轻量级的ioc框架, 如果不知道怎么写，可以参考15期: https://gitlab.com/go-course-project/go15/-/tree/main/vblog/ioc?ref_type=heads
\ No newline at end of file
diff --git a/skills/web/js/README.md b/skills/web/js/README.md
new file mode 100644
index 0000000..9719303
--- /dev/null
+++ b/skills/web/js/README.md
@@ -0,0 +1,2 @@
+# JS
+
diff --git a/skills/web/js/index.mjs b/skills/web/js/index.mjs
new file mode 100644
index 0000000..835afc8
--- /dev/null
+++ b/skills/web/js/index.mjs
@@ -0,0 +1,79 @@
+import profile from './profile.mjs'
+
+// pkg.
+// 
+console.log(profile.firstName, profile.lastName, profile.year)
+
+
+// 模拟的一次网络IO
+// executor: (resolve: (value: any) => void, reject: (reason?: any) => void)
+function testResultCallbackFunc(success, failed) {
+    var timeOut = Math.random() * 2;
+    console.log('set timeout to: ' + timeOut + ' seconds.');
+    setTimeout(function () {
+        if (timeOut < 1) {
+            console.log('call resolve()...');
+            success('200 OK');
+        } else {
+            console.log('call reject()...');
+            failed('timeout in ' + timeOut + ' seconds.');
+        }
+    }, timeOut * 1000);
+}
+
+// testResultCallbackFunc(data => console.log(data), err => console.log(err))
+// testResultCallbackFunc(data => console.log(data), err => console.log(err))
+// testResultCallbackFunc(data => console.log(data), err => console.log(err))
+
+// JS 编程范式
+// new Promise(testResultCallbackFunc).then((value) => {
+//     console.log(value)
+// }).catch((err) => {
+//     console.log(err)
+// }).finally(() => {
+//     console.log('finally')
+// })
+// new Promise(testResultCallbackFunc).then((value) => {
+//     console.log(value)
+// }).catch((err) => {
+//     console.log(err)
+// }).finally(() => {
+//     console.log('finally')
+// })
+// new Promise(testResultCallbackFunc).then((value) => {
+//     console.log(value)
+// }).catch((err) => {
+//     console.log(err)
+// }).finally(() => {
+//     console.log('finally')
+// })
+
+// async + await 控制异步的调用顺序，也就是同步编程
+// A -> B() -> C()
+// set timeout to: 0.9367326782693821 seconds.
+// call resolve()...
+// set timeout to: 0.09577379370967654 seconds.
+// call resolve()...
+// set timeout to: 0.5294275808882718 seconds.
+// call resolve()...
+var bizfn = async () => {
+    try {
+        var a = new Promise(testResultCallbackFunc)
+        await a
+        var b = new Promise(testResultCallbackFunc)
+        await b
+        var c = new Promise(testResultCallbackFunc)
+        await c
+    } catch(err) {
+        console.log(err)
+    }
+
+    // a.then(() => {
+    //     b.then(()=> {
+    //         c.then(() => {
+
+    //         })
+    //     })
+    // })
+}
+bizfn()
\ No newline at end of file
diff --git a/skills/web/js/profile.mjs b/skills/web/js/profile.mjs
new file mode 100644
index 0000000..a524157
--- /dev/null
+++ b/skills/web/js/profile.mjs
@@ -0,0 +1,7 @@
+// profile.js
+// default app
+export default {
+    firstName: 'Michael',
+    lastName: 'Jackson',
+    year: 1958
+}
\ No newline at end of file
diff --git a/skills/web/js/promise.drawio b/skills/web/js/promise.drawio
new file mode 100644
index 0000000..360a064
--- /dev/null
+++ b/skills/web/js/promise.drawio
@@ -0,0 +1,216 @@
+<mxfile host="65bd71144e">
+    <diagram id="IQFLKRDQcKsB7MzJc7Jv" name="第 1 页">
+        <mxGraphModel dx="638" dy="192" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="6" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="2" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="120" y="110" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="3" target="4">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="B" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="110" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="C" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="440" y="110" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="同步编程" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="120" y="80" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="PageA" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="110" y="270" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="PageB" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="110" y="370" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="PageC" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="110" y="470" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="11" value="&amp;nbsp;单线程" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="270" width="120" height="290" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" value="PageA-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="270" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="13" value="PageB-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="320" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="18" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="14" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" value="PageC-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="370" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="15" value="PageA-M" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="420" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="异步编程" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="110" y="240" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="20" style="edgeStyle=none;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="17" target="14">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="17" value="io&lt;br&gt;Promise" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="630" y="370" width="70" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="22" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="29" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="22" target="28">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="22" value="sucess&lt;br&gt;Acallbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="600" y="450" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="23">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="670" y="410" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="42" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="23" target="41">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="23" value="failed&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="690" y="450" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="28" value="io&lt;br&gt;Promise" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="570" y="520" width="70" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="30" target="28">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="35" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="30" target="34">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="30" value="sucess&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="520" y="600" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="33" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="31" target="28">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="failed&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="610" y="600" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="io&lt;br&gt;Promise" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="480" y="680" width="70" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="38" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="36" target="34">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" value="sucess&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="750" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="37">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="510" y="720" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="37" value="failed&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="520" y="750" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="40" value="A() --&amp;gt; B() --C()" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="720" y="375" width="100" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="45" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="41" target="43">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="46" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="41" target="44">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="41" value="io&lt;br&gt;Promise" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="730" y="520" width="70" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="43" value="sucess&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="710" y="600" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="44" value="failed&lt;br&gt;callbackfn" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="800" y="600" width="60" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="47" value="A(B(C()))" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="630" y="320" width="100" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="48" value="A" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="540" y="455" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="49" value="B" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="460" y="605" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="50" value="C" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="370" y="755" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="51" value="PageA" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="870" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="52" value="PageB" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="970" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="53" value="PageC" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="1070" width="120" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="54" value="&amp;nbsp;单线程" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="300" y="870" width="120" height="290" as="geometry"/>
+                </mxCell>
+                <mxCell id="55" value="PageA-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="870" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="56" value="PageB-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="920" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="57" value="PageC-A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="970" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="58" value="PageA-M" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="1020" width="120" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="59" value="异步编程" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="840" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="66" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="67" target="69">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="74" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="67" target="73">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="680" y="1050"/>
+                            <mxPoint x="875" y="1050"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="67" value="async A" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="620" y="960" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="68" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="69" target="70">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="69" value="async B" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="780" y="960" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="70" value="async C" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="940" y="960" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="71" value="同步编程 A() --&amp;gt; B() --&amp;gt; C()" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="620" y="930" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="72" value="主线程" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="470" y="830" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="75" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.25;exitY=0;exitDx=0;exitDy=0;entryX=0.25;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="73" target="67">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="76" value="await" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="75">
+                    <mxGeometry x="-0.1969" y="2" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="73" value="ecutor(async 执行起)" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="730" y="1100" width="290" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file