3-5 ES6与小游戏资源加载器的封装

res资源先加载到项目里。这里是图片资源。

关于资源加载的两个类，Resource和ResourceLoader.

export不仅仅可以用在类上，也可以用来变量和function上，都是相通的。但是有一点要记得，export后面一定要跟上变量的声明。它是把这个变量提供出去，并不是提供这个变量的值。export的是这个变量的引用，而不是这个变量的值。

export const Resources=[

['background','res/background.png'],

    ['birds','res/birds.png'],

    ['land','res/land.png'],

    ['pencilDown','res/pie_down.png'],

    ['pencilUp','res/pie_up.png'],

    ['start_Button','res/start_button.png']

];

资源文件只有两个，另外一个是ResourceLoader.js

//资源文件资源文件加载器，确保只有资源文件全部加载之后才开始渲染。

import {Resources}from "./Resources.js";  //这里要加js

export  class ResourceLoader {

        map =null; //语法错误，这一句去掉就好了。

        constructor(){

        this.map =new Map(Resources); //这里是直接把一个数组塞进去了。

        for(let [key,value] of this.map)

//这是一个循环遍历，如果打印的话 console.log(key,value);可以看出其中key是键值，也就是名称，

                    {const image = new Image();

                     image.src = value;

                        this.map.set(key,image); } 

//value是地址，这里一个循环，将地址换成image实例，并且实例有src属性，属性是对应value地址。

        }

        onloaded(callback) {

                    let loadedCount = 0;

                    for (let value of this.map.values()) {

                      }

                    //注意这个循环，只要其中value进行循环，不用管key的值。

            }

}

在Main.js中引入ResourceLoader ，

//主控制类，初始化整个游戏的精灵，作为游戏开始入口

import {ResourceLoader}from "./js/base/ResourceLoader.js";

export class Main {

constructor(){

        console.log('nihao');

        new ResourceLoader()

}

}

这时候，浏览器会报错， ResourceLoader.js中       map =null;语法错误，这一句去掉就好了。

Map数据结构，是一个键值对，会以key value 存储。有set get方法。其中的值是唯一的。初始化的时候，可以不断set，还可以直接塞进去一个数组。

let 和var作用域是不一样的。

下面是使用资源加载器：在main.js里面