resutiles

#环境依赖 node v0.8+ TexturePacker 精灵图打包工具

#部署步骤

1. 使用TexturePacker精灵图打包工具将所有小图进行打包， 要求不能旋转，图片名称不带后缀，图片的大小符合2的n次幂宽高近似最小比例 要求打包后的图片必须是png格式，打包后的配置文件是json或者xml格式

2. npm i resutile --save

3. 使用import 或者require导入

4. 使用webpack或者gulp打包输出

#目录结构描述 ├── Readme.md // help ├── package.json // 配置 ├── ResUtile.js // 方法名

#版本 v1.1.1 1. 实现加载多个精灵图配置文件后，根据图片名称获取一个div 以该图片为背景，大小是图片原尺寸的div元素。不允许重设宽高 可使用样式中的缩放更改。 2、可以实现根据新图片名称替换div的背景为新图 3、提供根据图片名称获取该图片的坐标位置，图片的大小等对象 数据 4、可以允许用户配置文件是json或者xml 注： 1、内含一个给对象合并方法，与Object.assign类似，但是可以做 深度合并。 2、内含一个ES5的继承方法

#V1.0.0 版本案例 ##导入插件 import Res from "./node_modules/resutile/ResUtile" ##初始化Res ###第一个参数是所有需要使用的精灵图名称，可以有多个，使用数组 ###第二个参数是精灵图对应该js的相对地址 ###第三个参数是精灵图配置文件的类型，json或者xml ###第四个参数是加载完成精灵图后的回调函数,回调函数中带一个参数list是所有加载的配置文件集合 Res.init(["bird","plane"],"img/","json",loadHandler); ###使用Res.getImage("图片名称"),就可以获得该图片对应的div，使用Res.changeImg(需要替换的div，“图片名称”)就可以给div替换背景图是这个精灵图 function loadHandler(list){
var div=Res.getImage("enemy1_blowup_2"); document.body.appendChild(div); Res.changeImg(div,"enemy1_fly_1") }

##也可以在初始化的时候不填写第四个参数，使用事件侦听获取

document.addEventListener(Res.DATA_FINISH_EVENT,loadHandler); Res.init(["bird","plane"],"img/","json"); function loadHandler(e){
var div=Res.getImage("enemy1_blowup_2"); document.body.appendChild(div); Res.changeImg(div,"enemy1_fly_1") }

##对象深度合并 var obj={a:1,b:2,d:{a:[1,2,3]}}; var obj2={c:3}; ###对象.addProto(需要合并的对象);
obj2.addProto(obj); console.log(obj2);

##也可用于ES5面向对象中原型添加内容 ###优点在于继承后的类添加原型方法时可以同时添加若干个 function Box(){

}
Box.prototype.addProto({
    a:1,
    b:2,
    c:function(){

    },
    d:function(){

    }
})

##ES5继承方法 function Box(参数){

} Box.prototype={ constructor:Box, a:1, b:2, c:function(){

}

} function Ball(参数){ Box.call(this,参数) } ###让Ball继承Box Ball.extendClass(Box); Ball.prototype.addProto({ d:function(){

},
e:[1,2,3]

})