参考
runtime使用
扩展脚本的使用
附加脚本的使用
按照上面的教程，发现扩展脚本实际上也是在用runtime，而附加脚本则是多了一个子元素：
一、IDE中不同表现
box1使用了扩展脚本，box2使用了runtime，box3使用了附加脚本，ui文件是这样的：
//注意，扩展脚本和附加脚本的文件后缀不同，分别是prop和script
//MonkeyProp.prop:
<MonkeyProp className="game.MonkeyProp">
<prop name="speed" tips="数字类型" type="number"/>
<prop name="userName" tips="人物名称" type="string"/>
</MonkeyProp>
//MonkeyProp2.script:
<MonkeyProp2 className="game.MonkeyProp2">
<prop name="speed" tips="数字类型" type="number"/>
<prop name="userName" tips="人物名称" type="string"/>
</MonkeyProp2>
//TestGapUI.ui:
<Box x="268" y="150" appendProps="laya/pages/MonkeyProp.prop"
speed="4" userName="xxa" var="box1" editorInfo="compId=45">
<Image skin="game/doll_1.png" y="41" editorInfo="compId=43"/>
<Label text="label" x="34" fontSize="36" width="102" height="36"
name="userN" align="center" color="#100808" editorInfo="compId=44"/>
</Box>
<Box x="292" y="435" runtime="game.MonkeyProp" var="box2" editorInfo="compId=46">
<Image skin="game/doll_1.png" y="41" editorInfo="compId=47"/>
<Label text="label" x="34" fontSize="36" width="102" height="36"
name="userN" align="center" color="#100808" editorInfo="compId=48"/>
</Box>
<Box y="703" x="302" var="box3" editorInfo="compId=49">
<Image y="41" skin="game/doll_1.png" editorInfo="compId=50"/>
<Label x="34" width="102" text="label" name="userN" height="36"
fontSize="36" color="#100808" align="center" editorInfo="compId=51"/>
<Script editorInfo="source=laya/pages/MonkeyProp2.script;compId=53"/>
</Box>
在IDE中，设置那两个自定义属性speed和userName的位置也不同。扩展脚本因为是继承自组件本身，所以自定义属性就在点击box1时就能看到。而附加脚本，是直接变成box3的一个子元素了，需要选中子元素才能编辑。
image.png
二、生成的UI：
看一下生成的ui，box1和box2都是同样的类型，而box3还是Box类型。
export class TestGapUI extends View {
public box1:game.MonkeyProp;
public box2:game.MonkeyProp;
public box3:Laya.Box;
public static uiView:any ={"type":"View","props":{"width":750,"height":1334},"child":[...
constructor(){ super()}
createChildren():void {
View.regComponent("game.MonkeyProp",game.MonkeyProp);
View.regComponent("game.MonkeyProp2",game.MonkeyProp2);
super.createChildren();
this.createView(ui.TestGapUI.uiView);
}
uiView部分太长，截取box1和box2看一下：
{"type":"Box","props":{"y":150,"x":268,"var":"box1","userName":"xxa","speed":4,"runtime":"game.MonkeyProp"},
{"type":"Box","props":{"y":435,"x":292,"var":"box2","runtime":"game.MonkeyProp"},
{"type":"Box","props":{"y":703,"x":302,"var":"box3"},
"child":[{"type":"Image","props":{"y":41,"skin":"game/doll_1.png"}},
{"type":"Label","props":{"x":34,"width":102,"text":"label","name":"userN",
"height":36,"fontSize":36,"color":"#100808","align":"center"}},
{"type":"Script","props":{"userName":"extraName","speed":3,"runtime":"game.MonkeyProp2"}
可以看到，扩展脚本是runtime的增强版：可以在IDE上指定属性，然后把属性值导出到ui配置中，并且把这个值自动映射类的属性中。而附加脚本，直接就是多了一个Script类型的子元素。那么它是怎么解析的？
在View.as的createComp方法中可以看到：
if (node.type == "Script") {
if ("owner" in tChild) {
tChild["owner"] = comp;
} else if ("target" in tChild) {
tChild["target"] = comp;
}
} else if (node.props.renderType == "mask" || node.props.name == "mask") {
comp.mask = tChild;
} else {
tChild is Sprite && comp.addChild(tChild);
}
所以，附加脚本就必需要定义owner或target属性
另外，这个方法也能看到runtime那些属性映射的操作：
var props:Object = uiView.props;
for (var prop:String in props) {
var value:String = props[prop];
setCompValue(comp, prop, value, view, dataMap);
}
三、扩展脚本和附加脚本对应的类：
1.扩展脚本MonkeyProp.ts
namespace game {
export class MonkeyProp extends Laya.Box {
/**攻击速度（也可以不用定义该变量，在这里定义是为了打开该类的时候能够一目了然的看到对应的脚本中添加了哪些属性）**/
public speed: number = 0;
/**人物名称（也可以不用定义该变量，在这里定义是为了打开该类的时候能够一目了然的看到对应的脚本中添加了哪些属性）**/
public userName: string = "";
/**记录状态**/
private boo: boolean = false;
constructor() {
super();
console.log("MonkeyProp");
//自定义的脚本会有时序问题，所以在此添加一个延时
this.frameOnce(2, this, this.onFrame);
}
private onFrame(): void {
//通过子元素的name值获取该对象
var userN: Laya.Label = this.getChildByName("userN") as Laya.Label;
//设置文本内容为属性栏中给的值
userN.text = this.userName;
this.frameLoop(1, this, this.onLoop);
}
/**
*设置帧循环，实现左右移动
*
*/
private onLoop(): void {
if (this.x <= 0) {
this.boo = false;
this.x += this.speed;
}
else if (this.x < Laya.stage.width - this.width && this.boo == false) {
this.x += this.speed;
}
else if (this.x >= Laya.stage.width - this.width || this.boo == true) {
this.x -= this.speed;
this.boo = true;
}
}
}
}
2.附加脚本MonkeyProp2.ts
namespace game {
export class MonkeyProp2 {
/**攻击速度（也可以不用定义该变量，在这里定义是为了打开该类的时候能够一目了然的看到对应的脚本中添加了哪些属性）**/
public speed: number = 0;
/**人物名称（也可以不用定义该变量，在这里定义是为了打开该类的时候能够一目了然的看到对应的脚本中添加了哪些属性）**/
public userName: string = "";
/**记录状态**/
private boo: boolean = false;
/**定义一个变量来接收Box组件实例**/
private monkeyBox:Laya.Sprite;
/**
*设置owner函数，可以直接获取到添加附加脚本的组件实例
* @param value
*
*/
public set owner(value:any){
this.monkeyBox = value;
//自定义的脚本会有时序问题，所以在此添加一个延时
this.monkeyBox.frameOnce(2,this,this.onLoaded);
}
private onLoaded():void
{
//通过子元素的name值获取该对象
var userN:Laya.Label = this.monkeyBox.getChildByName("userN") as Laya.Label;
//设置文本内容为属性栏中给的值
userN.text = this.userName;
this.monkeyBox.frameLoop(1,this,this.onLoop);
}
/**
*设置帧循环，实现左右移动
*
*/
private onLoop(): void {
if (this.monkeyBox.x <= 0) {
this.boo = false;
this.monkeyBox.x += this.speed;
}
else if (this.monkeyBox.x < Laya.stage.width - this.monkeyBox.width && this.boo == false) {
this.monkeyBox.x += this.speed;
}
else if (this.monkeyBox.x >= Laya.stage.width - this.monkeyBox.width || this.boo == true) {
this.monkeyBox.x -= this.speed;
this.boo = true;
}
}
}
}
四、应用场景
1.更改Laya组件的默认行为，但是又不想直接改源代码，毕竟那样更新引擎时很麻烦。此时就可以用runtime继承一下默认的组件，然后override一下某些方法。如果是想添加一些额外属性，并且在IDE中指定不同的值，就可以用扩展脚本了，它算是runtime的可视化增强版，与IDE配合得更紧密。
2.某些组件要实现相同的行为，最常见的例子就是一个Image支持点击缩放效果的ScaleButton，用runtime就行了。参见官方示例中的：
image.png
3.附加脚本，目前没有用到。个人理解，它和扩展脚本的区别，就像组合和继承的区别一样。
4.比较不爽的是扩展脚本和附加脚本都需要延时：
//自定义的脚本会有时序问题，所以在此添加一个延时
this.monkeyBox.frameOnce(2,this,this.onLoaded);
所以还是优先考虑使用runTime吧
