模块化脚本

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

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

  • Java 和 Python 中的 import
  • C# 中的 using
  • C/C++ 中的 include
  • HTML 中的 <link>
    模块化使你可以在 Cocos Creator 中引用其它脚本文件:

  • 访问其它文件导出的参数

  • 调用其它文件导出的方法
  • 使用其它文件导出的类型
  • 使用或继承其它 Component
    Cocos Creator 中的 JavaScript 使用和 Node.js 几乎相同的 CommonJS 标准来实现模块化,简单来说:

  • 每一个单独的脚本文件就构成一个模块

  • 每个模块都是一个单独的作用域
  • 同步require 方法来引用其它模块
  • 设置 module.exports 为导出的变量
    如果你还不太明白,没关系,下面会详细讲解。
在本文中,“模块”和“脚本”这两个术语是等价的。所有“备注”都属于进阶内容,一开始不需要了解。不论模块如何定义,所有用户代码最终会由 Creator 编译为原生的 JavaScript,可直接在浏览器中运行。

引用模块

require

除了 Creator 提供的接口,所有用户定义的模块都需要调用 require 来访问。例如我们有一个组件定义在 Rotate.js

  1. // Rotate.js
  2. cc.Class({
  3. extends: cc.Component,
  4. // ...
  5. });

现在要在别的脚本里访问它,可以:

  1. varRotate=require("Rotate");

require 返回的就是被模块导出的对象,通常我们都会将结果立即存到一个变量(var Rotate)。传入 require 的字符串就是模块的文件名,这个名字不包含路径也不包含后缀,而且大小写敏感。

require 完整范例

接着我们就可以使用 Rotate 派生一个子类,新建一个脚本 SinRotate.js

  1. // SinRotate.js
  2. varRotate=require("Rotate");
  3. varSinRotate= cc.Class({
  4. extends:Rotate,
  5. update:function(dt){
  6. this.rotation +=this.speed *Math.sin(dt);
  7. }
  8. });

这里我们定义了一个新的组件叫 SinRotate,它继承自 Rotate,并对 update 方法进行了重写。

同样的这个组件也可以被其它脚本接着访问,只要用 require("SinRotate")

备注:

  • require 可以在脚本的任何地方任意时刻进行调用。
  • 游戏开始时会自动 require 所有脚本,这时每个模块内部定义的代码就会被执行一次,之后无论又被 require 几次,返回的始终是同一份实例。
  • 调试时,可以随时在 Developer ToolsConsole 中 require 项目里的任意模块。

定义模块

定义组件

每一个单独的脚本文件就是一个模块,例如前面新建的脚本 Rotate.js

  1. // Rotate.js
  2. varRotate= cc.Class({
  3. extends: cc.Component,
  4. properties:{
  5. speed:1
  6. },
  7. update:function(){
  8. this.transform.rotation +=this.speed;
  9. }
  10. });

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

定义普通 JavaScript 模块

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

  1. // config.js
  2. var cfg ={
  3. moveSpeed:10,
  4. version:"0.15",
  5. showTutorial:true,
  6. load:function(){
  7. // ...
  8. }
  9. };
  10. cfg.load();

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

  1. // player.js
  2. var config =require("config");
  3. cc.log("speed is", config.moveSpeed);

结果会有报错:"TypeError: Cannot read property 'moveSpeed' of null",这是因为 cfg 没有被导出。由于 require 实际上获取的是目标脚本内的 module.exports 变量,所以我们还需要在 config.js 的最后设置 module.exports = config

  1. // config.js - v2
  2. var cfg ={
  3. moveSpeed:10,
  4. version:"0.15",
  5. showTutorial:true,
  6. load:function(){
  7. // ...
  8. }
  9. };
  10. cfg.load();
  11. module.exports = cfg;

这样 player.js 便能正确输出:"speed is 10"。

module.exports 的默认值: 当你的 module.exports 没有任何定义时,Creator 会自动优先将 exports 设置为脚本中定义的 Component。如果脚本没定义 Component 但是定义了别的类型的 CCClass,则自动把 exports 设为定义的 CCClass。

备注:

  • module 上增加的其它变量是不能导出的,也就是说 exports 不能替换成其它变量名,系统只会读取 exports 这个变量。

更多示例

导出变量

  • module.exports 默认是一个空对象({}),可以直接往里面增加新的字段。
  1. // foobar.js:
  2. module.exports.foo =function(){
  3. cc.log("foo");
  4. };
  5. module.exports.bar =function(){
  6. cc.log("bar");
  7. };
  1. // test.js:
  2. var foobar =require("foobar");
  3. foobar.foo();// "foo"
  4. foobar.bar();// "bar"
  • module.exports 的值可以是任意 JavaScript 类型。
  1. // foobar.js:
  2. module.exports ={
  3. FOO:function(){
  4. this.type ="foo";
  5. },
  6. bar:"bar"
  7. };
  1. // test.js:
  2. var foobar =require("foobar");
  3. var foo =new foobar.FOO();
  4. cc.log(foo.type);// "foo"
  5. cc.log(foobar.bar);// "bar"

封装私有变量

每个脚本都是一个单独的作用域,在脚本内使用 var 定义的局部变量,将无法被模块外部访问。我们可以很轻松的封装模块内的私有变量:

  1. // foobar.js:
  2. var dirty =false;
  3. module.exports ={
  4. setDirty:function(){
  5. dirty =true;
  6. },
  7. isDirty:function(){
  8. return dirty;
  9. },
  10. };
  1. // test1.js:
  2. var foo =require("foobar");
  3. cc.log(typeof foo.dirty);// "undefined"
  4. foo.setDirty();
  1. // test2.js:
  2. var foo =require("foobar");
  3. cc.log(foo.isDirty());// true

循环引用

请参考属性延迟定义


继续前往 插件脚本