function oldWay() {
    // 需要转换才能用数组方法
    const args = Array.from(arguments)
    const sum = args.reduce((a, b) => a + b, 0)
    return sum
}

console.log(oldWay(1, 2, 3, 4))  // 10

function newWay(...args) {  // args已经是真数组
    const sum = args.reduce((a, b) => a + b, 0)
    return sum
}

class Fruit{
	constructor(name,fruit,options){
		this.name = name;
		this.fruit = fruit;
		this.config = {
			number: options.number,
			state: options.state,
		}
	}
	init(){
		console.log(`${this.name}吃了${this.config.number}个${this.fruit},它们是${this.config.state}的`)
	}
}
const umi = new Fruit('Umi','苹果',{number:3,state:'腐烂'})
umi.init()
//Umi吃了3个苹果,它们是腐烂的

function dog(name,color){
	alert(`它是${name},毛色是${color}`)
}
dog('Buley','blue')//它是Buley,毛色是blue

const params = {color: 'blue', name: 'Buley'};
function dog({name,color}){
	//相当于
	// const name = params.name;
	// const color = params.color;
	alert(`它是${name},毛色是${color}`)
}
dog(params)//它是Buley,毛色是blue

class Fruit{
	constructor(number,state){
			this.number = number
			this.state = state
	}
}
//改为
class Fruit{
	constructor(config){
		this.config = {
			number: config.number,
			state: config.state,
		}
	}
}

options = {
	number: 3,
	state:'腐烂'
}

this.config = {
	number: options.number,
	state: options.state,
}

//此刻options对象已被传值

options.number = 3
options.state = '腐烂'

//所以
config = {
	number: 3,
	state:'腐烂'
}

funciton debounce(func,delay){
	let timer = null //初始化
	return function(){ //  //这里也可以使用剩余参数(...args)
		let context = this
		let args = arguments //  //用了剩余参数的话这一步就不需要了，因为剩余参数已经收集了所有的参数
		clearTimeout(timer) //timer再次初始化，清除可能已经有的延迟进程
		timer = setTimeout( //timer赋值为构造函数，使func获得延迟状态
			()=>{
				func.apply(context,args)//执行函数
				timer = null //更新状态，显式表示定时任务结束
			},delay
		)
	}

}

function throttle(func,delay){
	let timer = null
	return function(...args){
		let context = this
		if(timer)return
		timer = setTimeout( 
			()=>{
				func.apply(context,args)
				timer = null 
			},delay
		)
	}

}

const observe = new IntersectionObserver(
(entries,observe)=>{
	for(let entry of entries){
        if(entry.isIntersecting){
          const img = entry.target
          img.src = img.dataset.url
        }
},
{
	rootMargin:'50px',
}
)

const lazy = document.querySelectorAll('img')//

Array.from(lazy).forEach(
        (item)=>{
          observe.observe(item)
        }
      )

pageSize //每页显示多少个（假如要显示图片）图片

totalItems //数组长度，也就是总图片数

totalPages //总页数，通过totalItems/pageSize计算得到

currentPages //当前页，默认是1

maxShowPages //想要除开头和结尾显示的最大页数（包括...）

fullData //也就是存储图片信息的数组，这里设定拥有存图片链接的属性imgLink

function renderDate(){
//我们会先计算当前页想要渲染数据的起始索引，和结束索引，需要用到变量currentPage和pageSize

const startIndex = (currentPage - 1) * pageSize
const endIndex = starIndex + pageSize

//再切割图片数组，获得要渲染的新数组

const currentData = fullData.slice(startIndex, endIndex)

//下面就是操纵dom进行渲染了
//先清空一下容器

dataContainer.innerHTML = '';

// 渲染新数据
currentData.forEach(item => {
  const div = document.createElement('div');
  div.className = 'data-item';
  div.textContent = item.content;
  dataContainer.appendChild(div);//dataContainer是一个dom变量
})

renderPaginator()//这个是渲染分页器的函数，在这里调用就是同步二者的渲染
}

function getPaginationPages(){
//我们会先创建一个数组变量，来存要渲染的页码字符串
//接下来就是根据不同情况来判定往数组里按顺序push什么样的页码字符串内容
let arr = []

//再计算第二种情况时currentPage两边会各有多少页

const side = Math.floor((maxShowPages - 2) / 2) 
//-2是因为第一页和最后一页恒定，而...也会占了两个名额

//如果总页数比最大显式页少那就不需要辨析情况了，直接渲染所有数字。
if (totalPages <= maxShowPages + 2) {
  for (let i = 1; i <= total; i++)arr.push(i)
  return arr
}

//计算当前页左右的起始索引，和结束索引，控制数字变量

let start = currentPage - side
let end = currentPage + side

//两个判定条件变量，判定当前页与左右顶点的距离情况。
const isNearStart = currentPage <= maxShowPages - 1
const isNearEnd = currentPage >= totalPages - maxShowPages + 2

if (isNearStart) {//开头
  for (let i = 1; i <= maxShowPages; i++) {
	arr.push(i)
  }
  arr.push('...')//
  arr.push(totalPages)
} else if (isNearEnd) {//结尾
  arr.push(1)
  arr.push('...')
  for (let i = totalPages - maxShowPages + 1; i <= totalPages; i++) {
	arr.push(i)
  }
} else {//中间
  arr.push(1)
  arr.push('...')
  for (let i = start; i <= end; i++) {
	arr.push(i)
  }
  arr.push('...')
  arr.push(totalPages)
}
return arr;

  

      }

    }
}

createPageButton(text, isActive) {

const button = document.createElement('button');
button.textContent = text;
//这里就是true就可以的意思，不传值，也就是没条件为真
if (isActive) {
  button.style.backgroundColor = '#c0855e'
  button.style.color = 'white'
}
//这里就是增加条件
if (text === '上一页' && currentPage === 1) {
  button.disabled = true
} else if (text === '下一页' && currentPage === totalPages) {
  button.disabled = true
}

return button;
}

renderPaginator() {
paginationContainer.innerHTML = ''; // 清空旧分页控件

//创建上一页按钮
const prevButton = createPageButton('上一页', currentPage > 1)
prevButton.className = 'prev-button'
prevButton.addEventListener('click', () => {
  if (currentPage > 1) {
	currentPage--;
	renderData();
  }
});
paginationContainer.appendChild(prevButton);


//创建页码按钮
const pages = getPaginationPages()
pages.forEach(item => {
  if (item === '...') {//字符串为...的情况
	const span = document.createElement('span')
	span.textContent = '...'
	paginationContainer.appendChild(span)
  } else {
	const pageButton = createPageButton(item, item === currentPage)
	pageButton.addEventListener('click', () => {
	  config.currentPage = item
	  renderData()
	})
	paginationContainer.appendChild(pageButton)
  }
})



//创建下一页按钮
const nextButton = createPageButton('下一页', currentPage < totalPages());
nextButton.className = 'next-button'
nextButton.addEventListener('click', () => {
  if (currentPage < totalPages()) {
	currentPage++;
	renderData();
  }
});
paginationContainer.appendChild(nextButton);

}