如何销毁框架中的所有小部件 - TypeScript

在 TypeScript 中销毁一个小部件（widget）通常包括两个步骤：

1. 从 DOM 中删除小部件
2. 从框架中删除小部件

以下是一个简单的 TypeScript 示例，展示如何销毁一个由 Dojo 框架创建的小部件：

import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import { w } from '@dojo/framework/widget-core/d';
import { v } from '@dojo/framework/widget-core/d';
import { WidgetProperties } from '@dojo/framework/widget-core/interfaces';
import { destroy } from '@dojo/framework/core/Destroyable';

class MyWidget extends WidgetBase<WidgetProperties> {
  protected render() {
    return v('div', {}, [
      v('h1', {}, [ 'Hello, Dojo!' ]),
      w('button', { onclick: this._handleClick.bind(this) }, [ 'Destroy Widget' ])
    ]);
  }

  private _handleClick() {
    // 销毁小部件
    destroy(this);
  }
}

在这个示例中，我们创建了一个 MyWidget 小部件，并在 render 方法中返回一个标题和一个按钮。当用户点击按钮时，_handleClick 方法会调用 destroy 函数来销毁 MyWidget 小部件。

销毁一个小部件时，框架会自动从 DOM 中删除小部件。然而，并不是所有的小部件都可以直接销毁。对于一些有状态的小部件，可能需要手动清除一些资源。这就需要在 destroy 函数中添加一些额外的逻辑来清理资源。

总的来说，销毁一个小部件并不复杂，只需要调用 destroy 函数即可。对于复杂的小部件，可能需要一些额外的清理操作，但这超出了本文的范畴。如果您在使用 Dojo 或其他框架时遇到问题，可以参考文档或向社区寻求帮助。