# PixiJS 切換場景（1）Factory Function
###### tags: `PixiJS`
2022.10.19(Wed.)

## ▉ Introduction
為了學習切換場景，所以先看了[奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)的文章，裡面提到了一篇文章「[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)」，然後打開來後發現...我在看的程式碼語言是JavaScript嗎？（完全看不懂QQ）

### Keywords
整理一些從[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)中看見的Keywords：
module, export, class, constructer, super, extends

不過在學習上述關鍵字的路上，碰到了更多的關鍵字...所以決定乘著這個機會，一步步的把他補齊。

****

## ▉ Factory Function
不過在學習上述關鍵字的路上，就碰到了這個專有名詞「Factory Function」。

越看越熟悉，這才發現不就是之前PIXIJS教程中提供的Treasure Hunter Game裡`keyboard（）` 這個自定義函數裡面的寫法嗎！原來他是有專有名詞的。

來回顧一下當時的程式碼：

function keyboard(keyCode){
    var key = {};
    key.code = keyCode;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;
    key.downHandler = function(event){
        if(event.keyCode === key.code){
            if(key.isUp && key.press)key.press();
            key.isDown = true;
            key.isUp = false;
        }
        event.preventDefault();
    }
    key.upHandler = function(event){
        if(event.keyCode === key.code){
            if(key.isDown && key.release)key.release;
            key.isDown = false;
            key.isUp = true;
        }
        event.preventDefault();
    }
    
    window.addEventListener(
        "keydown", key.downHandler.bind(key), false
    );
    window.addEventListener(
        "keyup", key.upHandler.bind(key), false
    );
    
    return key;
}

＊＊＊

所以說，什麼是Factory Function呢？

> 以下將從[What is Factory Function in JavaScript? - JS Tutorial](https://www.youtube.com/watch?v=lE_79wkP-1U)這個yt影片以及[The Web Developer Bootcamp 2022](https://www.udemy.com/course/the-web-developer-bootcamp/) U29整理出一些重點出來。

先用一句話概括他：「Factory Function is just a function that create objects and returns them.」也就是在函式中創造物件後，回傳這個物件，簡單來看就是如下程式碼。

function factory(){
    return {...}
}

這時可能會有些疑問，為什麼不能直接創造物件就好了呢？如下方所示，不是更加簡單明瞭嗎？

const object = {...}

當然也是可以的！但是如果你需要多個物件，例如說：

const Sam = {
    name: "Sam",
    talk(){
        return "hello I am ${this.name}"
    }
}
const Sean = {
    name: "Sean",
    talk(){
        return "hello I am ${this.name}"
    }
}

可能會想說不就多複製貼上幾次就好了嗎？但是當一樣的程式碼寫了兩遍以上，若未來出現了bug，或者哪裡需要修正，就得更正多次（而且更正的東西還是一模一樣的）。

一般來說，我們只希望相同的邏輯出現1次就好，如此一來，有bug需要修正，也只需要1次即可。

所以現在想像有一家factory（工廠），我們把金屬、塑膠等等的原材料送進一家工廠，而工廠執行一些工作之後，就可以生產出一台車子。

現在把上面的程式碼改成利用Factory Function來完成：

function createPerson(name){
    var talkObject = {};
    talkObject.name = name;
    talkObject.talk = function(){
        return `hello I am ${this.name}`;
    }
    return talkObject;
}

這樣當我要使用這個talk()函式時，只要如下呼叫即可：

const Sam = createPerson("Sam");
Sam.talk(); //hello I am Sam.

列出一些Factory Function的優點：
1. Simple
2. No duplicates（不會重複多次）
3. Data Privacy（不能隨意更改）

****

### 參考資料
* [奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)
* [Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)
* [ES6 的 Class 、super 的特例與繼承](https://ithelp.ithome.com.tw/articles/10200658)（推）
* [How to export a Class in JavaScript](https://bobbyhadz.com/blog/javascript-export-class)
* [[JS] JavaScript 模組（ES Module）](https://pjchender.dev/javascript/js-es-module/)
* [The Web Developer Bootcamp 2022](https://www.udemy.com/course/the-web-developer-bootcamp/) U29：Prototypes, classes, OOP