From cd3e48927bc71d109d54f41a14a7dd8f27306228 Mon Sep 17 00:00:00 2001 From: Xicheng Guo Date: Mon, 8 Jul 2024 11:49:27 +0800 Subject: [PATCH] add understand-module md --- src/.vitepress/config.mts | 14 +---- src/.vitepress/sidebars/ecma-script.yaml | 9 +++ .../ecma-script/module/understand-module.md | 56 +++++++++++++++++++ src/public/images/svg/All.svg | 2 +- 4 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 src/javascript/ecma-script/module/understand-module.md diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts index 043a9aa..e45463d 100644 --- a/src/.vitepress/config.mts +++ b/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" }], }, }) ); diff --git a/src/.vitepress/sidebars/ecma-script.yaml b/src/.vitepress/sidebars/ecma-script.yaml index 25c445d..457a9ce 100644 --- a/src/.vitepress/sidebars/ecma-script.yaml +++ b/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 diff --git a/src/javascript/ecma-script/module/understand-module.md b/src/javascript/ecma-script/module/understand-module.md new file mode 100644 index 0000000..4165461 --- /dev/null +++ b/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 || {}); +``` diff --git a/src/public/images/svg/All.svg b/src/public/images/svg/All.svg index 36f1e2d..0c2011f 100644 --- a/src/public/images/svg/All.svg +++ b/src/public/images/svg/All.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file