Cocos Creator中模块化脚本(官方文档摘录)

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 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 = "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

// ...
    }
};
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 = "bar");
};

// test.js:

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

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

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

"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: return dirty;
    },};

// test1.js:

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

// test2.js:

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

循环引用

请参考属性延迟定义

第三方模块引用请参考第三方模块引用文档