使用cocos creator开发微信小游戏(七) 模块化

Cocos Creator 允许你将代码拆分成多个脚本文件，并且让它们相互调用。要实现这点，你需要了解如何在 Cocos Creator 中定义和使用模块，这个步骤简称为模块化。

如果你还不确定模块化究竟能做什么，模块化相当于：

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

模块化使你可以在 Cocos Creator 中引用其它脚本文件：

1. 访问其它文件导出的参数
2. 调用其它文件导出的方法
3. 使用其它文件导出的类型
4. 使用或继承其它 Component

Cocos Creator 中的 JavaScript 使用和 Node.js 几乎相同的 CommonJS 标准来实现模块化，简单来说：

• 每一个单独的脚本文件就构成一个模块
• 每个模块都是一个单独的作用域
• 以同步的 require 方法来引用其它模块
• 设置 module.exports 为导出的变量

引用模块

require
除了 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 方法进行了重写。

定义模块

定义组件
每一个单独的脚本文件就是一个模块，例如前面新建的脚本 Rotate.js：

// Rotate.js

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

当你在脚本中声明了一个组件，Creator 会默认把它导出，其它脚本直接 require 这个模块就能使用这个组件。

定义普通 JavaScript 模块
模块里不单单能定义组件，实际上你可以导出任意 JavaScript 对象。假设有个脚本 config.js

// config.js

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

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

现在如果我们要在其它脚本中访问 cfg 对象：

// 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”。