Javascript面向对象之适配器模式

先看例子：

代码：

可以看到我们，我们的图形是不适配的，这时候我们可以添加适配器类进行适配，代码实现如下：

代码：

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);
});

效果：

喜欢的小伙伴可以自己动手实现下，记得不要忘记点赞哦！