1.通常的写一个类的方式
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!'
},
// use this for initialization
onLoad: function () {
this.label.string = this.text;
},
// called every frame
update: function (dt) {
},
//设置UI相关函数
showHello() {
},
//触摸事件相关函数
onTouchHello() {
},
//网络消息相关函数
onMsgHello() {
},
});
缺陷：
通常来说，一个类里面会包含不止一个showXXX()，onTouchXXX()，onMsgXXX()，这样会导致这个类文件过于庞大，可能一个类会包含几千行代码，找某个东西的时候不是很清晰，那么如何解决这个问题？
2.C++里面一般会如何维护一个庞大的类
HelloWorld.png
//HelloWorld.h
#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include "cocos2d.h"
class HelloWorld : public cocos2d::Scene
{
public:
static cocos2d::Scene* scene();
...
//
void showHello();
//
void onTouchHello(Ref* sender);
//
void onMsgHello();
};
#endif // __HELLOWORLD_SCENE_H__
//HelloWorld.cpp
#include "HelloWorld.h"
Scene* HelloWorld::scene()
{
return HelloWorld::create();
}
//HelloWorldShowUI.cpp
#include "HelloWorld.h"
void HelloWorld::showHello()
{
}
//HelloWorldTouchEvent.cpp
#include "HelloWorld.h"
void HelloWorld::onTouchHello(Ref* sender)
{
}
//HelloWorldMsgCallfunc.cpp
#include "HelloWorld.h"
void HelloWorld::onMsgHello()
{
}
如上所示，我们可以把一个类分成多个文件，不同的文件对应不同种类的相关函数，这样的话，寻找相应的函数就会方便很多。那么，如何用JS实现这种多文件描述同一个类结构？
3.JS设计一种多文件描述同一个类的方式
关键点
- JS的实例可以获取成员的定义
Object.getOwnPropertyDescriptor(obj, prop)
- JS的实例可以动态增加成员
Object.defineProperty(obj, prop, descriptor)
想法
- HelloWorld的每个种类(showXXX、onTouchXXX、onMsgXXX)的函数的集合分别组成一个类
- HelloWorld构造函数里面，获取其他文件中的函数属性并定义到自身原型链中
实现
-
脚本的文件结构
脚本文件结构
//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!'
},
// use this for initialization
onLoad: function () {
this.showHello()
},
// called every frame
update: function (dt) {
},
});
//HelloWorldShowUI.js
cc.Class({
extends: cc.Component,
properties: {
},
showHello() {
this.label.string = this.text;
},
});
//HelloWorldTouchEvent.js
cc.Class({
extends: cc.Component,
properties: {
},
onTouchHello() {
},
});
//HelloWorldMsgCallfunc.js
cc.Class({
extends: cc.Component,
properties: {
},
onMsgHello() {
},
});
- HelloWorld构造函数或onLoad里面导入其他文件
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!'
},
// use this for initialization
onLoad: function () {
//提取其他文件中的函数到当前对象
let scripts = [
'HelloWorldShowUI',
'HelloWorldMsgCallfunc',
'HelloWorldTouchEvent',
]
for (let i = 0; i < scripts.length; i++) {
let script = scripts[i]
let cls = require(script)
let instance = new cls()
this.transferProto2Object(this, instance)
}
this.showHello()
},
// called every frame
update: function (dt) {
},
//导入其他类中的属性到当前实例
//每个类都支持继承，且最终必须继承自cc.Component，把cc.Component当成探索终点
transferProto2Object: function (obj, instance) {
let regex3 = new RegExp('__\\w+__')
let proto = instance.__proto__
//最大搜索深度3，即当前只能继承一次
let afterfilter = []
let inherit = 3
for (let i = 0; i < inherit; i++) {
if (proto.__classname__ != 'cc.Component') {
//过滤系统函数
let notsystem = Object.keys(proto)
// cc.log("notsystem = ", notsystem)
for (let i =0; i < notsystem.length; i++) {
let test = regex3.test(notsystem[i])
if (!test) {
let descriptor = Object.getOwnPropertyDescriptor(proto, notsystem[i])
afterfilter.push({
name: notsystem[i],
descriptor: descriptor,
})
}
}
proto = proto.__proto__
} else {
break
}
}
//定义到当前类对象
for (;;) {
if (afterfilter.length == 0) {
break
}
let element = afterfilter.pop()
Object.defineProperty(obj.__proto__, element.name, element.descriptor)
}
},
});
缺陷
节点的触摸事件必须使用代码注册，无法使用拖拽方式
网友评论