案例：
①匿名封装
(function(window,document){
const HEAD = 1;
let MSG = function(options){
this._init(options);
}
//原型
MSG.prototype._init = function({msg}){
this._doSomeThing(msg);
}
MSG.prototype._doSomeThing = function(msg){
alert(msg);
}
// 挂载
window.$Msg = Msg;
})(window,document);
// 调用
new $Msg({msg : '您好'});
②PromiseAll运用，图片全部加载才显示出来
(function(document) {
let LoadImg = function(){
let promises = imgs.map(src => {
return this.imgToPromise(src);
});
this.imgLoad(promises);
}
LoadImg.prototype.imgToPromise = src => {
return new Promise((resolve,reject) => {
const img = new Image();
img.src = src;
img.onload = () => {
你resolve(img);
};
img.onerror = (e) => {
reject(e);
}
})
}
LoadImg.prototype.imgLoad = arr => {
Promise.all(arr).then((arr)=>{
arr.forEach(img => {
document.body.append(img);
})
},err => {
// 错误
console.log(err);
})
}
window.LoadImg = LoadImg;
})(document);
const imgs = [
'https://pics1.baidu.com/feed/5882b2b7d0a20cf4f2291433b2004030adaf99b5.jpeg?token=00786888f8e87b7704e637824f570ece&s=BB98C8015A64750DC42015C00300A0B2','https://pics7.baidu.com/feed/4610b912c8fcc3ce8b524ed0574cdd8ed53f2056.jpeg?token=024ed25c842ae64030effe79f8832ee7&s=E9271F70592B412C18783DD30300C0B2','https://pics7.baidu.com/feed/4610b912c8fcc3ce8b524ed0574cdd8ed53f2056.jpeg?token=024ed25c842ae64030effe79f8832ee7&s=E9271F70592B412C18783DD30300C0B2'
];
new LoadImg(imgs);
③ promise动画
function moveTo(el,x,y){
return new Promise( resolve => {
el.style.transform = `translate(${x}px,${y}px)`;
setTimeout(function(){
resolve();
},1000)
})
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click', e => {
moveTo(el,100,100).then(()=>{
console.log(1);
return moveTo(el,200,200);
}).then(()=>{
console.log(1);
return moveTo(el,100,100);
}).then(()=>{
console.log(1);
return moveTo(el,0,0);
})
})
④对象封装变形类
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.ball{
width: 150px;
height: 150px;
background: linear-gradient(#ff9b9b 50%,#106dbb 50%);
border-radius: 50%;
}
</style>
<body>
<div class="ball"></div>
</body>
<script type="text/javascript">
class Transform{
constructor(el){
this.el = document.querySelector(el);
// 队列
this._queue = [];
// 默认时间
this.default_transition = 3000;
this._transform = {
rotate: '',
translate: '',
scale: '',
}
}
// 位移
translate(value, time){
return this._add('translate', value, time);
}
// 缩放
scale(value, time){
return this._add('scale',value,time);
}
// 形变
rotate(value,time){
return this._add('rotate',value,time);
}
_add(type, value, time){
this._queue.push({type, value, time});
return this;
}
done() {
this._start();
}
_start() {
if(!this._queue.length)return;
// 先进先出
setTimeout(() => {
// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
const info = this._queue.shift();
let transition = info.time ? info.time : this.default_transition;
this.el.style.transition = `all ${ transition / 1000}s`;
this.el.style.transform = this._getTransform(info);
setTimeout(() => {
this._start();
},transition);
},0)
}
_getTransform({ time, value, type}){
switch(type){
case 'translate':
this._transform.translate = `translate(${ value })`;
break;
case 'scale':
this._transform.scale = `scale(${ value })`;
break;
case 'rotate':
this._transform.rotate = `rotate(${ value }deg)`;
break;
}
return `${this._transform.translate} ${this._transform.scale} ${this._transform.rotate}`;
}
}
let tf = new Transform(".ball");
tf.translate('100px,100px').scale('1.5').rotate(2220,220000).done();
</script>
</html>
