原生js造轮子之模仿JQ的slideDown()与slideUp()
代码如下:
const slider = (function() {
var Slider = {};
// the constructed function,timeManager,as such that's a manager about managing the setInterval
function TimerManager() {
this.timers = [];
this.args = [];
this.isTimerRun = false;
}
// if the element can't has the property of TimerManage what represented the constructor function,repeated creating a constructed function
TimerManager.makeTimerManage = function(element) {
if (
!element.TimerManage ||
element.TimerManage.constructor !== TimerManager
) {
element.TimerManage = new TimerManager();
}
};
// That's order to create the method what add the timer
TimerManager.prototype.add = function(timer, args) {
this.timers.push(timer);
this.args.push(args);
this.timerRun();
};
// called the method is order to run the timer by ordering
TimerManager.prototype.timerRun = function() {
if (!this.isTimerRun) {
var timer = this.timers.shift(),
args = this.args.shift();
if (timer && args) {
this.isTimerRun = true;
timer(args[0], args[1]);
}
}
};
// let it run the next timer
TimerManager.prototype.next = function() {
this.isTimerRun = false;
this.timerRun();
};
function slideUp(element, time) {
if (element.offsetHeight > 0) {
var totalHeight = element.offsetHeight;
var currentHeight = totalHeight;
var reduceValue = totalHeight / (time / 10);
element.style.transition = "height " + time + " ms";
element.style.overflow = "hidden";
var timer = setInterval(function() {
currentHeight -= reduceValue;
element.style.height = currentHeight + "px";
if (currentHeight <= 0) {
clearInterval(timer);
element.style.display = "none";
element.style.height = totalHeight + "px";
if (
element.TimerManage &&
element.TimerManage.constructor === TimerManager
) {
element.TimerManage.next();
}
}
}, 10);
} else {
if (
element.TimerManage &&
element.TimerManage.constructor === TimerManager
) {
element.TimerManage.next();
}
}
}
function slideDown(element, time) {
if (element.offsetHeight <= 0) {
element.style.display = "block";
element.style.transition = "height" + time + " ms";
element.style.overflow = "hidden";
var totalHeight = element.offsetHeight;
var currentHeight = 0;
element.style.height = "0px";
var addValue = totalHeight / (time / 10);
var timer = setInterval(function() {
currentHeight += addValue;
element.style.height = currentHeight + "px";
if (currentHeight >= totalHeight) {
clearInterval(timer);
element.style.height = totalHeight + "px";
if (
element.TimerManage &&
element.TimerManage.constructor === TimerManager
) {
element.TimerManage.next();
}
}
}, 10);
} else {
if (
element.TimerManage &&
element.TimerManage.constructor === TimerManager
) {
element.TimerManage.next();
}
}
}
// the interface about slideUp method
Slider.slideUp = function(element) {
TimerManager.makeTimerManage(element);
element.TimerManage.add(slideUp, arguments);
return this;
};
// the interface about slideDown method
Slider.slideDown = function(element) {
TimerManager.makeTimerManage(element);
element.TimerManage.add(slideDown, arguments);
return this;
};
return Slider;
})();
原生调用:
//该js文件中加入这一行代码
window.slider = slider;
//参数1,dom,参数2:时间
slider.slideDown(document.queryselector(),time);
slider.slideUp(document.queryselector(),time);
vue.js调用:
//该js文件加入这一行代码
export default slider;
main.js中引入:
import slider from 'slider.js';
//绑定到Vue实例原型上
Vue.prototype.slider = slider;
//组件中调用
this.slider(this.$refs,time);