第四周

面向对象
创建对象
内置构造函数
let obj = new Object // 留心：小括号可写可不写，当需要传递参数必写
obj.键 = 值
字面量语法
let obj = {键1:值1,…,键n:值n}

自定构造函数
语法
function 函数名() { // 推荐首字母大写 例如系统构造函数
// 通过this.键 = 值 添加成员
// 不需要返回对象 后期通过new 关键词创建即可
}

let 变量名1 = new 函数名(); // 多学一招：小括号可以省略 推荐写上

面向对象三大特性
封装：将代码封装起来，然后调用
继承：子拥有父的属性或方法 （减少代码冗余，重复使用代码）
后台语言：extends
前端语言：【原型】来实现继承功能
多态：多种形态继承之后既别人的特性又有自己的特性

原型
是什么：JS给每个函数都分配了一个公共空间（原型对象）
好处：减少内存占用
设置
单独设置：构造函数名.prototype.属性名 = 值（追加）
批量设置：构造函数名.prototype = 对象（相当于覆盖）
获取
构造函数创建的对象.proto.属性名 （不常用）
通过原型对象.constructor属性可以获取对应构造函

原型链
什么是原型链：多个原型的集合
明确：你自定义的构造函数有一个公共空间 上面还有一个公共空间 Object
特性：
找对象的属性和方法
先自身找 （找到了-直接用，找不到-原型链上找）
再去【自身公共空间】找（找到了-直接用，找不到-原型链上找）
…
一直找到【Object公共空间】 （找到了-直接用，找不到-）
属性 - undefined
方法 - 报错

分页面向过程
步骤1：将创建分页标签封装起来
步骤2：将创建分页页码封装起来
步骤3：给div设置点击事件（事件委拖）
步骤4：在处理函数中判断是否是分页页码和分页标签
不是 - 不管
是 - 1更改全局的当前第几页 pageInfo.pageNum,2-重新渲染/展示页码

分页面向对象
Html相关

let page2 = new Pagination(’.page2’,{
// 分页标签
pageTag : {
first: ‘首页’,
prev: ‘上一页’,
list: null,
next: ‘下一页’,
last: ‘末页’,
},
// 分页页码的数据
pageInfo : {
pageNum: 100,
pageSize: 10,
totalData: 1000
}
})

js相关
// function Pagination(el, options)
// {
// // 一、保存全局数据

// // 二、调用
// this.setFatherStyle()
// this.this.createPageTag() // -> this.createPageNum()
// }
// // 二、搞标签
// // 三、搞页码

function Pagination(el, options)
{
// 一、保存全局数据
this.el = document.querySelector(el)
options.pageInfo.totalPage = Math.ceil(options.pageInfo.totalData / options.pageInfo.pageSize)
this.options = options
this.nullObj // 定义null标签对象（目的：存放分页页码数据）
// 二、调用
this.setFatherStyle()
this.createPageTag() // -> this.createPageNum()
}
// 2.1、搞标签
Pagination.prototype.setFatherStyle = function()
{
let divObj = this.el
let pageInfo = this.options.pageInfo
let pageTag = this.options.pageTag

// let divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'
// divObj.addEventListener('click', function(evt){ // this事件源
divObj.addEventListener('click', (evt) => { // this新对象
    let e = evt || window.event
    let tagValue = e.target.innerHTML
    if (tagValue == pageTag.first)
    {
        pageInfo.pageNum = 1
        this.createPageTag()
    }
    if (
        tagValue == pageTag.prev
        &&
        pageInfo.pageNum > 1
    )
    {
        pageInfo.pageNum = parseInt(pageInfo.pageNum) - 1
        this.createPageTag()
    }

    if (parseInt(tagValue))
    {
        pageInfo.pageNum = parseInt(tagValue)
        this.createPageTag()
    }
    
    if (
        tagValue == pageTag.next
        &&
        pageInfo.pageNum < pageInfo.totalPage
    )
    {
        pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1
        this.createPageTag()
    }
    if (tagValue == pageTag.last)
    {
        pageInfo.pageNum = pageInfo.totalPage
        this.createPageTag()
    }
})

}
// 2.2、搞标签
Pagination.prototype.createPageTag = function()
{
let divObj = this.el
let pageTag = this.options.pageTag
let pageInfo = this.options.pageInfo

//=======================
divObj.innerHTML = ''  // 改变当前页了，需要重新渲染
//=======================
// 1. 先遍历pageTag对象（目的：创建分页标签p）
for (let tag in pageTag) 
{// tag是对象的键  pageTag[tag]是对象的值
    // 2. 搞分页标签
    // 2.1 创建p标签
    let pObj = document.createElement('p')

    if (tag!='list')
    {
        // 2.2 创建内容
        let textObj = document.createTextNode(pageTag[tag])
        // 2.3 2.2 加到 2.1 中
        pObj.appendChild(textObj)
        // 2.4 设置p标签样式
        // pObj.style.display = 'inline-block'
        pObj.style.margin = '0 5px'
        pObj.style.padding = '0 5px'
        pObj.style.border = 'solid 1px black'
    }
    
    // 2.5 放到div里面
    divObj.appendChild(pObj)
}

// 禁用
// let divPtagObj = document.querySelectorAll('div p')
let divPtagObj = divObj.querySelectorAll('p')
// pageInfo.pageNum == 1   禁用 首页 上一页
if (pageInfo.pageNum == 1)
{
    divPtagObj[0].style.background = '#ccc'
    divPtagObj[1].style.background = '#ccc'
}
// pageInfo.pageNum == pageInfo.totalPage   禁用 下一页 末页
if (pageInfo.pageNum == pageInfo.totalPage)
{
    divPtagObj[3].style.background = '#ccc'
    divPtagObj[4].style.background = '#ccc'
}

//========================
this.createPageNum() // 必须分页标签好了在创建分页页码
//========================

}
// 2.3、搞页码
Pagination.prototype.createPageNum = function()
{
let divObj = this.el
let pageInfo = this.options.pageInfo
// 1. 获取null标签对象
// nullObj = document.querySelector(‘div p:nth-child(3)’)
this.nullObj = divObj.querySelector(’ p:nth-child(3)’)
// 2. 按照规则创建分页页码 而且 还要有省略号
// pageNum<5 1 2 3 4 5 … 99 100
// pageNum5 1 2 3 4 5 6 7 … 99 100
// pageNum>5 && pageNum < 总页数-4 1 2 … 4 5 [6] 7 8 … 99 100
// pageNum >= 总页数-4 1 2 … 96 97 98 99 100
if (pageInfo.pageNum<5) {
for (let i = 1; i<=5; i++) this.createP(i)
this.createP(’…’, ‘span’)
this.createP(pageInfo.totalPage - 1)
this.createP(pageInfo.totalPage)
} else if (pageInfo.pageNum5) {
for (let i = 1; i<=7; i++) this.createP(i)
this.createP(’…’, ‘span’)
this.createP(pageInfo.totalPage - 1)
this.createP(pageInfo.totalPage)
} else if (pageInfo.pageNum>5 && pageInfo.pageNum < pageInfo.totalPage - 4) {
this.createP(1)
this.createP(2)
this.createP(’…’, ‘span’)
for (let i = pageInfo.pageNum-2; i<=pageInfo.pageNum+2; i++) this.createP(i)
this.createP(’…’, ‘span’)
this.createP(pageInfo.totalPage - 1)
this.createP(pageInfo.totalPage)
} else if (pageInfo.pageNum >= pageInfo.totalPage - 4) {
this.createP(1)
this.createP(2)
this.createP(’…’, ‘span’)
for (let i = pageInfo.totalPage-4; i<=pageInfo.totalPage; i++) this.createP(i)
}
}

