使用js实现ajax加载json文件的组件开发

需求:

1.调用组件的一个静态方法,输入json文件名,路径,回调函数
2.回调函数中调用另外一个方法,输入想要的数据id,就能过去该数据
3.回调函数不用执行

分析:

通过ajax引入传入地址的json文件
另外一个静态方法获取json文件中具体数据

组件封装

export default class ImgSprite{
    static jsonList;
    static baseUrl;
    // json文件名数组  json文件地址   回调函数  
    static init(arr,baseUrl,callback){  //json文件的同步加载   同时执行外部回调函数
       var list=[];
       ImgSprite.baseUrl=baseUrl  //文件地址
       for(var i=0;i<arr.length;i++){
           list.push(ImgSprite.getJSON(baseUrl+arr[i]+".json")); //传入文件地址  返回Promise放入到list数组中
       }
      
       Promise.all(list).then(function(_list){//通过promise.all实现json文件内容的同步加载
        
        ImgSprite.jsonList=_list;//把json文件数组转变为全局的  jsonList
        callback();   //触发传进来的回调函数
       })
    }
    static getJSON(src){    //json文件的引入
        return new Promise(function(resolve,reject){
            var xhr=new XMLHttpRequest();
            xhr.onload=function(){
                resolve(JSON.parse(xhr.response)); //json文件内容,通过JSON.parse转换为对象,触发resolve函数
            }
            xhr.open("GET",src);
            xhr.send();
        })
    }

    static getImg(name){  //获取精灵图某个位置的图片
        var o;
        var file;
        for(var i=0;i<ImgSprite.jsonList.length;i++){
           o=ImgSprite.jsonList[i].frames.filter(item=>{
                return item.filename===name;   //通过filename来筛选数据
            })[0];
            if(o){  //如果输入的数据存在,则file存放整张大图片
                file=ImgSprite.baseUrl+ImgSprite.jsonList[i].meta.image;
                break;
            }
        }
        var div=document.createElement("div");
        Object.assign(div.style,{
            o.frame.w+"px",
            height:o.frame.h+"px",
            backgroundImage:"url("+file+")",
            backgroundPositionX:-o.frame.x+"px",
            backgroundPositionY:-o.frame.y+"px",
        });
        return div;
    }
   
}

html页面的调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <script type="module">
        import ImgSprite from "./js/ImgSprite.js";
        var arr=["aaa","bbb"]
        ImgSprite.init(arr,"./img/",loadFinish);  //加载json文件

        function loadFinish(){   //获取json文件中具体内容
           var div=ImgSprite.getImg("enemy1_blowup_1");
           document.body.appendChild(div);
        }
    </script>
</body>
</html>

json文件(精灵图的具体数据)

{"frames": [

{
	"filename": "idle_12",
	"frame": {"x":0,"y":0,"w":100,"h":94},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":19,"w":100,"h":94},
	"sourceSize": {"w":130,"h":114},
	"pivot": {"x":0.5,"y":0.5}
},

{
	"filename": "digest_01",
	"frame": {"x":403,"y":196,"w":78,"h":82},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":4,"y":28,"w":78,"h":82},
	"sourceSize": {"w":130,"h":114},
	"pivot": {"x":0.5,"y":0.5}
}],
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "aaa.png",
	"format": "RGBA8888",
	"size": {"w":512,"h":512},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:2e90c9861b30114f336784aeb87a25da:113f6e33013ed50f8cf067c115968e2c:27ddf17f00af56a4ddb64f2c88011c1b$"
}
}