备忘录模式（Memento）
在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态。(缓存数据方便后续直接使用)
需求：避免每次都重复调用接口获取数据
<button id="search_btn">获取数据</button>
<div id="content"></div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
// 备忘录模式（缓存数据）
const Page = (function () {
// 定义备忘录（缓存对象）
let cache = {
};
return function (key, fn) {
if (cache[key]) {
fn && fn(cache[key]);
} else {
$.get('./data.json', function (res) {
if (res.code === 200) {
cache[key] = res.data.list;
fn && fn(cache[key]);
console.log(cache);
}
})
}
}
}());
// 点击请求接口
$('#search_btn').click(function (e) {
Page('tableData', function (list) {
const html =
`<table border>
<tr><th>姓名</th><th>年龄</th></tr>
${list.map(d => `${d.name}</td><td>${
d.age}</td></tr>`).join('')} </table>`; $('#content').html(html); }); }); 