设计模式(十四)-享元模式
2021-02-23 本文已影响0人
仔崽06
享元模式
享元模式，共享内存，节约内存空间，相同的数据共享使用，主要对数据、方法共享分离,将数据的方法分为内部数据，内部方法和外部数据、外部方法.内部状态保存在对象内部，通常不会改变，可以共享，外部状态保存在对象外部，可以随着场景改变，不可共享.
-
图例
image.png
-
代码实现
function Person(name,age){
this.name=name;
this.age=age
}
Person.prototype.getName=function(){
console.log(this.name)
}
Person.prototype.getAge=function(){
console.log(this.age)
}
let p1=new Person('p1',18)
let p2=new Person('p2',28)
- 应用场景
1.前端分页处理
<!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>
</head>
<body>
<ul id="conatiner">
</ul>
<button id="next">下一页</button>
</body>
<script>
let lists=[]
for(let i=0;i<20;i++){
lists.push(`文本${i}`)
}
let pageNum=0;
let pageSize=5;
let container=document.getElementById('conatiner')
let getList=(function(){
let lis=[]
return function(){
let element;
if(lis.length<5){
element=document.createElement('li');
lis.push(element)
}else{
element=lis.shift();
lis.push(element)
}
return element
}
})()
function next(){
pageNum++;
if(pageNum>parseInt(20/pageSize)) return;
let start=(pageNum-1)*pageSize;
for(let i=0;i<5;i++){
let ele=getList();
ele.innerHTML=lists[start+i];
container.appendChild(ele)
}
}
next()
document.getElementById('next').addEventListener('click',()=>next())
</script>
</html>
