参考
LayaAir 下如何使用加载模式
LayaAir下分离模式的使用
2.0引擎的四种发布模式的区别
Laya2.0 内嵌模式、加载模式、分离模式、文件模式的场景加载创建和场景打开关闭
一、差异
内嵌模式：内嵌模式会把编辑器的UI内容生成一个场景类代码文件，代码脚本里包含IDE创建的UI场景的信息，在小游戏和轻游戏还没有问世的时候，不用考虑js 的大小，正常开发h5最常用的选择，而且不涉及异步加载打开页面速度也最快。
加载模式： 加载模式也会生成场景类，其他的UI数据信息会放到一个ui.json内，使用时需要加载这个json，同样在没有小游戏的时代不常用，场景信息可以不在js中，可以节省js包体大小，给小游戏4m包节省更多空间。使用时可以作为资源加载。
分离模式： 分离模式是在加载模式基础上，同样也会生成场景类，但他会把每个场景生成单独的场景数据文件，每次单独加载场景文件，区别于加载模式一次把所有场景都加载。在2.0以后，开发小游戏或轻游戏，为了减少主包大小和提升加载速度都是常用的模式。
文件模式(Laya2.0默认为文件模式)：文件模式是2.0特有的，为了开发小游戏而创建的，他不生成场景类，也就是能进一步减少js包的大小，使用的时候用Scene.load方式加载，区别于前三种最大的的不同就是，文件模式不能直接调用场景内的变量，需要getchild获取之后进行操作。前三种的场景类里声明了变量，有代码提示直接可以操作内部的变量。
需要注意的是，在选择js 语言开发时， 分离模式和文件模式是没有区别的，都没有场景类。
内嵌模式
import View=laya.ui.View;
import Dialog=laya.ui.Dialog;
module ui {
export class APageUI extends View {
public static uiView:any ={"type":"View","props":{"width":150,"height":31},
"child":[{"type":"Image","props":{"y":2,"x":22,"skin":"comp/bg.png"}}]};
constructor(){ super()}
createChildren():void {
super.createChildren();
this.createView(ui.APageUI.uiView);
}
}
}
加载模式和分离模式
import View=laya.ui.View;
import Dialog=laya.ui.Dialog;
module ui {
export class APageUI extends View {
constructor(){ super()}
createChildren():void {
super.createChildren();
this.loadUI("APage");
}
}
}
对比一下，在内嵌模式下，uiView那些JSON都在layaUI里，可以直接调用createView传进去。而在分离模式和加载模式下，则被分离出去了。
加载模式：
分离模式：
看一下源码就知道使用方式了
//在View.as中
/**存储UI配置数据(用于加载模式)。*/
public static var uiMap:Object = {};
/**
* @private
* 装载UI视图。用于加载模式。
* @param path UI资源地址。
*/
protected function loadUI(path:String):void {
var uiView:Object = uiMap[path];
uiView && createView(uiView);
}
加载模式和分离模式
import View=laya.ui.View;
import Dialog=laya.ui.Dialog;
module ui {
export class APageUI extends View {
constructor(){ super()}
createChildren():void {
super.createChildren();
this.loadUI("APage");
}
}
}
这里也能看到加载模式和分离模式的区别所在：如果uiMap里有JSON数据，则在createChildren时就调用了createView，达到了与内嵌模式一致的效果。而uiMap里如果没有JSON数据，则需要自己调用了。
看一下加载模式的写法：
// 程序入口
Laya.init(600, 400);
Laya.loader.load([{ url: "res/atlas/comp.json", type: Loader.ATLAS },
{ url: "res/ui.json", type: Loader.JSON }], Handler.create(this, this.onLoaded));
function onLoaded(): void {
View.uiMap = Laya.loader.getRes("test/ui.json");
//实例UI界面
var testUI: TestUI = new TestUI();
Laya.stage.addChild(testUI);
}
注意View.uiMap = Laya.loader.getRes("test/ui.json");
分离模式则不需要处理View.uiMap,而是在自己的单独页面里用createView调用自己的json文件
class TestUI extends ui.test.TestPageUI {
createChildren():void {
this.createView(Laya.loader.getRes("test/TestPage.json"));
super.createChildren();
}
如果希望这个调用json的操作，能在IDE中自动处理，可以参考编辑器选择分离模式生成TS代码时能自动在createChildren里加上createView调用代码么?
自行修改LayaAirIDE生成ui代码所调用的脚本，文件名是LayaAirCmdTool.max.js.打开这个js之后读一下行号为21205：CodeManager.createByDir这个函数。。这个函数是导出ui代码的，重点看一下21281这一行
code=CodeManager.objToUI(obj,tFile);好的，跳转到这个objToUI的函数定义的地方：21425行，是这个函数的开始位置，函数不长，我相信你有一百种方法，在字符串中塞入自己想要的内容呢。
二、Laya1.0项目使用效果
以实际项目为例，在index.html中有，如果是内嵌模式，这个js文件有506K。如果使用分离模式，这个JS文件就变成78K，而分离出来的UI文件夹则是364K。如果是加载模式，ui.json是368K大小，和分离模式差不太多。很显然，layaUI.max.all.js这个文件变小，会让index.html加载速度变快很多。
index.html需要加载的目前有几大部分：
NotoSans-Bold.woff 25k
core.min.js 276k
webgl.min.js 157k
filter.min.js 5k
html.min.js 18k
ui.min.js 107k
Laya引擎库合计563k
第三方库：
externalLib.min.js 414k
gameLib.min.js 98k
player.min.js 801k
js/ui/layaUI.max.all.js 506k 可以使用分离模式变成78k(分离出来的json是368k)
纯js的加载页面，太复杂的效果不好控制，并且引入laya引擎后还要移除。好处是能节省laya引擎库的563k。目前考虑用laya做一个首次加载页面，先把自己用的资源加载显示，再把第三方库、项目其它资源加载进来。这样在发布时，用IDE自带的压缩合并JS选项就不适用了，需要把首次加载页面用到的JS使用分离模式单独打包成一个JS文件，把剩余的JS打包成另外的JS文件。这个可以用GULP脚本来做，通过读取index.html标签中引用的JS来进行分离。
三、Laya2.0项目
1.加载模式
内嵌模式加载太慢不说了，这里以上面Laya1.0的加载模式为思路做了测试，发现挺麻烦的。
import {ui} from "./ui/layaMaxUI";
.......
onConfigLoaded(): void {
//加载IDE指定的场景
Laya.loader.load('ui.json',Laya.Handler.create(this, this.gameStart));
}
gameStart():void{
Laya.View.uiMap = Laya.Loader.getRes('ui.json');
var sc = new ui.Hello2UI();
Laya.stage.addChild(sc);
受laya2.0影响，文件开头要先import那个UI文件，但是运行发现报错，找不到Hello.json。奇怪啊，明明用的加载模式，怎么还像分离模式一样去找那个单独的json呢。
原来layaMaxUI.ts是这样写的：
export class Hello2UI extends Scene {
constructor(){ super()}
createChildren():void {
super.createChildren();
this.loadScene("Hello2");
}
}
对照一下Scene的源码：
/**
* @private 兼容老项目
* 装载场景视图。用于加载模式。
* @param path 场景地址。
*/
public function loadScene(path:String):void {
var url:String = path.indexOf(".") > -1 ? path : path + ".scene";
var view:Object = Laya.loader.getRes(url);
if (view) {
createView(view);
} else {
Laya.loader.load(url, Handler.create(this, createView), null, Loader.JSON);
}
}
这里注释里写着兼容老项目的加载模式，可是createView传入的那个view取值方式不对，应该是Laya.View.uiMap[url]，这应该是引擎BUG，估计以后会修复。暂时可以自己创建一个scene:
export default class Hello2Scene extends Laya.Scene {
constructor() {
super();
this.createView(Laya.View.uiMap['Hello2']);
}
}
2.分离模式
分离模式会生成单独的json，所以像上面loadScene找不到单独json文件的引擎BUG就不会出现了。但是写法仍然是差不多的，只是不用再设置Laya.View.uiMap = Laya.Loader.getRes('ui.json');而已。
//layaMaxUI.ts
export module ui {
export class Hello1UI extends Scene {
public tesImg:Laya.Image;
constructor(){ super()}
createChildren():void {
super.createChildren();
this.loadScene("Hello1");
}
}
}
//Hello1Scene.ts
import { ui } from "./ui/layaMaxUI";
export default class Hello1Scene extends ui.Hello1UI {
createChildren():void {
super.createChildren();
console.log('this.testImg',this.tesImg);
this.on('onViewCreated',this,this.onViewCreatedHandler);
}
onViewCreatedHandler():void{
console.log("this.testImg:", this.tesImg);
}
}
//Main.ts
onConfigLoaded(): void {
//加载IDE指定的场景
//GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
var sc = new Hello1Scene();
Laya.stage.addChild(sc);
}
这里从测试代码里可以看出，createChildren里居然访问不到页面的变量this.testImg，这在laya1.0里是可以正常访问的。只能参考引擎的Scene代码，在onViewCreated事件里，才能访问到。
scene.on("onViewCreated", null, function():void {
complete && complete.runWith(scene)
})
scene.createView(obj);
所以，上面的这种写法、思维方式，还是laya1.0时代仿flash时代的套路，是时候改变一下了，laya2.0的组件化封装场景Scene、runtime、prefab