polished_project_es6 源码分析 知识点总结

 

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

 

 

1.import加载模块

1 //Game.js
2 import Player from "./Player";
3 import ScoreFX from "./ScoreFX";
4 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

 1 const {ccclass} = cc._decorator;
 2 
 3 // define a CCClass, omit the name
 4 @ccclass
 5 class NewScript extends cc.Component {
 6     // ...
 7 }
 8 
 9 // define a CCClass with a name
10 @ccclass('LoginData')
11 class LoginData {
12     // ...
13 }

 

 

4.@property

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

 1 const {ccclass, property} = cc._decorator;
 2 
 3 @ccclass
 4 class NewScript extends cc.Component {
 5     @property({
 6         type: cc.Node
 7     })
 8     targetNode1 = null;
 9 
10     @property(cc.Node)
11     targetNode2 = null;
12 
13     @property(cc.Button)
14     targetButton = null;
15 
16     @property
17     _width = 100;
18 
19     @property
20     get width () {
21         return this._width;
22     }
23 
24     @property
25     set width (value) {
26         this._width = value;
27     }
28 
29     @property
30     offset = new cc.Vec2(100, 100);
31 
32     @property(cc.Vec2)
33     offsets = [];
34 
35     @property(cc.SpriteFrame)
36     frame = null;
37 }

上面的代码相当于

 1 var NewScript = cc.Class({
 2     properties: {
 3         targetNode1: {
 4             default: null,
 5             type: cc.Node
 6         },
 7 
 8         targetNode2: {
 9             default: null,
10             type: cc.Node
11         },
12 
13         targetButton: {
14             default: null,
15             type: cc.Button
16         },
17 
18         _width: 100,
19 
20         width: {
21             get () {
22                 return this._width;
23             },
24             set (value) {
25                 this._width = value;
26             }
27         },
28 
29         offset: new cc.Vec2(100, 100)
30 
31         offsets: {
32             default: [],
33             type: cc.Vec2
34         }
35 
36         frame: {
37             default: null,
38             type: cc.SpriteFrame
39         },
40     }
41 });

 

 

5.getComponent()

node.getComponent();

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

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

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

 

 

6.extends cc.Component

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

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

posted @ 2019-09-05 19:27  LayaBox  阅读(756)  评论(0)  编辑  收藏  举报