我们所说的面向对象其实是一种编程思想
传统的面向过程,在我们刚开始接触的时候我们会觉得面向过程开发十分的方便简洁,因为面向过程是将一个东西分成很多过程,我们能一眼看出来哪步是哪步,看着很直观方便我们理解,但是随之事物的越来越复杂,我们需要添加的功能也越来越多,如果我们继续用面向过程的开发思想,我们就会发现我们的代码变得越来越符复杂,越来越冗长,并且非常容易出错。因此,就有了我们现在学的面向对象的编程思想。
面向对象的编程思想是尽可能的模拟人的思维,通过这种方式让开发的软件更符合人们的认知,也方便人们的使用。
目前我所学到的面向对象的编程思想:
就是通过构造函数构造一个实例化对象,然后通过调用其中的方法和属性来实现我们的目的。
面向对象的优点:(目前本人就知道这么多)
(1)对象中,可以定义并且存储多个数据单元以及所有JavaScript支持的数据类型
(2)对象中,调用具体数据很方便 调用数据时,不用考虑数据的顺序 只要键名/属性 输入正确就可以了
(3)对象中,可以定义函数,还可以通过函数的this,方便的调用对象本身的数据 调用对象的数据,不用管对象名称 是什么,只要通过this,就可以指向这个对象,
(4)高内聚,低耦合,可反复调用
举个用面向对象编程思想的例子(轮播图)
// 获取总的父级的标签对象,oDiv
const oDiv = document.querySelector('div');
// 面向对象,封装class类
class SetLoop{
// 定义数据参数
constructor(ele){
// 存储参数
this.ele = ele;
// 获取的标签对象
this.oPic = ele.querySelector('.pic');
this.oImg = ele.querySelectorAll('img');
this.oUl = ele.querySelector('ul');
this.arrow = ele.querySelector('#arrow');
this.imgWidth = this.oImg[0].width;
// 定义参数
this.loopTimer;
this.index = 1;
this.bool;
}
// 定义图片运动的方法
move(ele, obj, back){
for(let type in obj){
let speed = parseInt(window.getComputedStyle(ele)[type]);
let timer = setInterval(function(){
let newSpeed = (obj[type] - speed) / 2;
newSpeed = newSpeed > 0 ? Math.ceil(newSpeed) : Math.floor(newSpeed);
speed += newSpeed;
ele.style[type] = speed + 'px';
if(speed == obj[type]){
clearInterval(timer);
back();
}
},100)
}
}
// 定义获取焦点的(图片对应的哪个小圆点)方法
setLi(){
let str = '';
this.oImg.forEach( (item, key) => {
if(key == 0){
str += `<li index="${key+1}" class="active"></li>`
}else{
str += `<li index="${key+1}"></li>`
}
})
this.oUl.innerHTML = str;
}
// 定义克隆图片的方法
copyImg(){
this.imF = this.oImg[0];
this.imL = this.oImg[this.oImg.length-1];
this.first = this.imF.cloneNode(true);
this.last = this.imL.cloneNode(true);
this.oPic.insertBefore(this.last, this.imF);
this.oPic.appendChild(this.first);
this.oPic.style.width = (this.oImg.length+2) * this.imgWidth + 'px';
this.oPic.style.left = -this.imgWidth + 'px';
}
// 定义自动轮播的方法
autoLoop(){
this.loopTimer = setInterval( () => {
this.index++;
this.move(this.oPic, {left:-this.index * this.imgWidth}, () => {
this.stopLoop();
})
}, 2000)
}
// 定义运动停止的方法
stopLoop(){
this.bool = '原始数值';
if(this.index == this.oImg.length+1){
this.index = 1;
this.oPic.style.left = (-this.index * this.imgWidth) + 'px';
}else if(this.index == 0){
this.index = this.oImg.length;
this.oPic.style.left = (-this.index * this.imgWidth) + 'px';
}
let oUllis = this.ele.querySelectorAll('ul li');
oUllis.forEach( (item) => {
item.className = '';
if(item.getAttribute('index') == this.index){
item.className = 'active';
}
})
}
// 定义鼠标移入移出事件的方法
stopStart(){
this.ele.addEventListener('mouseover', () => {
clearInterval(this.loopTimer);
})
this.ele.addEventListener('mouseout', () => {
this.autoLoop();
})
}
// 定义焦点切换的方法
focus(){
this.oUl.addEventListener('click', (e) => {
if(e.target.tagName == 'LI'){
if(this.bool !== '原始数值'){
return;
}
this.bool = '非原始数值';
this.index = e.target.getAttribute('index')-0;
this.move(oPic, {left: -index * imgWidth}, function(){
this.stopLoop();
})
}
})
}
// 定义左右箭头切换的方法
leftRight(){
this.arrow.addEventListener('click', (e) => {
if(e.target.getAttribute('name') == 'left'){
if(this.bool !== '原始数值'){
return;
}
this.bool = '非原始数值';
this.index--;
this.move(this.oPic, {left: -this.index * this.imgWidth}, () => {
this.stopLoop();
})
}else if(e.target.getAttribute('name') == 'right'){
if(this.bool !== '原始数值'){
return;
}
this.bool = '非原始数值';
this.index++;
this.move(this.oPic, {left: -this.index * this.imgWidth}, () => {
this.stopLoop();
})
}
})
}
// 定义页面隐藏的方法(防止一个bug)
hidden(){
document.addEventListener('visibilitychange' , () => {
if(document.visibilityState === 'hidden'){
clearInterval(this.loopTimer);
}else if(document.visibilityState === 'visible'){
this.autoLoop();
}
})
}
}
// 创建实例化对象
const setloop = new SetLoop(oDiv);
// 调用其中的方法
setloop.setLi();
setloop.copyImg();
setloop.autoLoop();
setloop.stopStart();
setloop.focus();
setloop.leftRight();
setloop.hidden();
如果你还想再添加一些方法,只需要在class类中继续添加方法就可以了,不会对其他的方法产生影响,方便后期修改代码、查找bug、和后续的优化改进。
所以说面向对象的编程思想对我们开发来说是非常重要的。