Cocos Creator 允许你将代码拆分成多个脚本文件,并且让它们相互调用。要实现这点,你需要了解如何在 Cocos Creator 中定义和使用模块,这个步骤简称为模块化。
如果你还不确定模块化究竟能做什么,模块化相当于:
- C/C++ 中的
include
- C# 中的
using
- Java 和 Python 中的
import
- HTML 中的
<link>
模块化使你可以在 Cocos Creator 中引用其它脚本文件:
Cocos Creator 中的 JavaScript 使用和 Node.js 几乎相同的 CommonJS 标准来实现模块化,简单来说:
如果你还不太明白,没关系,下面会详细讲解。
在本文中,“模块”和“脚本”这两个术语是等价的。所有“备注”都属于进阶内容,一开始不需要了解。
不论模块如何定义,所有用户代码最终会由 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
循环引用
请参考属性延迟定义
第三方模块引用请参考第三方模块引用文档
update
方法进行了重写。同样的这个组件也可以被其它脚本接着访问,只要用require("SinRotate")
。
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"