面向对象概述(oop)
面向对象是一种编程思维(oop),将对应的你需要用到的对象进行提取,将对应的方法综合到对应的对象中,在需要调用对应的方法的时候去找对应的对象.(万物皆对象(任何东西都可以抽取为对象),主要的过程就是找对应的对象做对应的事)
面向对象的核心就是找对象
面向对象的三大特性
- 封装(将对应的属性及方法抽取封装到对应的类(构造函数)中)
- 继承(子类继承父类 子类拥有父类非私有属性及方法)
- 多态(一个东西多种形态体(基于继承的) 重载(一个类多个函数重名(js中不允许的))重写(子类重写父类方法))
对象创建声明的方式
使用new关键词来声明(实际调用的都是构造函数)
- es6新增的class(其实调用也是构造函数)
class Person{ //类的构造器 constructor(name){ this.name = name } } //调用类中的构造器 let person = new Person('jack') - es3自带的构造函数
function Person(name){ this.name = name } let person = new Person('tom')
构造函数和class的区别
- 构造函数的兼容会比class要好
- 构造函数会进行预编译 class不会进行预编译
- 构造函数可以当做普通函数调用 class不行
new构造函数的时候主要过程
- 自动创建对象
- 手动属性赋值
- 自动返回对象
使用工厂函数来声明创建(不需要new关键词)
//对象工厂函数(忽略细节)
function factory(name){
//创建一个对象
let obj = new Object()
//给对应的属性赋值
obj.name = name
//返回这个对象
return obj
}
let obj = factory('jack')
console.log(obj)封装
抽取对应的属性和方法(属性为名词 方法为动词)
示例
从前有座山 山上有座庙 庙里有个老和尚 老和尚对小和尚说 山下的男人是狗
对象的抽取
- 山
class Hill{ constructor(temple){ this.temple = temple//属性 } } - 庙
class Temple{ constructor(oldMonk){ this.monk = monk//属性 } } - 和尚
class Monk{ constructor(name){ this.name = name//属性 this.say = function(monk){ console.log(`${this.name}对${monk.name}说山下的男人是狗`)//方法 } } }
继承
子类继承父类的非私有属性及方法
示例
class的extents关键词来实现继承
//人类
class Person{
constructor(name,age){
this.name = name
this.age = age
this.height = 180
this.eatFood = function(){
console.log(this.name+'在吃饭')
}
}
}
//使用学生类来继承父类
class Student extends Person{
constructor(name,age,score){
super(name,age)//super指向对应的父类的构造函数
this.score = score
}
}
let student = new Student('张三',18,60)
console.log(student.name)//继承父类的属性
console.log(student.height)//继承父类的属性
student.eatFood()//继承父类的方法
console.log(student.score)//继承父类的属性多态
一个内容的多种形态 主要有两个表现形式
- 重载(在同一个类中有两个同名的方法 通过参数的个数及参数类型来分辨的)(js没有重载)
class Person{ constructor(){ //this.sayHello = function(a){ //console.log(a) //} //覆盖上面的函数 因为对应的js是弱类型语言 不能强制指定类型 不能强制指定参数个 // this.sayHello = function(a,b){ // console.log(a,b) // } //模拟实现 this.sayHello = function(a,b){ if(arguments.length==1){ console.log(a) } if(arguments.length==2){ console.log(a,b) } } } } new Person().sayHello('hello') new Person().sayHello('hello','world') - 重写(在子类中重写父类的方法)
class Person{ constructor(){ this.sayHello = function(){ cocnsole.log('父类的函数') } } } class Student extends Person{ constructor(){ super() this.sayHello = function(){ console.log('重写的函数') } } } new Student().sayHello()//重写的函数
练习
- 编写⼀个动物类，该类包含name的属性，和say的⽅法。 通过say⽅法可以打印动物说话了。编写⼀个Dog类继承动物类，要求 该类中包含颜⾊的属性，该类重写say⽅法，要求打印⽗类的say⽅法⾥的内容，并且打印 动物颜⾊+动物名字+“叫了”。（备注狗会一直叫）
class Animal{ constructor(name){ this.name = name } //先编译执行 say(){ console.log(this.name+'说话了') } } class Dog extends Animal{ constructor(name,color){ super(name) this.color = color this.fn = this.say//接收父类的say方法 //重写say方法 this.say = function(){ let _this = this this.fn() setInterval(()=>{ console.log(_this.color+_this.name+'叫了') },1000) } } } let Dog = new Dog('旺财','黑色的') dog.say()
tab栏切换案例(面向对象)
- 提取属性 点击的按钮 切换的内容
- 提取方法 事件处理的方法 切换的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .context { width: 300px; height: 200px; border: 1px solid #000; } .header { height: 50px; line-height: 50px; background-color: aliceblue; } .header a { display: inline-block; width: 80px; height: 100%; } .select { background-color: aqua; } .content>div { width: 100%; height: 100%; } .content>div:last-child { display: none; } </style> </head> <body> <div class="context"> <div class="header"> <a href="JavaScript:void" class="select">探索</a> <a href="JavaScript:void">科技</a> </div> <div class="content"> <div>探索探索探索</div> <div>科技科技科技科技</div> </div> </div> <script> class Tab { constructor(nav, content) { this.nav = nav//传入的按钮 this.content = content//传入的内容 this.index = 0 //调用handlerClick this.handlerClick() } //切换对应的内容部分 toggle() { //遍历传入的按钮 //排他 Array.from(this.nav).forEach((btn) => { btn.className = '' }) this.nav[this.index].className = 'select' //遍历传入的内容 Array.from(this.content).forEach((v) => { v.style.display = 'none' }) this.content[this.index].style.display = 'block' } handlerClick() { var that = this //给对应的nav添加点击事件 Array.from(this.nav).forEach((btn, i) => { btn.onclick = function () { that.index = i //切换 that.toggle() } }) } } var bar = document.querySelectorAll('.header>a') var content = document.querySelectorAll('.content>div') new Tab(bar, content) </script> </body> </html>
面向对象的拖拽
基础的全局拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
class Drag{
constructor(element){
this.element = element
this.handlerMouseEvent()
}
handlerMouseEvent(){
this.element.onmusedown = (e)=>{
e=e||window.event
let downPoint = {
x:e.offsetX,
y:e.offsetY
}
document.onmousemove = (e)=>{
e=e||window.event
var target = {
x:e.pageX-downPoint.x,
y:e.pageY-downPoint.y
}
this.element.style.left = target.x+'px'
this.element.style.top = target.y+'px'
}
document.onmouseup = ()=>{
document.onmousemove = document.onmouseup = null
}
}
}
}
new Drag(document.querySelector('div'))
</script>
</body>
</html>区间拖拽
//拖拽的元素 属性
//拖拽的处理就是对应方法
export default class Drag {
//拖拽的元素 区间元素
constructor(element, intervalElement) {
this.element = element
this.intervalElement = intervalElement || document
//记录按下的坐标
this.downPoint = {
x: 0,
y: 0
}
//目标坐标
this.targetPoint = {}
this.down()
}
//移动的处理
move() {
this.intervalElement.onmousemove = (e) => {
//记录移动的位置
//减去对应的区间元素离页面的位置 区间内的位置
let currentPoint = {
x: e.pageX - this.getIntervalToPage().left,
y: e.pageY - this.getIntervalToPage().top
}
//目标位置
this.targetPoint = {
x: currentPoint.x - this.downPoint.x,
y: currentPoint.y - this.downPoint.y
}
//检索区间
this.checkRange()
//设置位置
this.setPoint()
}
}
setPoint() {
//设置对应的位置
this.element.style.left = this.targetPoint.x + 'px'
this.element.style.top = this.targetPoint.y + 'px'
}
//区间判断
checkRange() {
//获取最大移动距离
let max = {
x: this.intervalElement.clientWidth - this.element.offsetWidth,
y: this.intervalElement.clientHeight - this.element.offsetHeight,
}
//遍历
for (var key in this.targetPoint) {
//最小值判断
if (this.targetPoint[key] < 0) {
this.targetPoint[key] = 0
}
//最大值判断
if (this.targetPoint[key] > max[key]) {
this.targetPoint[key] = max[key]
}
}
}
//按下
down() {
//在对应的拖拽元素里面按下
this.element.onmousedown = (e) => {
e = e || window.event
//记录对应的按下位置
this.downPoint.x = e.offsetX
this.downPoint.y = e.offsetY
this.move()
this.up()
}
}
//弹起
up() {
document.onmouseup = () => {
this.intervalElement.onmousemove = document.onmouseup = null
}
}
//获取页面离区间的位置
getIntervalToPage() {
let element = this.intervalElement
let distance = {
left: 0,
top: 0
}
while (element.offsetParent) {
distance.left += element.offsetLeft
distance.top += element.offsetTop
element = element.offsetParent
}
return distance
}
}放大镜的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bigBox{
width: 450px;
height: 450px;
position: relative;
}
.bigBox>img{
width: 100%;
}
.moveBox{
background-color: rgba(7, 0, 200, 0.199);
position: absolute;
left: 0;
right: 0;
display: none;
}
.imgBox{
width: 540px;
height: 540px;
overflow: hidden;
position: relative;
display: none;
}
.imgBox>img{
width: 800px;
height: 800px;
position: absolute;
}
</style>
</head>
<body>
<div class="bigBox">
<img src="https://img10.360buyimg.com/n1/jfs/t1/191520/31/29608/140105/6368adb7Ee0998219/14d26461b896cae9.jpg" alt="">
<div class="moveBox"></div>
</div>
<div class="imgBox">
<img src="https://img10.360buyimg.com/n1/jfs/t1/191520/31/29608/140105/6368adb7Ee0998219/14d26461b896cae9.jpg" alt="">
</div>
<script type="module">
import Drag from './drag.js'
class Loupe extends Drag{
constructor(bigBox,moveBox,imgBox,bigImg){
super(moveBox,bigBox)
this.imgBox = imgBox
this.bigImg = bigImg
this.element.onmousedown = null
this.enter()
this.leave()
}
setPoint(){
this.element.style.left = this.targetPoint.x+'px'
this.element.style.top = this.targetPoint.y+'px'
this.bigImg.style.left = -1*this.targetPoint.x*this.bigImg.clientWidth/this.intervalElement.clientWidth+'px'
this.bigImg.style.top = -1*this.targetPoint.y*this.bigImg.clientHeight/this.intervalElement.clientHeight+'px'
}
enter(){
this.intervalElement.onmouseenter =()=>{
this.element.style.display = 'block'
this.imgBox.style.display = 'block'
this.init()
this.downPoint ={
x:this.element.offsetWidth/2,
y:this.element.offsetHeight/2
}
this.move()
}
}
leave(){
this.intervalElement.onmouseleave = ()=>{
this.element.style.display = 'none'
this.imgBox.style.display = 'none'
}
}
init(){
this.element.style.width = this.intervalElement.clientWidth/this.bigImg.clientWidth*this.imgBox.clientWidth+'px'
this.element.style.height = this.intervalElement.clientHeight/this.bigImg.clientHeight*this.imgBox.clientHeight+'px'
}
}
var bigbox = document.querySelector('.bigBox')
var moveBox = document.querySelector('.moveBox')
var imgBox = document.querySelector('.imgBox')
var bigImg = document.querySelector('.imgBox>img')
new Loupe(bigbox,moveBox,imgBox,bigImg)
</script>
</body>
</html>
扫一扫
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
