闭包实现的多级菜单状态记忆容器通过嵌套闭包封装私有状态树，提供get/set/toggle/reset等接口，支持路径式访问、DOM联动、默认配置及localStorage持久化。
用闭包实现一个支持多级菜单折叠状态的记忆容器，核心是：**封装状态、隔离作用域、提供可控的读写接口**。不需要依赖全局变量或外部状态管理库，靠函数作用域就能安全持久地记住每级菜单的展开/折叠状态。
设计思路：用嵌套闭包管理层级状态
多级菜单的结构天然具有树形特征（如 menu > submenu > sub-submenu），每级需要独立记忆其展开状态。闭包可为每一层创建私有状态空间：
- 外层闭包保存整个菜单的状态树（例如用嵌套对象
{ 'user': { 'profile': true, 'settings': false }, 'admin': true }） - 内层函数（如
toggle、isExpanded、reset）通过词法作用域访问并操作该状态，不暴露原始数据 - 键名采用路径式字符串（如
"user.profile"或数组["user", "profile"]）便于映射到任意深度节点
基础实现：单例记忆容器
以下是一个轻量、可复用的闭包工厂函数：
function createMenuStateStore() {
const state = {}; // 私有状态对象，外部不可直接访问
<p>function set(path, value) {
const keys = Array.isArray(path) ? path : path.split('.');
let cursor = state;
for (let i = 0; i < keys.length - 1; i++) {
if (!cursor[keys[i]]) cursor[keys[i]] = {};
cursor = cursor[keys[i]];
}
cursor[keys.at(-1)] = value;
}</p><p>function get(path, defaultValue = false) {
const keys = Array.isArray(path) ? path : path.split('.');
let cursor = state;
for (const key of keys) {
if (cursor == null || typeof cursor !== 'object') return defaultValue;
cursor = cursor[key];
}
return cursor === undefined ? defaultValue : cursor;
}</p><p>function toggle(path) {
const current = get(path, false);
set(path, !current);
return !current;
}</p><p>function reset() {
Object.keys(state).forEach(key => delete state[key]);
}</p><p>return { get, set, toggle, reset };
}</p><p>// 使用示例
const menuState = createMenuStateStore();
menuState.toggle("user"); // → true（展开 user）
menuState.toggle("user.profile"); // → true（展开 user > profile）
menuState.get("user.profile"); // → true
menuState.get("admin.logs"); // → false（未设置，默认 false）
适配真实菜单 DOM 的实用封装
实际项目中，常需联动 DOM 节点。可在闭包内增加 DOM 操作逻辑，保持状态与视图同步：
立即学习“Java免费学习笔记（深入）”；
- 给菜单项添加唯一
data-menu-path属性（如data-menu-path="user.profile"） - 闭包返回的
bindToggleHandler方法自动绑定点击事件，并调用toggle+ 切换 CSS 类（如.expanded） - 初始化时遍历所有菜单项，用
get()恢复上次状态
function createMenuStateStore() {
const state = {};
<p>// ...（同上 get/set/toggle/reset）</p><p>function bindToggleHandler(menuContainer) {
menuContainer.addEventListener('click', (e) => {
const trigger = e.target.closest('[data-menu-trigger]');
if (!trigger) return;</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> const path = trigger.dataset.menuPath;
if (!path) return;
const isOpen = toggle(path);
const content = menuContainer.querySelector(`[data-menu-content="${path}"]`);
if (content) {
content.classList.toggle('expanded', isOpen);
}
trigger.setAttribute('aria-expanded', isOpen);
});}
function initFromDOM(menuContainer) {
menuContainer.querySelectorAll('[data-menu-content]').forEach(el => {
const path = el.dataset.menuContent;
const isOpen = get(path, false);
el.classList.toggle('expanded', isOpen);
const trigger = menuContainer.querySelector([data-menu-trigger][data-menu-path="${path}"]);
if (trigger) trigger.setAttribute('aria-expanded', isOpen);
});
}
return { get, set, toggle, reset, bindToggleHandler, initFromDOM }; }
进阶：支持默认展开配置与持久化
若需刷新页面后仍保留状态，可在闭包中集成 localStorage：
- 构造时尝试从
localStorage恢复状态（如JSON.parse(localStorage.getItem('menuState') || '{}')） - 每次
set后自动写入localStorage（注意防抖避免频繁写入） - 支持传入默认展开路径数组（如
['dashboard', 'user.settings']），首次加载时优先使用
这样既保持闭包的封装性，又增强实用性，状态真正“记得住、带得走”。
