《laya源码分析》四种UI加载模式

 laya提供4中UI加载模式：内嵌模式，加载模式，分离模式，文件模式（默认）

这些模式的区别就是我的场景UI数据究竟放哪里。

内嵌模式：内嵌模式会把编辑器的UI内容生成一个场景类代码文件，代码脚本里包含IDE创建的UI场景的信息，在小游戏和轻游戏还没有问世的时候，不用考虑js 的大小，正常开发h5最常用的选择，而且不涉及异步加载打开页面速度也最快

生成场景类，会增加bundle.js包的体积

简单来讲：bundle.js内包含了UI信息

适用ui资源+js代码构建的bundle.js包总内存小于4m的情况

 

加载模式： 加载模式也会生成场景类（layaMaxUI.ts），其他的UI数据信息会放到一个ui.json内，使用时需要加载这个json，同样在没有小游戏的时代不常用，场景信息可以不在js中，可以节省js包体大小，给小游戏4m包节省更多空间。使用时可以作为资源加载。

生成ui.json，UI信息包含在ui.json里面

简单来讲：bundle.js内不含有ui信息，减少包体体积，使用场景需要自己加载ui.json，然后去new->addChild，同时页面过大时会导致加载缓慢，后续不需要在加载各个ui的信息

Laya.loader.load("ui.json", Laya.Handler.create(this, this.onLoadUI));
 
private onLoadUI{
    Laya.View.uiMap = Laya.loader.getRes("ui.json");
    Laya.stage.addChild(new TestView());
}

export default class TestView extends Laya.View {
    constructor() {
        super();
    }
 
    createChildren(){
        super.createChildren();
        this.createView(Laya.View.uiMap["test/TestView"]);
    }
}

适用于页面较少的游戏

分离模式： 分离模式是在加载模式基础上，同样也会生成场景类（layaMaxUI.ts），但他会把每个场景生成单独的场景数据文件，每次单独加载场景文件，区别于加载模式一次把所有场景都加载。在2.0以后，开发小游戏或轻游戏，为了减少主包大小和提升加载速度都是常用的模式。

单个ui界面生成单个json，会生成很多个json文件

Laya.Scene.open("test/TestView.scene")
	
this.loadScene("test/TestView");

简单来说，一个界面生成一个ui.json，当需要显示的时候再去加载，可以有效减少加载界面的等待时间

适用页面较多，切需要加载速度快的游戏

文件模式（默认）：文件模式是2.0特有的，为了开发小游戏而创建的，他不生成场景类（layaMaxUI.ts），也就是能进一步减少js包的大小，使用的时候用Scene.load方式加载，区别于前三种最大的的不同就是，文件模式不能直接调用场景内的变量，需要getchild获取之后进行操作。前三种的场景类里声明了变量，有代码提示直接可以操作内部的变量。

ui界面生成单个json，

支持的加载方式

Laya.Scene.open("test/TestView.scene");
export default class TestView extends Laya.View {
    constructor() {
        super();
    }<br>    createChildren():void{<br>　　     super.createChildren();<br>        this.loadScene("test/TestView ");<br>    }
}

简单来说，IDE默认的加载方式，没有代码提示，不建议使用

适用于测试demo

 

现在我们知道了4种模式的区别。那么实际项目如何使用

当游戏非常小（小于4M）时，推荐内嵌模式

正常推荐使用 加载模式和分离模式

不建议使用文件模式