CocosCreator learning modular script

Cocos Creator modular script

Cocos Creator allows you to split your code into multiple script files and let them call each other. This step is simply called modularization.

Modularity allows you to reference other script files in Cocos Creator:

• Access parameters exported from other files
• Call other file export methods
• Use other file export types
• Use or inherit other Component

JavaScript in Cocos Creator uses CommonJS standards that are almost the same as Node.js to achieve modularity. In short:

• Each separate script file constitutes a module
• Each module is a separate scope
• Use the synchronous require method to reference other modules
• Set module.exports to the exported variable

When you declare a component in a script, Creator will export it by default, and other scripts can use this component by directly requiring this module.

// Rotate.js

cc.Class({
   extends: cc.Component,
   // ...
}); SinRotate.js

// SinRotate.js

var Rotate = require("Rotate");

var SinRotate = cc.Class({
    extends: Rotate,
    update: function (dt) {
        this.rotation += this.speed * Math.sin(dt);
    }
});

Modules can not only define components, but you can actually export any JavaScript object. Suppose there is a script config.js :

// config.js - v2

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

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

module.exports = cfg;

Now if we want to access the cfg object from another script:

// player.js

var config = require("config");
cc.log("speed is", config.moveSpeed);

The default value of module.exports is:
When your module.exports has no definition, Creator will automatically set exports to the Component defined in the script. If the script does not define a Component but defines another type of CCClass, exports will be automatically set to the defined CCClass.

Exporting variables

module.exports is an empty object ( {} ) by default, and you can add new fields directly to it.

// foobar.js:

  module.exports.foo = function () {
      cc.log("foo");
  };
  module.exports.bar = function () {
      cc.log("bar");
  };

//test.js:

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

The value of module.exports can be any JavaScript type.

// foobar.js:

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

//test.js:

  var foobar = require("foobar");
  var foo = new foobar.FOO();
  cc.log(foo.type); // "foo"
  cc.log(foobar.bar); // "bar"

The above is the detailed content of modular script learning in CocosCreator. For more information about modular script of CocosCreator, please pay attention to other related articles on 123WORDPRESS.COM!