模块化脚本

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

    • Java 和 Python 中的
    • C# 中的 using
    • C/C++ 中的 include
    • HTML 中的 <link>

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

    • 访问其它文件导出的参数
    • 调用其它文件导出的方法
    • 使用其它文件导出的类型
    • 使用或继承其它 Component

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

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

    如果你还不太明白，没关系，下面会详细讲解。

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

    现在要在别的脚本里访问它，可以：

    1. var Rotate = require("Rotate");

    require 完整范例

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

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

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

    备注：

    • require 可以在脚本的任何地方任意时刻进行调用。
    • 调试时，可以随时在 Developer Tools 的 Console 中 require 项目里的任意模块。

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

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

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

    定义普通 JavaScript 模块

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

    1. // player.js
    3. var config = require("config");
    4. 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
    3. var cfg = {
    4.     moveSpeed: 10,
    5.     version: "0.15",
    6.     showTutorial: true,
    8.     load: function () {
    9.         // ...
    10.     }
    11. };
    12. cfg.load();
    14. module.exports = cfg;

    这样 player.js 便能正确输出：”speed is 10”。

    备注：

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

    • module.exports 默认是一个空对象（{}），可以直接往里面增加新的字段。

      1.   // foobar.js:
      3.       cc.log("foo");
      4.   };
      5.   module.exports.bar = function () {
      6.       cc.log("bar");
      7.   };

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

      1.   // foobar.js:
      3.   module.exports = {
      4.       FOO: function () {
      5.           this.type = "foo";
      6.       },
      7.       bar: "bar"
      8.   };
      1.   // test.js:
      3.   var foobar = require("foobar");
      4.   var foo = new foobar.FOO();
      5.   cc.log(foo.type);      // "foo"
      6.   cc.log(foobar.bar);    // "bar"

    封装私有变量

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

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

    继续前往 。