day18 面向对象
概述：
面向对象是一种编程思想（oop），面向对象相对于面向过程的一个抽取和简化。主要是以类来构建对
象，以对象来存储对应的行为及属性，抽取对应的行为做为方法 ，抽取对应的属性做为属性。面向对象
核心 万物皆对象（所有的内容都可以抽取为一个对象）关键点：找有这个行为的对象去完成这个行为
面向对象和面向过程
面向过程以过程为核心
示例（去饭店吃饭）
1.先找饭店
2.找服务员点餐
3.等待上菜
4.吃饭
5.结账
面向对象以对象为核心
示例
我找饭店 （我这个对象 饭店这个对象）
结账 吃饭 点餐属于我的行为
饭店提供的相关内容就是饭店的行为
对象的构建
调用new关键词 去执行对应的构造函数来构建对象
通过类来构建对象（构造器）es6
class Person{
constructor(username){
this.name = username
}
}
var person = new Person('jack')
通过构造函数来构建（es3）
//以构造函数构建 首字母大写
function Dog(name){
this.name = name //函数里面的this指向它的调用者 在new的时候指向对应的对象实例
}
var dog = new Dog('旺财')
上述的俩种构建方式其实核心上是一种 都是通过构造函数（构建对象的函数）来构建。
通过构造函数构建做了什么操作
自动构建对象
手动设置属性
自动返回对象
通过工厂模式来构建对象
手动创建对象
手动设置属性
手动返回对象
//以工厂模式来构建
//工厂里面要传入对应的属性 返回对应的对象(不能区分类型)
function factory(name){
//Object是最大的对象 手动构建对象
var obj = new Object()
//手动给obj设置相关的属性
obj.name = name
//手动返回对应的对象
return obj
}
//调用
var obj = factory('旺财')
var obj1 = factory('jack')
console.log(obj,obj1);
工厂模式的特性
可以构建所有的对象
在构建对象的时候会忽略细节
构建出来的对象都是Object（instanceof全部指向Object）
console.log(obj instanceof Object); // true
console.log(obj1 instanceof Object); // true
面向对象的三大特性
封装 （将对应的行为抽取为方法 属性抽取为属性）
继承 （子类继承父类的属性和方法）
多态 (继承关系的体现重写（子类重写父类的方法） 重载（在一个类有俩个同名的方法 js不允许没有重载）)
封装示例
示例: 有一个猫会喵喵叫 很胖800斤 吃的很多 名字叫咪咪
属性： 体重800 名字咪咪
方法： 喵喵叫 吃的很多
继承及对应的重写
class Person{
constructor(){
// var sex = '男'
this.name = 'jack'
this.say = ()=>{
console.log('哈哈哈哈');
}
}
}
class Son extends Person{
constructor(age){
super() //调用Person的constructor
this.age = age
//重写
this.say = ()=>{
console.log('嘻嘻嘻嘻');
}
}
}
var son = new Son()
console.log(son);//name say age
son.say() //嘻嘻嘻嘻
面向对象tab栏切换
属性：上面的tab栏 下面的显示框
方法: 上面的点击事件 切换下面的显示栏的方法
//构建一个类
class Tab{
constructor(nav,contents){
this.nav = nav //上边的点击栏
this.contents = contents //下面的切换的内容
this.selectIndex = 0
this.handlerClick()
}
//切换的方法
toggle(selectElement){
//选中内容变成对应的样式为selected 其他排他
Array.from(this.nav).forEach((item)=>{
item.className = ''
})
selectElement.className = 'selected';
// this.nav[this.selectIndex].className = 'selected'
//下面切换内容 样式为show
Array.from(this.contents).forEach((item)=>{
item.className = ''
})
//根据你传入的元素来查找下标
let i = Array.from(this.nav).findIndex((v)=>{
return v == selectElement
})
this.contents[i].className = 'show'
}
//点击事件处理
handlerClick(){
let
_
this = this
Array.from(this.nav).forEach((item,i)=>{
item.onclick = ()=>{
// _this.selectIndex = i
_this.toggle(item)
}
})
}
}
面向对象拖拽实现
// 拖拽实现
// 属性 包含拖拽盒子的大盒子 拖拽的盒子 盒子的坐标位置
class Touch {
constructor(outerBox, move) {
this.outerBox = outerBox //包含的盒子
this.move = move //移动的盒子
this.point = { //坐标位置
x: parseInt(this.getStyle(move).left) || 0,
y: parseInt(this.getStyle(move).top) || 0
} //基础坐标为0,0
this.handlerDown()
}
//获取样式的方法
getStyle(element) {
return window.getComputedStyle ? window.getComputedStyle(element, '') :
element.currentStyle
}
//按下
handlerDown(){
this.move.onmousedown = (e)=>{
e = e || window.event
//获取第一次按下的位置
let currentX = e.offsetX
let currentY = e.offsetY
//调用移动的方法
this.handlerMove(currentX,currentY)
//调用弹起的方法
this.handlerUp()
}
}
//弹起
handlerUp(){
document.onmouseup = ()=>{
this.outerBox.onmousemove = null
}
}
//移动
handlerMove(currentX,currentY){
//给大盒子添加移动事件
this.outerBox.onmousemove = (e) => {
e = e || window.event
//大盒子在页面上的位置
let { x, y } = this.getPagePoint(this.outerBox)
//获取移动的位置 - 大盒子在页面上的位置 - 当前按下位置
let { targetX, targetY } = {
targetX: e.pageX - x - currentX,
targetY: e.pageY - y - currentY
}
let { maxX, maxY } = {
maxX: this.outerBox.offsetWidth - this.move.offsetWidth,
maxY: this.outerBox.offsetHeight - this.move.offsetHeight
}
//区间判断
if (targetX < 0) {
targetX = 0
}
if (targetX > maxX) {
targetX = maxX
}
if (targetY < 0) {
targetY = 0
}
if (targetY > maxY) {
targetY = maxY
}
//将对应的位置设置进去
this.point = { x: targetX, y: targetY }
this.setMovePoint()
}
}
setMovePoint() {
//设置
this.move.style.left = this.point.x + 'px'
this.move.style.top = this.point.y + 'px'
}
getPagePoint(element) {
let x = 0
let y = 0
while (element.offsetParent) {
x += element.offsetLeft
y += element.offsetTop
element = element.offsetParent
}
return { x, y }
}
}
基于面向的拖拽实现放大镜
//放大镜功能和区间拖拽的实现有类似
class Magnifier extends Touch {
constructor(smallBox, moveBox, bigBox, bigImage) {
//传给父类
super(smallBox, moveBox) //outerBox move
this.bigBox = bigBox
this.bigImage = bigImage
this.handlerEnter()
this.handlerLeave()
}
handlerEnter() {
this.outerBox.onmouseenter = () => {
this.move.style.display = 'block'
this.bigBox.style.display = 'block'
this.init()
//调用移动的方法
this.handlerMove(this.move.offsetWidth / 2, this.move.offsetHeight /
2)
}
}
handlerLeave() {
this.outerBox.onmouseleave = () => {
this.move.style.display = 'none'
this.bigBox.style.display = 'none'
}
}
init() {
//将移动的move的大小初始化
this.move.style.width = this.outerBox.offsetWidth /
(this.bigImage.offsetWidth / this.bigBox.offsetWidth) + 'px'
this.move.style.height = this.outerBox.offsetHeight /
(this.bigImage.offsetHeight / this.bigBox.offsetHeight) + 'px'
}
setMovePoint() {
//根据对应的坐标来设置对应的位置
//设置
this.move.style.left = this.point.x + 'px'
this.move.style.top = this.point.y + 'px'
//设置大图片的位置
// 外面的盒子/移动的盒子 = 大的图片/大的盒子
// 350 / ? = 800 / 540
// 350 = (800 / 540 ) * ? ==> ? = 350 / (800 / 540)
// 150 / 350 == 大的图片移动多少 ?/800
// 150 / 350 = ？/800 ===> ? = 150/350*800
let x = this.point.x / this.outerBox.offsetWidth *
this.bigImage.offsetWidth * -1
let y = this.point.y / this.outerBox.offsetHeight *
this.bigImage.offsetHeight * -1
//设置大图片的定位
this.bigImage.style.left = x + 'px'
this.bigImage.style.top = y + 'px'
}
}
