模組化指令碼

Cocos Creator 允許你將程式碼拆分成多個指令碼檔案，並且讓它們相互呼叫。要實現這點，你需要了解如何在 Cocos Creator 中定義和使用模組，這個步驟簡稱為模組化。

如果你還不確定模組化究竟能做什麼，模組化相當於：

• C/C++ 中的 include
• C# 中的 using
• Java 和 Python 中的 import
• HTML 中的 <link>

模組化使你可以在 Cocos Creator 中引用其它指令碼檔案：

• 訪問其它檔案匯出的引數
• 呼叫其它檔案匯出的方法
• 使用其它檔案匯出的型別
• 使用或繼承其它 Component

Cocos Creator 中的 JavaScript 使用和 Node.js 幾乎相同的 CommonJS 標準來實現模組化，簡單來說：

• 每一個單獨的指令碼檔案就構成一個模組
• 每個模組都是一個單獨的作用域
• 以同步的 require 方法來引用其它模組
• 設定 module.exports 為匯出的變數

如果你還不太明白，沒關係，下面會詳細講解。

在本文中，“模組”和“指令碼”這兩個術語是等價的。所有“備註”都屬於進階內容，一開始不需要了解。
不論模組如何定義，所有使用者程式碼最終會由 Cocos Creator 編譯為原生的 JavaScript，可直接在瀏覽器中執行。

引用模組

require

除了 Cocos Creator 提供的介面，所有使用者定義的模組都需要呼叫 require 來訪問。例如我們有一個元件定義在 Rotate.js

// Rotate.js

cc.Class({
   extends: cc.Component,
   // ...
});

現在要在別的腳本里訪問它，可以：

var Rotate = require("Rotate");

require 返回的就是被模組匯出的物件，通常我們都會將結果立即存到一個變數（var Rotate）。傳入 require 的字串就是模組的檔名，這個名字不包含路徑也不包含字尾，而且大小寫敏感。

require 完整範例

接著我們就可以使用 Rotate 派生一個子類，新建一個指令碼 SinRotate.js：

// SinRotate.js

var Rotate = require
 
("Rotate");

var SinRotate = cc.Class({
    extends: Rotate,
    update: function (dt) {
        this.rotation += this.speed * Math.sin(dt);
    }
});

這裡我們定義了一個新的元件叫 SinRotate，它繼承自 Rotate，並對 update 方法進行了重寫。

同樣的這個元件也可以被其它指令碼接著訪問，只要用 require("SinRotate")。

備註：

• require 可以在指令碼的任何地方任意時刻進行呼叫。
• 遊戲開始時會自動 require 所有指令碼，這時每個模組內部定義的程式碼就會被執行一次，所以之後無論又被 require 幾次，返回的始終是同一份例項。
• 除錯時，可以隨時在 Developer Tools 的 Console 中 require 專案裡的任意模組。

定義模組

定義元件

每一個單獨的指令碼檔案就是一個模組，例如前面新建的指令碼 Rotate.js：

// Rotate.js

var Rotate = cc.Class({
    extends: cc.Component,
    properties: {
        speed: 1
    },
    update: function () {
        this.transform.rotation += this.speed;
    }
});

當你在指令碼中聲明瞭一個元件，Cocos Creator 會預設把它匯出，其它指令碼直接 require 這個模組就能使用這個元件。

定義普通 JavaScript 模組

模組裡不單單能定義元件，實際上你可以匯出任意 JavaScript 物件。假設有個指令碼 config.js

// config.js

var cfg = {
    moveSpeed: 10,
    version: "0.15",
    showTutorial: true,

    load: function () {
        // ...
    }
};
cfg.load();

現在如果我們要在其它指令碼中訪問 config 物件：

// player.js

var config = require("config");
cc.log("speed is", config.moveSpeed);

結果會有報錯："TypeError: Cannot read property 'moveSpeed' of null"，這是因為 cfg 沒有被匯出。由於 require 實際上獲取的是目標指令碼內的 module.exports 變數，所以我們還需要在 config.js 的最後設定 module.exports = config：

// config.js - v2

var cfg = {
    moveSpeed: 10,
    version: "0.15",
    showTutorial: true,

    load: function () {
        // ...
    }
};
cfg.load();

module.exports = cfg;

這樣 player.js 便能正確輸出："speed is 10"。

那為什麼定義 Component 時可以不用設定 exports ？ 因為 Component 是 Cocos Creator 中的特殊型別，如果一個指令碼定義了 Component 卻沒有宣告 exports，Cocos Creator 會自動將 exports 設定為 Component。

備註：

• 在 module 上增加的其它變數是不能匯出的，也就是說 exports 不能替換成其它變數名，系統只會讀取 exports 這個變數。

更多示例

匯出變數

• module.exports 預設是一個空物件（{}），可以直接往裡面增加新的欄位。

// foobar.js:

module.exports.foo = function () {
    cc.log("foo");
};
module.exports.bar = function () {
    cc.log("bar");
};

// test.js:

var foobar = require("foobar");
foobar.foo();    // "foo"
foobar.bar();    // "bar"

• module.exports 的值可以是任意 JavaScript 型別。

// foobar.js:

module.exports = {
    FOO: function () {
        this.type = "foo";
    },
    bar: "bar"
};

// test.js:

var foobar = require("foobar");
var foo = new foobar.FOO();
cc.log(foo.type);      // "foo"
cc.log(foobar.bar);    // "bar"

封裝私有變數

每個指令碼都是一個單獨的作用域，在指令碼內使用 var 定義的區域性變數，將無法被模組外部訪問。我們可以很輕鬆的封裝模組內的私有變數：

// foobar.js:

var dirty = false;
module.exports = {
    setDirty: function () {
        dirty = true;
    },
    isDirty: function () {
        return dirty;
    },
};

// test1.js:

var foo = require("foobar");
cc.log(typeof foo.dirty);        // "undefined"
foo.setDirty();

// test2.js:

var foo = require("foobar");
cc.log(foo.isDirty());           // true

迴圈引用

第三方模組引用