優雅的模塊化-上手推薦-靜態單例

摘要

在 CocosCreator 中我們經常有着在 A 腳本中調用 B 和 C 腳本中方法的需求，而循環引用和大量的 require/import 讓新手頭疼，今天 KUOKUO 分享一個簡單的靜態單例管理方式，簡單易用。

正文

使用版本

CocosCreator 版本 2.2.2

一般寫法

在官方文檔中，關於腳本的引用，是這樣寫的：

var Player = require("Player");

cc.Class({
    extends: cc.Component,
    properties: {

        // 聲明 player 屬性，這次直接是組件類型
        player: {
            default: null,
            type: Player
        }
    },

    start: function () {
        // 、、、
    }

});

在調用時我們要先在 CocosCreator 中拖入掛載 Player 腳本的節點。那麼有沒有更優雅的寫法呢？當然！

管理模塊JS版本

假設我們有 A.js B.js C.js 這三個腳本，我們要在 A 中使用 B 的方法，B 和 C 之間相互調用其方法。我們可以新建一個 StaticInstance.js 腳本做管理，然後在裏面聲明三個變量。

StaticInstance.js

/** 管理實例 */
module.exports = {
    aInstance: null,
    bInstance: null,
    cInstance: null
}

接下來我們看 ABC 這三個腳本，在 onLoad 生命週期中先將 this 傳入，這樣在 start 生命週期時就可以使用其他的腳本 this 了，因爲 onLoad 必然先於 start 執行完，如果在 onLoad 裏進行使用，有可能還沒賦值完，出現 null 的情況。

A.js

var StaticInstance = require('StaticInstance');

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad () {
        StaticInstance.aInstance = this;
    },

    start () {
        StaticInstance.bInstance.sayHello('A');
    },

    sayHello (from) {
        console.log(from + '-> A Hello!');
    }

});

B.js

var StaticInstance = require('StaticInstance');

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad () {
        StaticInstance.bInstance = this;
    },

    start () {
        StaticInstance.cInstance.sayHello('B');
    },

    sayHello (from) {
        console.log(from + '-> B Hello!');
    }

});

C.js

var StaticInstance = require('StaticInstance');

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad () {
        StaticInstance.cInstance = this;
    },

    start () {
        StaticInstance.bInstance.sayHello('C');
    },

    sayHello (from) {
        console.log(from + '-> C Hello!');
    }

});

這樣，我們就實現了 A->B 的調用，和 BC 之間相互調用。

管理模塊TS版本

再寫個 TS 版本的。

StaticInstance.ts

import A from "./A"
import B from "./B"
import C from "./C"

export class StaticInstance {
    static aInstance: A = null
    static bInstance: B = null
    static cInstance: C = null
}

A.ts

import { StaticInstance } from "./StaticInstance"

const {ccclass, property} = cc._decorator

@ccclass
export default class A extends cc.Component {

    onLoad () {
        StaticInstance.aInstance = this
    }

    start () {
        StaticInstance.bInstance.sayHello('A')
    }

    sayHello (from: string) {
        console.log(from + '-> A Hello!')
    }

}

B.ts

import { StaticInstance } from "./StaticInstance"

const {ccclass, property} = cc._decorator

@ccclass
export default class B extends cc.Component {

    onLoad () {
        StaticInstance.bInstance = this
    }

    start () {
        StaticInstance.cInstance.sayHello('B')
    }

    sayHello (from: string) {
        console.log(from + '-> B Hello!')
    }

}

C.ts

import { StaticInstance } from "./StaticInstance"

const {ccclass, property} = cc._decorator

@ccclass
export default class C extends cc.Component {

    onLoad () {
        StaticInstance.cInstance = this
    }

    start () {
        StaticInstance.bInstance.sayHello('C')
    }

    sayHello (from: string) {
        console.log(from + '-> C Hello!')
    }

}

結語

文章有沒有帶給你收穫呢！O(∩_∩)O~~

微信公衆號