Dojo动态布局保存问题：如何保存用户新增组件后的自定义布局

嘿，我之前在做Dojo项目的时候也遇到过一模一样的需求——动态加了ContentPane或者标签页后，想把布局保存下来下次打开还能用。给你分享几个我亲测好用的方法，不用绕弯路：

这是最直接的思路：把布局容器和每个子组件的关键配置提取出来，转成JSON字符串存在本地存储（比如localStorage）或者后端数据库里，恢复的时候再重新解析生成组件。

先写一个序列化布局的函数，提取你关心的配置项：

function serializeLayout(borderContainer) {
  const layoutConfig = {
    // 保存容器本身的配置
    container: {
      style: borderContainer.get('style')
    },
    // 保存所有子组件的配置
    children: []
  };

  // 遍历BorderContainer的所有子组件
  borderContainer.getChildren().forEach(child => {
    layoutConfig.children.push({
      type: child.declaredClass, // 组件的类名，比如dijit/layout/ContentPane
      region: child.get('region'),
      style: child.get('style'),
      content: child.get('content'),
      id: child.get('id') // 给每个组件设唯一ID，方便恢复时匹配
    });
  });

  return JSON.stringify(layoutConfig);
}

保存布局的时候调用这个函数，把结果存起来：

// 当用户添加完新组件后，执行保存
const savedLayout = serializeLayout(bc);
// 存在localStorage里，也可以传给后端接口存数据库
localStorage.setItem('myDojoLayout', savedLayout);

恢复布局时，解析JSON并重新创建组件：

function restoreLayout(borderContainer) {
  const savedLayout = localStorage.getItem('myDojoLayout');
  if (!savedLayout) return;

  const layoutConfig = JSON.parse(savedLayout);
  
  // 先清空现有子组件，避免重复
  borderContainer.getChildren().forEach(child => {
    borderContainer.removeChild(child);
    child.destroy(); // 销毁组件防止内存泄漏
  });

  // 恢复容器本身的样式
  borderContainer.set('style', layoutConfig.container.style);

  // 重新创建每个子组件并添加到容器
  layoutConfig.children.forEach(childConfig => {
    // 根据组件类名动态加载模块（确保模块已提前引入）
    require([childConfig.type], Component => {
      const child = new Component(childConfig);
      borderContainer.addChild(child);
    });
  });
}

// 页面初始化时调用，恢复之前保存的布局
restoreLayout(bc);

如果你的组件需要实时同步布局变化（比如用户拖拽调整面板宽度后自动保存），可以利用Dojo的watch方法监听组件属性变化，自动更新保存的配置：

// 给动态创建的ContentPane绑定监听
const cp1 = new ContentPane({ region: "left", style: "width: 100px", content: "hello world", id: "leftPane" });
bc.addChild(cp1);

// 监听region、style这些关键属性的变化
cp1.watch(['region', 'style'], (attr, oldVal, newVal) => {
  // 取出当前保存的布局配置
  const currentLayout = JSON.parse(localStorage.getItem('myDojoLayout'));
  // 找到当前组件对应的配置项
  const childItem = currentLayout.children.find(item => item.id === cp1.get('id'));
  if (childItem) {
    // 更新属性值
    childItem[attr] = newVal;
    // 重新保存
    localStorage.setItem('myDojoLayout', JSON.stringify(currentLayout));
  }
});

• 如果布局有嵌套（比如BorderContainer里套TabContainer），序列化函数要做递归处理，把所有层级的组件配置都提取出来。
• 要是需要多用户共享布局，把JSON字符串传给后端接口存在数据库里就行，恢复时再从接口拉取。
• 一定要给每个动态创建的组件设置唯一id，否则恢复时没法准确匹配组件。

内容的提问来源于stack exchange，提问作者Magneton