01-封装+继承案例需求
<script>
/*
案例 ： 目的 利用 面向对象的语法和思想 来结合 dom操作 解决实际的问题
1 定义父构造函数
HTMLElement
1 属性 dom
2 方法 appendTo
2 定义 一个儿子 HTMLDivElement
1 会继承 父亲 属性和方法
2 儿子还有自己独立的功能
const myDiv = new HTMLDivElement("div中的文本")
myDiv.appenTo("p") ; p标签中会多出有一个 文本为 “div中的文本” 的div
儿子还会有自己的一个方法
点击按钮 myDiv.scale(2); 缓慢放大两倍
3 定义 另外一个儿子 HTMLImgElement
1 会继承 父亲 属性和方法
2 自己独立的功能
const myImg = new HTMLImgElement(图片的地址)
myImg.appendTo("a") a标签中会多了一个 图片标签
儿子还会有自己的一个方法
点击某个按钮 myImg.borderRadius("50%") 缓慢变成 边框圆角 50% 效果
4 代码提示
1 先根据需求 把 代码的解构整理好
2 再去思考实现的逻辑
*/
function HTMLElement() {
// this.dom=....
}
HTMLElement.prototype.appentTo=function(){
}
</script>
02-实现-封装和继承案例
<body>
<button>div放大两倍</button>
<div class="box"></div>
<script>
/*
HTMLElement
1 属性 dom
2 方法 appendTo
*/
function HTMLElement() {
this.dom = document.createElement('div');
}
HTMLElement.prototype.appendTo = function (selector) {
document.querySelector(selector).append(this.dom);
};
// 儿子
function HTMLDivElement(text) {
HTMLElement.call(this); // this上多一个属性 dom dom = 动态创建的 div元素
// this.dom = 真实的div 的dom元素
this.dom.innerText = text;
this.dom.style.textAlign = 'center';
}
// 继承父亲的方法
HTMLDivElement.prototype.appendTo = HTMLElement.prototype.appendTo;
// 自己的方法
HTMLDivElement.prototype.scale = function (num) {
this.dom.style.transition = '2s';
this.dom.style.transform = `scale(${num})`;
};
const divEle = new HTMLDivElement('div中的文字');
// console.log(divEle);
divEle.appendTo('.box');
const button = document.querySelector('button');
button.addEventListener('click', function () {
divEle.scale(2);
});
</script>
</body>
03-实现-封装和继承案例-优化
<body>
<button>div放大两倍</button>
<input type="button" value="设置图片缓慢边框圆角效果" />
<div class="box"></div>
<script>
function HTMLElement(tagName) {
this.dom = document.createElement(tagName);
}
HTMLElement.prototype.appendTo = function (select) {
document.querySelector(select).append(this.dom);
};
function HTMLDivElement(text) {
HTMLElement.call(this, 'div');
this.dom.innerText = text;
this.dom.style.textAlign = 'center';
}
HTMLDivElement.prototype.appendTo = HTMLElement.prototype.appendTo;
HTMLDivElement.prototype.scale = function (num) {
this.dom.style.transition = '2s';
this.dom.style.transform = `scale(${num})`;
};
function HTMLImgElement(src) {
HTMLElement.call(this, 'img');
this.dom.src = src;
}
HTMLImgElement.prototype.appendTo = HTMLElement.prototype.appendTo;
HTMLImgElement.prototype.borderRadius = function (num) {
this.dom.style.transition = '2s';
this.dom.style.borderRadius = num;
};
const divEle = new HTMLDivElement('div中的文字');
const imgEle = new HTMLImgElement('./images/1.png');
divEle.appendTo('.box');
imgEle.appendTo('.box');
const input = document.querySelector('input');
const button = document.querySelector('button');
input.addEventListener('click', function () {
imgEle.borderRadius('50%');
});
button.addEventListener('click', function () {
divEle.scale(2)
});
网友评论