# pandora-widget

> Widget 是 UI 组件的基础类，约定了组件的基本生命周期，实现了一些通用功能。基于 Widget 可以构建出任何你想要的 Web 界面组件。

Latest version **1.2.3** (published 2017-01-22) · 0 weekly downloads

## Install

```sh
npm install pandora-widget
pnpm add pandora-widget
yarn add pandora-widget
bun add pandora-widget
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2017-01-22 |
| First published | 2016-12-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | pandorajs |
| Maintainers | lynzz |
| Keywords | pandora, widget |

## Links

- npm: https://www.npmjs.com/package/pandora-widget
- Repository: https://github.com/pandorajs/widget
- Issues: https://github.com/pandorajs/widget
- npm.io page: https://npm.io/package/pandora-widget

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^1.11.1
- [pandora-base](https://npm.io/package/pandora-base.md) ^1.2.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2017-01-22
- 1.2.2 — 2017-01-12
- 1.2.1 — 2017-01-11
- 1.2.0 — 2016-12-22

## README

# pandora-widget

Widget 是 UI 组件的基础类，约定了组件的基本生命周期，实现了一些通用功能。基于 Widget 可以构建出任何你想要的 Web 界面组件。
---

## 使用说明

Widget 继承了 base, 可使用其中包括 class、events、aspect等功能。


### 简单的继承

```js
var WidgetA = Widget.extend({
  defaults: {
    a: 1
  },
  setup: function() {
    this.render();
  },
  method: function() {
    console.log(this.option('a'));
  }
});

var widget = new WidgetA({
  a: 2
});
widget.method(); // => 2

```

### 生命周期

Widget 有一套完整的生命周期，控制着组件从创建到销毁的整个过程。主要有 `initialize`，`render`，`destroy` 三个过程。

#### Initialize

*Widget 在实例化的时候会做一系列操作：*

```js
// widget 唯一 id
self.uniqueId = uniqueId();

/**
 * 用于 DOM 事件绑定的 NAMESPACE
 *
 * @property {string} delegateNS
 */
self.delegateNS = DELEGATE_NS_PREFIX + self.uniqueId;

// 初始化 `container` 与 `element`
self.initCnE();

// 事件代理，绑定在 element 上
self.initDelegates();

// 用户自己定义操作，提供给子类继承
self.setup();

// 储存实例
cachedInstances[self.uniqueId] = self;
```

#### Render

将 `this.element` 插入到文档流，默认插入到 document.body，可以通过 container 指定。

Render 这一步操作从 Initialize 中独立出来，因为有些组件在实例化的时候不希望操作 DOM，如果希望实例化的时候处理可在 setup 里调用 this.render()。

#### Destroy

组件销毁。将 widget 生成的 element 和事件都销毁。

### 事件代理

事件代理是 Widget 非常好用的特性，将所有的事件都代理到 `this.element` 上。这样可以使得对应的 DOM 内容有修改时，无需重新绑定，在 destroy 的时候也会销毁这些事件。

widget.initDelegates() 会在实例初始化时自动调用，这时会从 this.option('delegates') 中取得声明的代理事件，比如

```js
var MyWidget = Widget.extend({
    defaults: {
      delegates: {
        "dblclick": "open",
        "click .icon.doc": "select",
        "mouseover .date": "showTooltip"
      }
    },
    open: function() {
      ...
    },
    select: function() {
      ...
    },
    ...
});
```

delegates 中每一项的格式是："event selector": "callback"，当省略 selector 时，默认会将事件绑定到 this.element 上。callback 可以是字符串，表示当前实例上的方法名； 也可以直接传入函数。

delegates 中，支持 {{name}} 表达式，比如上面的代码，可以简化为：

```js
var MyWidget = Widget.extend({
  defaults: {
    iconCls: '.icon.doc',
    delegates: {
      "dblclick": "open",
      "click {{iconCls}}": "select",
      "mouseover .date": "showTooltip"
    }
  },
  ...
});
```

---
_Source: https://npm.io/package/pandora-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._