看了es6的内容,实在是有点多,这里主要用了promise,函数默认参数的使用,let的使用,好像没有字符串拼接的替用。
看了很多关于promise的使用,可以说是一头雾水,有些讲的很深入,例子很看不懂,有些运行错误了。
主要是我们需要在function里面返回一个promise。这样可以很好的解决回调问题,比如我们的ajax还有我们的animate。
var p=new Promise(function(resolve,reject){
........... //你的东西
resolve(); //这里是成功的函数。指向then(fun1,fun2)总的fun1
rejuect(); //这里是失败的函数。指向then(fun1,fun2)总的fun2
})
说说在学习中遇到的问题,因为很少用原生,刚开始用ele.style[prop]获取元素的样式总是失败,后来查资料知道了区别:
ele.style.height只是用与取行内样式和写样式。
getComputedStyle(obj,false)[prop] 这个适用于chorme,ff对样式的获取,但是不可以写样式。
currentStyle[prop]是针对ie的样式获取。
对于promise的学习还是比较浅,接下来要用到还是需要在深入学习。
下面是完整代码,可以运行一下看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise</title>
<style>
div{
height:100px;
width: 100px;
background: black;
border-radius: 50%;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div id="anim"></div>
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function my(selector){
let b=new _my(selector);
return b;
}
let _my=function(selector){
this.ele=document.querySelector(selector);
}
_my.prototype.animate=function(obj,delay=1000){
let self=this;
let promise = new Promise(function(resolve,reject){
for(let prop in obj){
let oldVal = parseInt(getStyle(self.ele,prop));
let a = (obj[prop] - oldVal)/(delay/10);
let timer = setInterval(function(){
if(parseInt(oldVal) != obj[prop]){
self.ele.style[prop] = oldVal + a + 'px';
oldVal = parseFloat(self.ele.style[prop]);
}else{
self.ele.style[prop] = obj[prop] + 'px';
clearInterval(timer);
}
},10)
}
setTimeout(function(){
resolve();
reject();
},delay);
})
return promise;
}
my('div').animate({height:200,width:200},5000).then(function(){
return my('div').animate({left:100}, 3000)
}).then(function(){
return my('div').animate({top: 100}, 2000)
});
</script>
</body>
</html>