polished_project_es6 源码分析 知识点总结

项目链接：https://github.com/cocos-creator/tutorial-first-game/tree/master/polished_project_es6

1.import加载模块

//Game.js
import Player from "./Player";
import ScoreFX from "./ScoreFX";
import Star from "./Star";

// Player.js
export default class NewScript extends cc.Component{}

在Player.js中， export default命令为模块指定默认输出，导出对外默认类——NewScript， 类名NewScript也是可以省略的

Game.js加载该模块时，import命令可以为该默认类指定任意名字——Player。需要注意的是，这时import命令后面，不使用大括号

2.const {ccclass, property} = cc._decorator

// Game.js
const {ccclass, property} = cc._decorator;

这是CommonJS的语法，const加一对大括号，大括号里用两个变量去接收cc._decorator模块的两个输出变量。大括号里面的变量名，必须与被导入模块（cc._decorator）对外接口的名称相同

_decorator 模块：一些 JavaScript 装饰器，目前可以通过 “cc._decorator” 来访问。 （这些 API 仍不完全稳定，有可能随着 JavaScript 装饰器的标准实现而调整）

3.@ccclass

@ccclass
export default class NewScript extends cc.Component { }

ccclass(); 将标准写法的 ES6 Class 声明为 CCClass

const {ccclass} = cc._decorator;

// define a CCClass, omit the name
@ccclass
class NewScript extends cc.Component {
    // ...
}

// define a CCClass with a name
@ccclass('LoginData')
class LoginData {
    // ...
}

4.@property

property(); 定义 CCClass 所用的属性

const {ccclass, property} = cc._decorator;

@ccclass
class NewScript extends cc.Component {
    @property({
        type: cc.Node
    })
    targetNode1 = null;

    @property(cc.Node)
    targetNode2 = null;

    @property(cc.Button)
    targetButton = null;

    @property
    _width = 100;

    @property
    get width () {
        return this._width;
    }

    @property
    set width (value) {
        this._width = value;
    }

    @property
    offset = new cc.Vec2(100, 100);

    @property(cc.Vec2)
    offsets = [];

    @property(cc.SpriteFrame)
    frame = null;
}

上面的代码相当于

var NewScript = cc.Class({
    properties: {
        targetNode1: {
            default: null,
            type: cc.Node
        },

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

        targetButton: {
            default: null,
            type: cc.Button
        },

        _width: 100,

        width: {
            get () {
                return this._width;
            },
            set (value) {
                this._width = value;
            }
        },

        offset: new cc.Vec2(100, 100)

        offsets: {
            default: [],
            type: cc.Vec2
        }

        frame: {
            default: null,
            type: cc.SpriteFrame
        },
    }
});

5.getComponent()

node.getComponent();

获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。

传入参数也可以是脚本的名称

newStar.getComponent(Star).init(this);

6.extends cc.Component

Component 类型：所有附加到节点的基类

注意：不允许使用组件的子类构造参数，因为组件是由引擎创建的