Pagination.prototype.createP = function(content, tag= ‘p’)
{
let pageInfo = this.options.pageInfo

// 2.1 创建p标签
let pObj = document.createElement(tag)
// 2.2 创建内容
let textObj = document.createTextNode(content)
// 2.3 2.2 加到 2.1 中
pObj.appendChild(textObj)
// 2.4 设置p标签样式
pObj.style.display = 'inline-block'
pObj.style.margin = '0 5px'
pObj.style.padding = '0 5px'
pObj.style.border = 'solid 1px black'
if (content == pageInfo.pageNum)  pObj.style.background = 'orange'
// 放到 nullObj 中
this.nullObj.appendChild(pObj)

}

放大镜
1.放大镜静态页面初始化
2.显示静态页面（面向对象调用）
定义：
class Enlarge
{
constructor(CSS选择器，配置信息略)
{
// 1. 保存全局信息
this.el = …

		// 2. 默认调用
		this.init()
 	}
 	
 	init() {
        // 功能1
        // 功能2
        // 功能3
        // ....
        // 功能n
        this.enlargeOverOut()
        this.enlargeSetWH()
        this.maskMove()
        this.enlargeSetBg()
        this.smallImgChange()
 	}
 }

调用：let 变量名 = new Enlarge（CSS选择器，配置信息略）

放大镜移入移出

• 
• 

放大镜盒子比例
遮罩层尺寸（黄色）1 放大镜【盒子尺寸】 1
--------------- = ----------------
bigImg盒子尺寸 2 放大镜【背景尺寸】 2

放大镜【盒子尺寸】 * bigImg盒子尺寸 = 遮罩层尺寸（黄色） * 放大镜【背景尺寸】

放大镜【盒子尺寸】 = 遮罩层尺寸（黄色） * 放大镜【背景尺寸】 / bigImg盒子尺寸

• 
• 

遮罩移动
思路
步骤1：给bigImg增加【移动】事件 （注：如果给mask加 操作快了有bug）
步骤2：获取事件对象
获取鼠标位置（【最终】这个位置 相当于bigImg左上角举例）
设置mask坐标left和top
限制mask坐标移动范围

• 
• 

放大镜 背景同步
公式
放大镜背景图移动距离 放大镜盒子尺寸
------------------ = --------------
遮罩层移动距离 遮罩层尺寸

放大镜背景图移动距离 * 遮罩层尺寸 = 放大镜盒子尺寸 * 遮罩层移动距离

放大镜背景图移动距离 = 放大镜盒子尺寸 * 遮罩层移动距离 / 遮罩层尺寸

this.enlarge.style.backgroundPosition = -${bgX}px -${bgY}px

• 
•