使用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$"
}
}