优雅的模块化-上手推荐-静态单例

摘要

在 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~~

微信公众号