coocs creator模块化

cocos creator模块化的几种方式:

方式一

Rotate.js

    var Rotate = cc.Class({
    extends: cc.Component,
    properties: {
        speed: 1
    },
    update: function () {
        this.transform.rotation += this.speed;
    }
});

在helloworld.js中进行引用,这里使用require引入脚本后，因为Rotate.js中没有使用module.exports暴露出一个对象出来，所以我们在helloworld.js中进行引用的时候，需要生成对象：

let Rotate = require('Rotate');

cc.Class({
    extends: cc.Component,
    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!',

        guagua: {
            default: null,
            type: cc.Node,
        }
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text
        //方法一:模块化require只是引入了这个类，如果调用类内部的成员变量和方法，那么需要实例化一个对象才行
        let rotate = new Rotate()
        cc.info('speed:' + rotate.speed)
    },
    start() {

    },
    // called every frame
    update: function (dt) {

    },

});

方式二：

Person.js:

var Person = {
    name: 'eric',
    properties: {
        age: 20,
    },

    sayHello: function () {

        cc.info('say hello...')

    }

}
Person.sayHello()
module.exports = Person

在 helloworld.js中可以直接引用persion.js中使用module.exports = Person,进行暴露出来的对象

let p = require('Person')

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!',

        guagua: {
            default: null,
            type: cc.Node,
        }
    },

    // use this for initialization
    onLoad: function () {

        //方法二：在'组件'person中通过moudle.exports的方式暴露对象出来
        p.sayHello()
    },

    start() {

    },

    // called every frame
    update: function (dt) {

    },

});

方法三：

可以直接将“用户自定义组件”添加到相应的“Node”上面，然后就可以在这个node上面通过node.getComponent()的方式来进行引用
guagua.js

cc.Class({
    extends: cc.Component,
    move: function () {
        // create a action by cocos action system
        var action = cc.moveTo(2, 100, 100)
        this.node.runAction(action)
    },
    start() {
    },

    onLoad: function () {

    },
});

将guagua.js挂载到node节点上面：

node.jpg

helloworld.js中进行引用：

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!',

        guagua: {
            default: null,
            type: cc.Node,
        }
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text
        //如果需要操作'脚本组件'，需要先获取'node'，然后获取到挂载到这个node上面的'脚本组件'，然后才能进行运行
        this.guagua.getComponent('guagua').move()

    },

    start() {

    },

    // called every frame
    update: function (dt) {

    },


});