在還沒閱讀 Module 之前，對 Module 這個詞陌生又害怕;

於是我要展開今天份的學習了 ...

Module

1. 和 class 一樣，將 data 和 behaviors 結合成一個 logical units ( a module )
2. 使用 module 以直接呼叫（像呼叫函式），或者 import 即可 (看是 classic module, 還是 ESM)

Classic Module (aka module factories)

Because a module of this form is just a function, and calling it produces an "instance" of the module, another description for these functions is "module factories".

Classic Module 就像 function 一樣，當要調用 classic module 直接呼叫即可，便會回傳該 module 的 instance.

舉例三個 classic module 的例子：Publication, Book, BlogPost

    function Publication(title, author, pubDate) {
        var publicAPI = {
            print() {
                console.log(`
                    Title: ${ title }
                    By: ${ author }
                    ${ pubDate }
                `);
            }
        }
        
        return publicAPI
    }
    
    function Book(bookDetails) {
        var pub = Publication(
            bookDetails.title,
            bookDetails.author,
            bookDetails,pubDate
        );
        
        var publicAPI = {
            print() {
                pub.print();
                console.log(`
                    Publisher: ${ bookDetails.publisher }
                    ISBN: ${ bookDetails.ISBN }
                `);
            }
        };
      
        return publicAPI;
    }
    
    function BlogPost(title, author, pubDate, URL) {
        var pub = Publication(title, author, pubDate);

        var publicAPI = {
            print() {
                pub.print();
                console.log(URL);
            }
        };
        
        return publicAPI;
    }

ES Module ( ESM )

ESM 出現在 ES6 之後，其實目標與 classic module 差不多，，但主要有這三點特性

1. 有別於 classic module 需要由 function 來包圍程式碼，ESM 是以匯出整份檔案做為一個 module，一個檔案就是一個 ESM

2. 要調用 ESM 的 api，必須在 ESM 用 export 來定義 public api，其他沒有被 exported 的 data, methods 只能在定義 ESM 的 file 裡面調用

3. 調用 ESM 時，需使用 import。ESM 只會 instantiate 一次，就是你的專案第一次 import 這個 ESM 的時候; 倘若 ESM 要支援 multi-instantiations，你得提供 classic module-style factory function 在你的 ESM 裡面。
   我們來看看這個支援 multi-instantiate 的 ESM 例子：publication.js

    function printDetails(title, author, pubDate) {
        console.log(`
            Title: ${ title }
            By: ${ author }
            ${ pubDate }
        `);
    }
    
    export function create(title, author, pubDate) {
        var publicAPI = {
            print() {
                printDetails(title, author, pubDate);
            }
        };
        
        return publicAPI;
   }

blogpost.js 調用 publication.js

import {create as createPub } from 'publication.js';

function printDetails(pub, URL) {
    pub.print();
    console.log(URL);
}

export function create(title, author, pubDate, URL) {
    var pub = createPub(title, author, pubDate);
    
    var publicAPI = {
        print() {
            printDetails(pub, URL);
        }
    };
    
    return publicAPI;
}

最後，在 main.js 調用 blogpost.js

import { create as newBlogPost } from 'blogpost.js'

var forAgainstLet = newBlogPost(
    'For and against let',
    'Kyle Simpson',
    'October 27, 2014',
    'https://davidwalsh.name/for-and-against-let'
);

forAgainstLet.print();
// Title: For and against let
// By: Kyle Simpson
// October 27, 2014
// https://davidwalsh.name/for-and-against-let

給自己總結 Class 與 Module 相異之處：

Class

1. 在 class 裡要調用 data, methods 必須使用 this. prefix
   為什麼？
   在使用 class 之前，我們必須 new 一個 class 的 object instance，而 class 內的 this 會指向這個 instance。
   更多的 this 介紹在這邊：
   JavaScripts - this

2. 所有的 data, methods 都是公開可以被 access 的

Module

1. Module 不需使用要 this. ，在 module 裡要調用 data, methods 直接呼叫即可 (data and methods are accessed as identifier variablles in scope)，就像現在寫函式一樣，用 var, let, const 來宣告 data, methods

2. 只有被 return , exported 的 methods 才可以 access，其他則是不公開的，僅能在 module 的 definition 內使用

今天份的學習到這邊

[ 參考 ]

• https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#modules