> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/module/module-pattern.md).

# module pattern

[JS](/web/js.md) ⟩ [module](/web/js/module.md) ⟩ module pattern

{% hint style="success" %} <mark style="color:orange;">**was**</mark>**&#x20;**<mark style="color:yellow;">**used**</mark> as a module system before the introduction of [native JavaScript modules](/web/js/module/es.md), implemented using [IIFE](/web/js/val/func/expr/iife.md).
{% endhint %}

{% tabs %}
{% tab title="✨ 範例" %}

* [closure as object](/web/js/val/func/closure/examples/closure-as-object.md)
  {% endtab %}

{% tab title="💈範例" %}

* replit：[module pattern](https://replit.com/@pegasusroe/module-pattern#index.js)

```javascript
// ⭐️ object returned by IIFE
//     ⭡
//    ╭ ╮  ╭─────────── ⭐️ IIFE ────────────╮
const foo = (function() {
    
    // internal function
    function sayHi(name) {
        console.log(`Hey, my name is ${name}`);
    }
    
    // ⭐️ exposing the variables
    return { sayHi };
    
})();

// ⭐️ accessing exposed methods
foo.sayHi("Bar");
```

{% endtab %}

{% tab title="👥 相關" %}

* [CommonJS](/web/js/module/commonjs.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] MakeUseOf ⟩ [An Introduction to Module Systems in JavaScript](https://www.makeuseof.com/javascript-module-systems/)
* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) > Ch. 8 > [Modules](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch8.md#modules-stateful-access-control)
  {% endtab %}
  {% endtabs %}