參考
runtime使用
擴(kuò)展腳本的使用
附加腳本的使用
按照上面的教程河狐，發(fā)現(xiàn)擴(kuò)展腳本實(shí)際上也是在用runtime虱朵，而附加腳本則是多了一個(gè)子元素：
一、IDE中不同表現(xiàn)
box1使用了擴(kuò)展腳本，box2使用了runtime肿孵，box3使用了附加腳本唠粥，ui文件是這樣的：
//注意，擴(kuò)展腳本和附加腳本的文件后綴不同停做，分別是prop和script
//MonkeyProp.prop:
<MonkeyProp className="game.MonkeyProp">
<prop name="speed" tips="數(shù)字類(lèi)型" type="number"/>
<prop name="userName" tips="人物名稱(chēng)" type="string"/>
</MonkeyProp>
//MonkeyProp2.script:
<MonkeyProp2 className="game.MonkeyProp2">
<prop name="speed" tips="數(shù)字類(lèi)型" type="number"/>
<prop name="userName" tips="人物名稱(chēng)" 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中晤愧，設(shè)置那兩個(gè)自定義屬性speed和userName的位置也不同。擴(kuò)展腳本因?yàn)槭抢^承自組件本身蛉腌，所以自定義屬性就在點(diǎn)擊box1時(shí)就能看到官份。而附加腳本，是直接變成box3的一個(gè)子元素了烙丛，需要選中子元素才能編輯舅巷。
image.png
二、生成的UI：
看一下生成的ui河咽，box1和box2都是同樣的類(lèi)型钠右，而box3還是Box類(lèi)型。
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部分太長(zhǎng)忘蟹，截取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"}
可以看到飒房，擴(kuò)展腳本是runtime的增強(qiáng)版：可以在IDE上指定屬性，然后把屬性值導(dǎo)出到ui配置中媚值，并且把這個(gè)值自動(dòng)映射類(lèi)的屬性中狠毯。而附加腳本，直接就是多了一個(gè)Script類(lèi)型的子元素褥芒。那么它是怎么解析的嚼松？
在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屬性
另外锰扶，這個(gè)方法也能看到runtime那些屬性映射的操作：
var props:Object = uiView.props;
for (var prop:String in props) {
var value:String = props[prop];
setCompValue(comp, prop, value, view, dataMap);
}
三献酗、擴(kuò)展腳本和附加腳本對(duì)應(yīng)的類(lèi)：
1.擴(kuò)展腳本MonkeyProp.ts
namespace game {
export class MonkeyProp extends Laya.Box {
/**攻擊速度（也可以不用定義該變量，在這里定義是為了打開(kāi)該類(lèi)的時(shí)候能夠一目了然的看到對(duì)應(yīng)的腳本中添加了哪些屬性）**/
public speed: number = 0;
/**人物名稱(chēng)（也可以不用定義該變量少辣，在這里定義是為了打開(kāi)該類(lèi)的時(shí)候能夠一目了然的看到對(duì)應(yīng)的腳本中添加了哪些屬性）**/
public userName: string = "";
/**記錄狀態(tài)**/
private boo: boolean = false;
constructor() {
super();
console.log("MonkeyProp");
//自定義的腳本會(huì)有時(shí)序問(wèn)題凌摄，所以在此添加一個(gè)延時(shí)
this.frameOnce(2, this, this.onFrame);
}
private onFrame(): void {
//通過(guò)子元素的name值獲取該對(duì)象
var userN: Laya.Label = this.getChildByName("userN") as Laya.Label;
//設(shè)置文本內(nèi)容為屬性欄中給的值
userN.text = this.userName;
this.frameLoop(1, this, this.onLoop);
}
/**
*設(shè)置幀循環(huán)，實(shí)現(xiàn)左右移動(dòng)
*
*/
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 {
/**攻擊速度（也可以不用定義該變量漓帅，在這里定義是為了打開(kāi)該類(lèi)的時(shí)候能夠一目了然的看到對(duì)應(yīng)的腳本中添加了哪些屬性）**/
public speed: number = 0;
/**人物名稱(chēng)（也可以不用定義該變量锨亏，在這里定義是為了打開(kāi)該類(lèi)的時(shí)候能夠一目了然的看到對(duì)應(yīng)的腳本中添加了哪些屬性）**/
public userName: string = "";
/**記錄狀態(tài)**/
private boo: boolean = false;
/**定義一個(gè)變量來(lái)接收Box組件實(shí)例**/
private monkeyBox:Laya.Sprite;
/**
*設(shè)置owner函數(shù)，可以直接獲取到添加附加腳本的組件實(shí)例
* @param value
*
*/
public set owner(value:any){
this.monkeyBox = value;
//自定義的腳本會(huì)有時(shí)序問(wèn)題忙干，所以在此添加一個(gè)延時(shí)
this.monkeyBox.frameOnce(2,this,this.onLoaded);
}
private onLoaded():void
{
//通過(guò)子元素的name值獲取該對(duì)象
var userN:Laya.Label = this.monkeyBox.getChildByName("userN") as Laya.Label;
//設(shè)置文本內(nèi)容為屬性欄中給的值
userN.text = this.userName;
this.monkeyBox.frameLoop(1,this,this.onLoop);
}
/**
*設(shè)置幀循環(huán)器予，實(shí)現(xiàn)左右移動(dòng)
*
*/
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;
}
}
}
}
四、應(yīng)用場(chǎng)景
1.更改Laya組件的默認(rèn)行為捐迫，但是又不想直接改源代碼乾翔，畢竟那樣更新引擎時(shí)很麻煩。此時(shí)就可以用runtime繼承一下默認(rèn)的組件，然后override一下某些方法反浓。如果是想添加一些額外屬性萌丈，并且在IDE中指定不同的值，就可以用擴(kuò)展腳本了雷则，它算是runtime的可視化增強(qiáng)版辆雾，與IDE配合得更緊密。
2.某些組件要實(shí)現(xiàn)相同的行為月劈，最常見(jiàn)的例子就是一個(gè)Image支持點(diǎn)擊縮放效果的ScaleButton度迂，用runtime就行了。參見(jiàn)官方示例中的：
image.png
3.附加腳本猜揪，目前沒(méi)有用到惭墓。個(gè)人理解，它和擴(kuò)展腳本的區(qū)別而姐，就像組合和繼承的區(qū)別一樣腊凶。
4.比較不爽的是擴(kuò)展腳本和附加腳本都需要延時(shí)：
//自定義的腳本會(huì)有時(shí)序問(wèn)題，所以在此添加一個(gè)延時(shí)
this.monkeyBox.frameOnce(2,this,this.onLoaded);
所以還是優(yōu)先考慮使用runTime吧
