Javascript面向对象之适配器模式
程序员文章站
2022-06-26 17:14:15
先看例子:代码:可以看到我们,我们的图形是不适配的,这时候我们可以添加适配器类进行适配,代码实现如下:代码:class element {constructor(el) { this.el = el;}startMove(num){this.el.style.left = `${num}px`;}}class adapter {constructor(element) { this.element = element;this.cr...
先看例子:
代码:
可以看到我们,我们的图形是不适配的,这时候我们可以添加适配器类进行适配,代码实现如下:
代码:
class element {
constructor(el) {
this.el = el;
}
startMove(num){
this.el.style.left = `${num}px`;
}
}
class adapter {
constructor(element) {
this.element = element;
this.createElement();
}
createElement(){
const div = document.createElement("div");
div.className = "box1";
this.element.el.append(div);
}
startMove(){
this.element.startMove(num);
}
}
var ele = new element(document.querySelector('.box')),
startBtn = document.querySelector('#start');
var adp = new adapter(ele);
startBtn.addEventListener('click', ()=>{
ele.startMove(100);
});
效果:
喜欢的小伙伴可以自己动手实现下,记得不要忘记点赞哦!
本文地址:https://blog.csdn.net/qq_44738564/article/details/112853880