Merge pull request #92 from GuoXiCheng/dev-c

add understand-module md

src/.vitepress/config.mts

@@ -9,16 +9,10 @@ export default defineConfig(
     description: "JavaScript full stack knowledge",
     base: "/",
     lastUpdated: true,
-    head: [
-      [
-        "link",
-        { rel: "icon", type: "image/x-icon", href: "/images/favicon.ico" },
-      ],
-    ],
+    head: [["link", { rel: "icon", type: "image/x-icon", href: "/images/favicon.ico" }]],
     themeConfig: {
       editLink: {
-        pattern:
-          "https://github.com/GuoXiCheng/JSFullStack/edit/main/src/:path",
+        pattern: "https://github.com/GuoXiCheng/JSFullStack/edit/main/src/:path",
       },
       outline: {
         level: "deep",
@@ -88,9 +82,7 @@ export default defineConfig(
 
       sidebar: getSidebar(),
 
-      socialLinks: [
-        { icon: "github", link: "https://github.com/GuoXiCheng/JSFullStack" },
-      ],
+      socialLinks: [{ icon: "github", link: "https://github.com/GuoXiCheng/JSFullStack" }],
     },
   })
 );

src/.vitepress/sidebars/ecma-script.yaml

@@ -159,6 +159,15 @@
                 link: /javascript/ecma-script/object/property-descriptor#获取属性描述符
               - text: 获取所有属性描述符
                 link: /javascript/ecma-script/object/property-descriptor#获取所有属性描述符
+      - text: 模块 
+        items:
+          - text: 理解模块
+            link: /javascript/ecma-script/module/understand-module
+            items:
+              - text: 理解模块模式
+                link: /javascript/ecma-script/module/understand-module#理解模块模式
+              - text: 模块模式的实现
+                link: /javascript/ecma-script/module/understand-module#模块模式的实现
       - text: 异步
         items:
           - text: 手写 Promise

src/javascript/ecma-script/module/understand-module.md

@@ -0,0 +1,56 @@
+---
+aside: false
+---
+
+# 理解模块
+
+## 理解模块模式
+
+模块模式的核心思想是把逻辑分块，独立封装，每个块自行决定向外暴露的内容，并自行决定引入时执行哪些外部代码。
+
+## 模块模式的实现
+
+ES6 之前的模块有时会使用立即执行函数（IIFE）和闭包来实现。
+
+通过把 IIFE 实现的模块的返回值赋值给一个变量，就可以为模块创建一个命名空间。为暴露公共 API，IIFE 实现的模块通常会返回一个对象，其属性就是模块命名空间中的公共成员。
+
+```js
+var Foo = (functions() {
+    return {
+        baz: 'baz'
+        bar: function() {
+            console.log(this.baz);
+        }
+    };
+})();
+
+Foo.bar();
+Foo.baz;
+```
+
+可以给 IIFE 实现的模块传递参数，以便使用外部的值：
+
+```js
+const bar = 'bar';
+
+var Foo = (function(bar) {
+    return {
+        baz: 'baz'
+        bar: function() {
+            console.log(bar);
+        }
+    };
+})(bar);
+```
+
+可以给 IIFE 实现的模块配置扩展，并且无论模块是否存在：
+
+```js
+var Foo = (function (Foo) {
+  Foo.baz = "baz";
+  Foo.bar = function () {
+    console.log(Foo.baz);
+  };
+  return Foo;
+})(Foo || {});
+```