欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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...

先看例子:
Javascript面向对象之适配器模式
代码:

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

效果:
Javascript面向对象之适配器模式
喜欢的小伙伴可以自己动手实现下,记得不要忘记点赞哦!

本文地址:https://blog.csdn.net/qq_44738564/article/details/112853880