blocklang

Dojo 部件进阶

翻译自：https://github.com/dojo/framework/blob/master/docs/en/creating-widgets/supplemental.md

部件的基本原理

部件是所有 Dojo 应用程序的基本构建要素。部件是主要的封装单元，它能表示从用户界面的单个元素，到更高级别的容器元素（如 Form 表单、段落、页面甚至是完整的应用程序）等所有内容。

前言：降低复杂度

单个部件通常表示应用程序中的单个职责。细微的职责自然会转化为单独的部件，而复杂的职责就需要拆分为几个相互依赖的部分。然后，每部分就可以实现为一个部件，其中一个或多个父容器部件会协调所有拆开部件的交互。在这种层级结构中，可以看出根部件在整体上实现了更大的责任，但实际上它是通过组合很多简单的部件实现的。

对一个完整的应用程序的来讲，它的所有需求集就是一个单一的、复杂的责任。使用 Dojo 实现这个完整的需求集，会产生具有层级结构的部件，通常从根节点的“Application”部件开始，然后根据每层功能分支出层层部件，最终到达表示 HTML 页面中单个元素的叶节点。

简单的好处

让部件尽可能简单的原因有：对单个部件而言，降低复杂度意味着更大的职责隔离（缩小范围）；更容易做全面测试；减少出错的机会；更有针对性的修复错误；以及更广泛的组件复用潜力。

从整个应用程序的层面看，简单的部件使得我们更容易理解每个组件，以及它们是如何组合在一起的。

这些好处会简化日常维护，并最终降低了构建和运行应用程序的总开销。

基本的部件结构

部件的核心只是一个渲染函数，该函数返回虚拟 DOM 节点，正是通过虚拟 DOM 节点描述部件在网页中的结构。但是，应用程序通常需要处理更多逻辑，不仅仅是简单的罗列 HTML 元素，因此有意义的部件通常不仅仅由简单的渲染函数组成。

部件通常位于它们各自的、单独命名的 TypeScript 模块中，且每个模块默认导出定义的部件。

表示部件最简单的方法是基于普通函数，从渲染函数的工厂定义开始。Dojo 的 @dojo/framework/core/vdom 模块中提供了一个 create() 函数，允许作者定义他们自己的部件渲染函数工厂。可优先使用命名的渲染函数，因为这样有助于调试；但并非必须如此；部件也可以使用一个被导出的变量标识，该变量保存了部件的工厂定义。

对于更喜欢使用类的结构而不是函数的应用程序，Dojo 也提供了基于类的部件。此部件继承 @dojo/framework/core/WidgetBase 模块中提供的 WidgetBase，并必须要实现一个 render() 方法。

以下示例展示了一个 Dojo 应用程序的部件，虽然没有实际用途，但功能完整：

src/widgets/MyWidget.ts

基于函数的 Dojo 部件：

import { create } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyWidget() {
    return [];
});

基于类的 Dojo 部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';

export default class MyWidget extends WidgetBase {
    protected render() {
        return [];
    }
}

因为此部件的渲染函数返回的是空数组，所以在应用程序的输出中没有任何内容。部件通常返回一到多个虚拟 DOM 节点，以便在应用程序的 HTML 输出中包含有意义的结构。

将虚拟 DOM 节点转换为网页中的输出是由 Dojo 的渲染系统处理的。

部件样式

部件的 DOM 输出的样式是由 CSS 处理的，相关的样式类存在 CSS 模块文件中，它与部件的 TypeScript 模块是对应的。基于函数的部件和基于类的部件使用相同的样式。该主题会在样式和主题参考指南中详细介绍。

渲染部件

Dojo 是一个响应式框架，负责处理数据变更的传播和相关的后台更新渲染。Dojo 采用虚拟 DOM(VDOM) 的概念来描述输出的元素，VDOM 中的节点是简单的 JavaScript 对象，旨在提高开发人员效率，而不用与实际的 DOM 元素交互。

应用程序只需要关心，将它们的期望的输出结构声明为有层级的虚拟 DOM 节点即可，通常是作为部件的渲染函数的返回值来完成的。然后，框架的 Renderer 组件会将期望的输出同步为 DOM 中的具体元素。也可以通过给虚拟 DOM 节点传入属性，从而配置部件和元素，以及为部件和元素提供状态。

Dojo 支持树的部分子节点渲染，这意味着当状态发生变化时，框架能够定位到受变化影响的 VDOM 节点的对应子集。然后，只更新 DOM 树中受影响的子树，从而响应变化、提高渲染性能并改善用户的交互体验。

注意： 部件渲染函数中返回的虚拟节点，是唯一影响应用程序渲染的因素。尝试使用任何其他实践，在 Dojo 应用程序开发中是被视为反模式的，应当避免。

支持 TSX

Dojo 支持使用 jsx 语法扩展，在 TypeScript 中被称为 tsx。此语法能更方便的描述 VDOM 的输出，并且更接近于构建的应用程序中的 HTML。

允许使用 TSX 的应用程序

可以通过 dojo create app --tsx CLI 命令轻松搭建出允许使用 TSX 的项目。

对于不是通过这种方式搭建的 Dojo 项目，可以通过在项目的 TypeScript 配置中添加以下内容来启用 TSX：

./tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "tsx"
    },
    "include": ["./src/**/*.ts", "./src/**/*.tsx", "./tests/**/*.ts", "./tests/**/*.tsx"]
}

TSX 部件示例

具有 .tsx 文件扩展名的部件，要在渲染函数中输出 TSX，只需要导入 @dojo/framework/core/vdom 模块中的 tsx 函数：

src/widgets/MyTsxWidget.tsx

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyTsxWidget() {
    return Hello from a TSX widget!;
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';

export default class MyTsxWidget extends WidgetBase {
    protected render() {
        return Hello from a TSX widget!;
    }
}

若部件需要返回多个顶级 TSX 节点，则可以将它们包裹在 <virtual> 容器元素中。这比返回节点数组更清晰明了，因为这样支持更自然的自动格式化 TSX 代码块。如下：

src/widgets/MyTsxWidget.tsx

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyTsxWidget() {
    return (
        
            First top-level widget element
            Second top-level widget element
        
    );
});

使用 VDOM

VDOM 节点类型

Dojo 会在 VDOM 中识别出两类节点：

VNode，或称为 Virtual Nodes，是具体 DOM 元素的虚拟表示，作为所有 Dojo 应用程序最底层的渲染输出。
WNode，或称为 Widget Nodes，将 Dojo 部件关联到 VDOM 的层级结构上。

Dojo 的虚拟节点中，VNode 和 WNode 都可看作 DNode 的子类型，但应用程序通常不处理抽象层面的 DNode。推荐使用 TSX 语法，因为它能以统一的语法渲染两类虚拟节点。

实例化 VDOM 节点

如果不想使用 TSX，在部件中可以导入 @dojo/framework/core/vdom 模块中的 v() 或 w() 函数。它们分别创建 VNode 和 WNode，并可作为部件渲染函数返回值的一部分。它们的签名，抽象地说，如下：

v(tagName | VNode, properties?, children?):
w(Widget | constructor, properties, children?)

参数	可选	描述
`tagName \| VNode`	否	通常，会以字符串的形式传入 `tagName`，该字符串对应 `VNode` 将要渲染的相应 DOM 元素的标签名。如果传入的是 `VNode`，新创建的 `VNode` 将是原始 `VNode` 的副本。如果传入了 `properties` 参数，则会合并 `properties` 中重复的属性，并应用到副本 `VNode` 中。如果传入了 `children` 参数，将在新的副本中完全覆盖原始 `VNode` 中的所有子节点。
`Widget \| constructor`	否	通常，会传入 `Widget`，它将导入部件当作泛型类型引用。还可以传入几种类型的 `constructor`，它允许 Dojo 以各种不同的方式实例化部件。它们支持延迟加载等高级功能。
`properties`	`v`: 是, `w`: 否	用于配置新创建的 VDOM 节点的属性集。它们还允许框架检测节点是否已更新，从而重新渲染。
`children`	是	一组节点，会渲染为新创建节点的子节点。如果需要，还可以使用字符串字面值表示任何文本节点。部件通常会封装自己的子节点，因此此参数更可能会与 `v()` 一起使用，而不是 `w()`。

虚拟节点示例

以下示例部件包含一个更有代表性的渲染函数，它返回一个 VNode。它期望的结构描述为，一个简单的 div DOM 元素下包含一个文本节点：

src/widgets/MyWidget.ts

基于函数的部件：

import { create, v } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyWidget() {
    return v('div', ['Hello, Dojo!']);
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { v } from '@dojo/framework/core/vdom';

export default class MyWidget extends WidgetBase {
    protected render() {
        return v('div', ['Hello, Dojo!']);
    }
}

组合部件的示例

类似地，也可以使用 w() 方法组合部件，还可以混合使用两种类型的节点来输出多个节点，以形成更复杂的层级结构：

src/widgets/MyComposingWidget.ts

基于函数的部件：

import { create, v, w } from '@dojo/framework/core/vdom';

const factory = create();

import MyWidget from './MyWidget';

export default factory(function MyComposingWidget() {
    return v('div', ['This widget outputs several virtual nodes in a hierarchy', w(MyWidget, {})]);
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { v, w } from '@dojo/framework/core/vdom';

import MyWidget from './MyWidget';

export default class MyComposingWidget extends WidgetBase {
    protected render() {
        return v('div', ['This widget outputs several virtual nodes in a hierarchy', w(MyWidget, {})]);
    }
}

渲染到 DOM 中

Dojo 为应用程序提供了一个渲染工厂函数 renderer()，@dojo/framework/core/vdom 模块默认导出该函数。提供的工厂函数定义了应用程序的根节点，会在此处插入 VDOM 结构的输出结果。

应用程序通常在主入口点 (main.tsx/main.ts) 调用 renderer() 函数，然后将返回的 Renderer 对象挂载到应用程序的 HTML 页面中指定的 DOM 元素上。如果挂载应用程序时没有指定元素，则默认挂载到 document.body 下。

例如：

src/main.tsx

import renderer, { tsx } from '@dojo/framework/core/vdom';

import MyComposingWidget from './widgets/MyComposingWidget';

const r = renderer(() => );
r.mount();

`MountOptions` 属性

Renderer.mount() 方法接收一个可选参数 MountOptions，该参数用于配置如何执行挂载操作。

属性	类型	可选	描述
`sync`	`boolean`	是	默认为: `false`。如果为 `true`，则渲染生命周期中相关的回调（特别是 `after` 和 `deferred` 渲染回调函数）是同步运行的。如果为 `false`，则在 `window.requestAnimationFrame()` 下一次重绘之前，回调函数被安排为异步运行。在极少数情况下，当特定节点需要存在于 DOM 中时，同步运行渲染回调函数可能很有用，但对于大多数应用程序，不建议使用此模式。
`domNode`	`HTMLElement`	是	指定 DOM 元素，VDOM 的渲染结果会插入到该 DOM 节点中。如果没有指定，则默认为 `document.body`。
`registry`	`Registry`	是	一个可选的 `Registry` 实例，可在挂载的 VDOM 间使用。

例如，将一个 Dojo 应用程序挂载到一个指定的 DOM 元素，而不是 document.body 下：

src/index.html



    
        This div is outside the mounted Dojo application.
        This div contains the mounted Dojo application.

src/main.tsx

import renderer, { tsx } from '@dojo/framework/core/vdom';

import MyComposingWidget from './widgets/MyComposingWidget';

const dojoAppRootElement = document.getElementById('my-dojo-app') || undefined;
const r = renderer(() => );
r.mount({ domNode: dojoAppRootElement });

向 VDOM 中加入外部的 DOM 节点

Dojo 可以包装外部的 DOM 元素，有效地将它们引入到应用程序的 VDOM 中，用作渲染输出的一部分。这是通过 @dojo/framework/core/vdom 模块中的 dom() 工具方法完成的。它的工作原理与 v() 类似，但它的主参数使用的是现有的 DOM 节点而不是元素标记字符串。在返回 VNode 时，它会引用传递给它的 DOM 节点，而不是使用 v() 新创建的元素。

一旦 dom() 返回的 VNode 添加到应用程序的 VDOM 中，Dojo 应用程序就实际获得了被包装 DOM 节点的所有权。请注意，此过程仅适用于 Dojo 应用程序的外部节点，如挂载应用程序元素的兄弟节点，或与主网页的 DOM 断开连接的新创建的节点。如果包装的节点是挂载了应用程序的元素的祖先或子孙节点，将无效。

`dom()` API

dom({ node, attrs = {}, props = {}, on = {}, diffType = 'none', onAttach })

参数	可选	描述
`node`	否	添加到 Dojo VDOM 中的外部 DOM 节点
`attrs`	是	应用到外部 DOM 节点上的 HTML 属性(attributes)
`props`	是	附加到 DOM 节点上的属性(properties)
`on`	是	应用到外部 DOM 节点上的事件集合
`diffType`	是	默认为: `none`。更改检测策略，确定 Dojo 应用程序是否需要更新外部的 DOM 节点
`onAttach`	是	一个可选的回调函数，在节点追加到 DOM 后执行

检测外部 DOM 节点的变化

通过 dom() 添加的外部节点是从常规的虚拟 DOM 节点中移除的，因为它们可能会在 Dojo 应用程序之外被处理。这意味着 Dojo 不能主要使用 VNode 的属性设置元素的状态，而是必须依赖 DOM 节点本身的 JavaScript 属性(properties)和 HTML 属性(attributes)。

dom() 接收 diffType 属性，允许用户为包装的节点指定属性变更检测策略。一个指定的策略，会指明如何使用包装的节点，以帮助 Dojo 来确定 JavaScript 属性和 HTML 属性是否已变化，然后将变化应用到包装的 DOM 节点上。默认的策略是 none，意味着 Dojo 只需在每个渲染周期将包装好的 DOM 元素添加到应用程序输出中。

注意： 所有的策略都使用前一次 VNode 中的事件，以确保它们会被正确的删除并应用到每个渲染中。

可用的 dom() 变化检测策略：

`diffType`	描述
`none`	此模式会为包装的 `VNode` 的前一次 `attributes` 和 `properties` 传入空对象，意味着在每个渲染周期，都会将传给 `dom()` 的 `props` 和 `attrs` 重新应用于包装的节点。
`dom`	此模式基于 DOM 节点中的 `attributes` 和 `properties` 与传入 `dom()` 的 `props` 和 `attrs` 进行比较计算，确定是否存在差异，然后应用这些差异。
`vdom`	此模式与前一次的 `VNODE` 做比较，这实际上是 Dojo 默认的 VDOM 差异对比策略。在变更检测和更新渲染时会忽略直接对包装的节点所做的任何修改。

通过属性配置部件

传递给 VDOM 中节点的属性(properties)概念是 Dojo 的核心支柱。节点属性充当在应用程序中传播状态的主要管道，可将其从父部件传给子部件，也可以通过事件处理器逐层回传。它们也可以作为使用者与部件交互的重要 API，为父部件传入属性来配置其 DOM 结构（返回 VNode），也可以传给其管理的子部件（返回 WNode）。

VNode 接收 VNodeProperties 类型的属性，WNode 最低接收 WidgetProperties。部件的作者通常会定义自己的属性接口，然后需要调用者传入该接口。

VDOM 节点的 `key`

Widgetproperties 非常简单，只包含一个可选属性 key，该属性也存在于 VNodeProperties 中。

当部件开始输出的多个元素，处在 VDOM 的同一个层级，并且类型相同，就必须指定 key。例如，一个列表部件管理了多个列表项，就需要为列表中的每一项指定一个 key。

当重新渲染 VDOM 中受影响部分时，Dojo 使用虚拟节点的 key 来唯一标识特定实例。如果没有使用 key 在 VDOM 中区分开同一层级中的相同类型的多个节点，则 Dojo 就无法准确地确定哪些子节点受到了失效更改(invalidating change)的影响。

注意： 虚拟节点的 key 应在多次渲染函数的调用中保持一致。在每一次的渲染调用中，为相同的输出节点生成不同的 key，在 Dojo 应用程序开发中被认为是反模式的，应当避免。

配置 `VNode`

VNodeProperties 包含很多字段，是与 DOM 中的元素交互的重要 API。其中很多属性镜像了 HTMLElement 中的可用属性，包括指定各种 oneventname 的事件处理器。

应用程序的这些属性是单向的，因为 Dojo 将给定的属性集应用到具体的 DOM 元素上，但不会将相应的 DOM 属性后续的任何更改同步到 VNodeProperties。任何此类更改都应该通过事件处理器回传给 Dojo 应用程序。当调用事件处理程序时，应用程序可以处理事件所需的任何状态更改，在输出 VDOM 结构进行渲染时，更新对应的 VNodeProperties 视图，然后 Dojo 的 Renderer 会同步所有相关的 DOM 更新。

修改属性和差异检测

Dojo 使用虚拟节点的属性来确定给定节点是否已更新，从而是否需要重新渲染。具体来说，它使用差异检测策略来比较前一次和当前渲染帧的属性集。如果在节点接收的最新属性集中检测到差异，则该节点将失效，并在下一个绘制周期中重新渲染。

注意： 属性更改检测是由框架内部管理的，依赖于在部件的渲染函数中声明的 VDOM 输出结构。试图保留属性的引用，并在正常的部件渲染周期之外对其进行修改，在 Dojo 应用程序开发中被视为反模式的，应当避免。

支持交互

事件监听器

在实例化节点时，为虚拟节点指定事件监听器的方法与指定任何其他属性的方法相同。当输出 VNode 时，VNodeProperties 上事件监听器的名字会镜像到 HTMLElement 的等价事件上。虽然自定义部件的作者可以根据自己的选择命名事件，但通常也遵循类似的 onEventName 的命名约定。

函数属性（如事件处理程序）会自动绑定到实例化此虚拟节点的部件的 this 上下文。但是，如果将已绑定的函数传给属性值，将不会重复绑定给 this。

处理 focus

输出 VNode 时，部件可以使用 VNodeProperties 的 focus 属性来控制生成的 DOM 元素在渲染时是否获取焦点。这是一个特殊属性，它可接收一个 boolean 类型的对象或者是返回一个 boolean 类型的函数。

当直接传入 true 时，只有上一次的值不是 true 时，元素才会获取焦点（类似于常规属性变更检测）。而传入函数时，只要函数返回 true，元素就会获取焦点，而不管上一次返回值。

例如：

根据元素的顺序，下面的 “firstFocus” 输入框只会在初始化渲染时获取焦点，而 “subsequentFocus” 输入框在每次渲染时都会获取焦点，因为 focus 属性的值是函数。

src/widgets/FocusExample.tsx

基于函数的部件：

import { create, tsx, invalidator } from '@dojo/framework/core/vdom';

const factory = create({ invalidator });

export default factory(function FocusExample({ middleware: { invalidator } }) {
    return (
        
             true} />
            
            
        
    );
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';

export default class FocusExample extends WidgetBase {
    protected render() {
        return (
            
                 true} />
                
                
            
        );
    }
}

委托 focus

基于函数的部件可使用 focus 中间件为其子部件设置焦点，或者接受来自父部件的焦点。基于类的部件可使用 FocusMixin(来自 @dojo/framework/core/mixins/Focus)以相同的方式委托 focus。

FocusMixin 会给部件的类中添加一个 this.shouldFocus() 方法，而基于函数的部件使用 focus.shouldFocus() 中间件方法实现相同的目的。此方法会检查部件是否处于执行了获取焦点的状态（译注：即调用了 this.focus()），并且仅对单个调用返回 true，直到再次调用部件的 this.focus() 方法（基于函数的部件使用等价的 focus.focus()）。

FocusMixin 或者 focus 中间件也会为部件的 API 添加一个 focus 函数属性。框架使用此属性的布尔结果来确定渲染时，部件（或其一个子部件）是否应获得焦点。通常，部件通过其 focus 属性将 shouldFocus 方法传递给特定的子部件或输出的节点上，从而允许父部件将焦点委托给其子部件。

基于函数的部件的示例，请参阅 Dojo 中间件参考指南中的 focus 中间件委派示例

下面基于类的部件示例，显示了在部件层次结构内和输出的 VNode 之间委托和控制焦点：

src/widgets/FocusableWidget.tsx

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';
import Focus from '@dojo/framework/core/mixins/Focus';

interface FocusInputChildProperties {
    onFocus: () => void;
}

class FocusInputChild extends Focus(WidgetBase) {
    protected render() {
        /*
            The child widget's `this.shouldFocus()` method is assigned directly to the
            input node's `focus` property, allowing focus to be delegated from a higher
            level containing parent widget.

            The input's `onfocus()` event handler is also assigned to a method passed
            in from a parent widget, allowing user-driven focus changes to propagate back
            into the application.
        */
        return ;
    }
}

export default class FocusableWidget extends Focus(WidgetBase) {
    private currentlyFocusedKey = 0;
    private childCount = 5;

    private onFocus(key: number) {
        this.currentlyFocusedKey = key;
        this.invalidate();
    }

    /*
        Calling `this.focus()` resets the widget so that `this.shouldFocus()` will return true when it is next invoked.
    */
    private focusPreviousChild() {
        --this.currentlyFocusedKey;
        if (this.currentlyFocusedKey < 0) {
            this.currentlyFocusedKey = this.childCount - 1;
        }
        this.focus();
    }

    private focusNextChild() {
        ++this.currentlyFocusedKey;
        if (this.currentlyFocusedKey === this.childCount) {
            this.currentlyFocusedKey = 0;
        }
        this.focus();
    }

    protected render() {
        /*
            The parent widget's `this.shouldFocus()` method is passed to the relevant child element
            that requires focus, based on the simple previous/next widget selection logic.

            This allows focus to be delegated to a specific child node based on higher-level logic in
            a container/parent widget.
        */
        return (
            
                
                
                 this.onFocus(0)}
                />
                 this.onFocus(1)}
                />
                 this.onFocus(2)}
                />
                 this.onFocus(3)}
                />
                 this.onFocus(4)}
                />
            
        );
    }
}

状态管理

在数据不需要在多个组件之间流动的简单应用程序中，状态管理是非常简单的。可将部件需要的数据封装在部件内，这是 Dojo 应用程序中状态管理的最基本形式。

随着应用程序变得越来越复杂，并且开始要求在多个部件之间共享和传输数据，就需要一种更健壮的状态管理形式。在这里，Dojo 开始展现出其响应式框架的价值，允许应用程序定义数据如何在组件之间流动，然后由框架管理变更检测和重新渲染。这是通过在部件的渲染函数中声明 VDOM 输出时将部件和属性连接在一起而做到的。

对于大型应用程序，状态管理可能是最具挑战性的工作之一，需要开发人员在数据一致性、可用性和容错性之间进行平衡。虽然这种复杂性大多超出了 web 应用程序层的范围，但 Dojo 提供了更进一步的解决方案，以确保数据的一致性。Dojo Store 组件提供了一个集中式的状态存储，它提供一致的 API，用于访问和管理应用程序中多个位置的数据。

基础：自封装的部件状态

部件可以通过多种方式维护其内部状态。基于函数的部件可以使用 cache 或 icache 中间件来存储部件的本地状态，而基于类的部件可以使用内部的类字段。

内部状态数据可能直接影响部件的渲染输出，也可能作为属性传递给子部件，而它们继而又直接影响了子部件的渲染输出。部件还可能允许更改其内部状态，例如响应用户交互事件。

以下示例解释了这些模式：

src/widgets/MyEncapsulatedStateWidget.tsx

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';
import cache from '@dojo/framework/core/middleware/cache';

const factory = create({ cache });

export default factory(function MyEncapsulatedStateWidget({ middleware: { cache } }) {
    return (
        
            Current widget state: {cache.get('myState') || 'Hello from a stateful widget!'}
            

            
        
    );
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';

export default class MyEncapsulatedStateWidget extends WidgetBase {
    private myState = 'Hello from a stateful widget!';
    private counter = 0;

    protected render() {
        return (
            
                Current widget state: {this.myState}
                

                
            
        );
    }
}

注意，这个示例是不完整的，在正在运行的应用程序中，单击“Change State”按钮不会对部件的渲染输出产生任何影响。这是因为状态完全封装在 MyEncapsulatedStateWidget 部件中，而 Dojo 无从得知对部件的任何更改。框架只处理了部件的初始渲染。

要通知 Dojo 重新渲染，则需要封装渲染状态的部件自行失效。

让部件失效

基于函数的部件可以使用 icache 中间件处理本地的状态管理，当状态更新时会自动失效部件。icache 组合了 cache 和 invalidator 中间件，拥有 cache 的处理部件状态管理的功能，和 invalidator 的当状态变化时让部件失效的功能。如果需要，基于函数的部件也可以直接使用 invalidator。

基于类的部件，则有两种失效的方法：

在状态被更改后的适当位置显式调用 this.invalidate()
- 在 MyEncapsulatedStateWidget 示例中，可在“Change State”按钮的 onclick 处理函数中完成。
使用 @watch() 装饰器（来自 @dojo/framework/core/vdomercorators/watch 模块）注释任何相关字段。当修改了 @watch 注释的字段后，将隐式调用 this.invalidate()，这对于状态字段很有用，这些字段在更新时总是需要重新渲染。

注意： 将一个部件标记为无效，并不会立刻重新渲染该部件，而是通知 Dojo，部件已处于 dirty 状态，应在下一个渲染周期中进行更新和重新渲染。这意味着在同一个渲染帧内多次失效同一个部件并不会对应用程序的性能产生负面影响，但应避免过多重复的失效以确保最佳性能。

以下是修改过的 MyEncapsulatedStateWidget 示例，当状态变化时会正确地更新输出。

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';

const factory = create({ icache });

export default factory(function MyEncapsulatedStateWidget({ middleware: { icache } }) {
    return (
        
            Current widget state: {icache.getOrSet('myState', 'Hello from a stateful widget!')}
            

            
        
    );
});

基于类的部件：

此处，myState 和 counter 都在应用程序逻辑操作的同一个地方进行了更新，因此可将 @watch() 添加到任一字段上或者同时添加到两个字段上，这些配置的实际结果和性能状况完全相同：

src/widgets/MyEncapsulatedStateWidget.tsx

import WidgetBase from '@dojo/framework/core/WidgetBase';
import watch from '@dojo/framework/core/decorators/watch';
import { tsx } from '@dojo/framework/core/vdom';

export default class MyEncapsulatedStateWidget extends WidgetBase {
    private myState: string = 'Hello from a stateful widget!';

    @watch() private counter: number = 0;

    protected render() {
        return (
            
                Current widget state: {this.myState}
                

                
            
        );
    }
}

中级：传入部件属性

通过虚拟节点的 properties 将状态传入部件是 Dojo 应用程序中连接响应式数据流最有效的方法。

部件指定自己的属性接口，该接口包含部件希望向使用者公开的任何字段，包括配置选项、表示注入状态的字段以及任何事件处理函数。

基于函数的部件是将其属性接口以泛型参数的形式传给 create().properties<MyPropertiesInterface>() 的。然后，本调用链返回的工厂函数通过渲染函数定义中的 properties 函数参数，让属性值可用。

基于类的部件可将其属性接口定义为类定义中 WidgetBase 的泛型参数，然后通过 this.properties 对象访问其属性。

例如，一个支持状态和事件处理器属性的部件：

src/widgets/MyWidget.tsx

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';

const factory = create().properties<{
    name: string;
    onNameChange?(newName: string): void;
}>();

export default factory(function MyWidget({ middleware: { icache }, properties }) {
    const { name, onNameChange } = properties();
    let newName = icache.get('new-name') || '';
    return (
        
            Hello, {name}! Not you? Set your name:
             {
                    icache.set('new-name', (e.target as HTMLInputElement).value);
                }}
            />
            
        
    );
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';

export interface MyWidgetProperties {
    name: string;
    onNameChange?(newName: string): void;
}

export default class MyWidget extends WidgetBase {
    private newName = '';
    protected render() {
        const { name, onNameChange } = this.properties;
        return (
            
                Hello, {name}! Not you? Set your name:
                 {
                        this.newName = (e.target as HTMLInputElement).value;
                        this.invalidate();
                    }}
                />
                
            
        );
    }
}

此示例部件的使用者可以通过传入适当的属性与之交互：

src/widgets/NameHandler.tsx

基于函数的部件：

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';

import MyWidget from './MyWidget';

const factory = create({ icache });

export default factory(function NameHandler({ middleware: { icache } }) {
    let currentName = icache.get('current-name') || 'Alice';
    return (
         {
                icache.set('current-name', newName);
            }}
        />
    );
});

基于类的部件：

import WidgetBase from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';
import watch from '@dojo/framework/core/decorators/watch';
import MyWidget from './MyWidget';

export default class NameHandler extends WidgetBase {
    @watch() private currentName: string = 'Alice';

    protected render() {
        return (
             {
                    this.currentName = newName;
                }}
            />
        );
    }
}

高级：提取和注入状态

实现复杂功能时，在部件内遵循状态封装模式可能会导致组件膨胀、难以管理。在大型应用程序中也可能出现另一个问题，数百个部件跨数十个层级组合在一起。通常是叶部件使用状态数据，并不是 VDOM 层次结构中的中间容器。让数据状态穿透这样一个层次结构复杂的部件需要增加脆弱、不必要的代码。

Dojo 提供的 Store 组件解决了这些问题，它将状态管理提取到专用上下文中，然后将应用程序中的相关状态注入到特定的部件中。

最佳开发实践

使用 Dojo 部件时，应谨记一些重要原则，以避免在应用程序代码中引入反模式。试图以不受支持的方式使用框架可能会导致意外的行为，并在应用程序中引入难以发现的错误。

部件属性

部件应只能读取传入其中的属性(properties)。
- 如果修改了传入部件中的属性值，则不能回传给框架，以避免导致部件和框架之间出现差异。
Widgets should avoid deriving further render state from their properties, and instead rely on their complete render state being provided to them.
- Deriving render state can cause similar divergences between the widget and the framework as modifying received properties; the framework is not aware of the derived state, so cannot properly determine when a widget has been updated and requires invalidation and re-rendering.
如果需要，内部或私有状态可以完全封装在部件内。
- 实现“纯”部件是一个有效且通常是可取的模式，它不会产生副作用，并用属性接收它们的所有状态，但这不是开发 Dojo 部件的唯一模式。

使用基于类的部件

__render__, __setProperties__, and __setChildren__ 函数属于框架内部实现细节，绝不允许在应用程序中调用或覆写。
应用程序不应直接实例化部件——Dojo 完全接管部件实例的生命周期，包括实例化、缓存和销毁。

虚拟 DOM

虚拟节点的 key 应在多次渲染调用中保持一致。
- 如果在每次渲染调用中都指定一个不同的 key，则 Dojo 无法有效地将前一次渲染和本次渲染中的相同节点关联上。Dojo 会将上一次渲染中没有看到的新 key 当作新元素，这会导致从 DOM 中删除之前的节点并重新添加一套，即使属性没有发生变化，不需要重新更新 DOM。
- 一个常见的反模式是在部件的渲染函数中为节点的 key 分配一个随机生成的 ID（如 GUID 或 UUID）。除非生成策略是等幂的，否则不应在渲染函数中生成节点的 key 值。
应用程序不应存储虚拟节点的引用，以便从部件的渲染函数返回它们后，进行后续操作；也不应尝试通过使用单个实例跨多个渲染调用来优化内存分配。
- 虚拟节点被设计成轻量级的，并且在每次部件渲染周期内实例化新版本的开销非常低。
- 框架依赖于在两次部件渲染函数调用中有两个单独的虚拟节点实例来执行准确的更改检测。如果未检测到任何变化，则不会产生进一步的开销、渲染等。

渲染到 DOM 中

应用程序不应使用命令式的 DOM 操作调用。
- 框架负责处理所有具体的渲染职责，并且为部件作者提供了替代机制，以更简单、类型安全和响应式的方式使用各种 DOM 功能。

你可能感兴趣的:(Dojo,UI,Widget)

OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
你可能遗漏的一些C#/.NET/.NET Core知识点追逐时光者 C#.NET DotNetGuide编程指南 c#.net .netcore microsoft
前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
linux 发展史种树的猴子内核 java 操作系统 linux 大数据
linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android 更改窗口的层次
最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlab mle 优化
摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan
TextFiled 中输入金额宁梓茞
要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
GenVisR 基因组数据可视化实战(三) 11的雾
3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui 自动化测试工具自动化测试 appium
引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估
Python3.7出现“ModuleNotFoundError: No module named ‘Tkinter‘”错误的解决方法可爱的小红猪 python
Python3.7出现“ModuleNotFoundError:Nomodulenamed‘Tkinter’”错误的解决方法在网上看到很多针对这个问题的解决方法都是重新安装或配置Tkinter库，但Tkinter是python内置的标准GUI库，安装Python时就已经内置在了库中，不需要另外下载。针对于Tkinter，你的代码很可能是这样的：importTkinter或者是这样fromTkint
设计模式之建造者模式(通俗易懂--代码辅助理解【Java版】） ok!ko 设计模式设计模式建造者模式 java
文章目录设计模式概述1、建造者模式2、建造者模式使用场景3、优点4、缺点5、主要角色6、代码示例：1）实现要求2）UML图3)实现步骤：1）创建一个表示食物条目和食物包装的接口2）创建实现Packing接口的实体类3）创建实现Item接口的抽象类，该类提供了默认的功能4）创建扩展了Burger和ColdDrink的实体类5）创建一个Meal类，带有上面定义的Item对象6）创建一个MealBuil
高级UI<第二十四篇>：Android中用到的矩阵常识 NoBugException
（1）定义在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。由m×n个数aij排成的m行n列的数表称为m行n列的矩阵，简称m×n矩阵。记作：图片.png这m×n个数称为矩阵A的元素，简称为元，数aij位于矩阵A的第i行第j列，称为矩阵A的(i,j)元，以数aij为(i,j)元的矩阵可记为(aij)或(aij)m×n，m×n矩阵A也记作Amn。元素是实数的矩阵称为实矩阵，元素是复
linux 安装Sublime Text 3 hhyiyuanyu Python学习 linux sublime text
方法/步骤打开官网http://www.sublimetext.com/3，选择64位进行下载执行命令wgethttps://download.sublimetext.com/sublime_text_3_build_3126_x64.tar.bz2进行下载3、下载完成进行解压,执行tar-xvvfsublime_text_3_build_3126_x64.tar.bz解压4、解压完成以后，移动到
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
shell脚本中sed命令如何使用变量歪歪的酒壶 linux
在shell脚本中我们常常需要使用sed命令进行配置文件的更新，但是更新的内容又往往根据环境相关。值并不是固定的。这里我们介绍一种在sed命令中使用变量的方法。比如，在nginx的配置中，我们需要根据环境来更新/etc/nginx/sites-available/default中的目录配置。通常我们采用一个变量，来记录当前环境需要配置的目录比如：dist_dir=/home/dev/code/ui
swing窗体打jar包后找不到图片的问题 zoyation java jar swing classloader image eclipse java
今天打jar包遇到一个怪问题:打成jar包后双击运行没反应cmd运行有反应但出现下列问题Causedby:java.lang.ExceptionInInitializerErroratcom.zou.ui.MyDialog.init(MyDialog.java:92)atcom.zou.ui.MyDialog.(MyDialog.java:45)atcom.zou.ui.LoginDialog.(
Android shell 常用 debug 命令晨春计 Audio debug android linux
目录1、查看版本2、am命令3、pm命令4、dumpsys命令5、sed命令6、log定位查看APK进程号7、log定位使用场景1、查看版本1.1、Android串口终端执行getpropro.build.version.release#获取Android版本uname-a#查看linux内核版本信息uname-r#单独查看内核版本1.2、linux服务器执行lsb_release-a#查看Lin
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Vue3 vant组件库自动导入不叫虎子 Vue vue.js 前端 javascript 前端框架 typescript
实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
编译Windows平台的Nginx+ngx_http_proxy_connect_module Grovvy_Deng windows nginx http
编译Windows平台的Nginx+ngx_http_proxy_connect_module背景：由于公司的正向出局代理是windows机器。机器上的Squid不稳定，打算替换成nginx+ngx_http_proxy_connect_module实现。通过几天痛苦的尝试，最后参考了github大神项目通过在线CICD工具编译window平台可用的ng。步骤：获取git可识别的patch由于CI
vant-element-ts一起使用存在的问题 flynn_ 问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
多线程编程之理财周凡杨 java 多线程生产者消费者理财
现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元（暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
[Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
SecureCRT快捷键 daizj secureCRT 快捷键
ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w: 删除光标至行首
Java 子类与父类这间的转换周凡杨 java 父类与子类的转换
最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。代码：
可视化swing界面编辑朱辉辉33 eclipse swing
今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
web报表工具FineReport常用函数的用法总结（文本函数）老A不折腾 finereport web报表工具报表软件 java报表
文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。 CODE CODE(text):计算文本串中第一个字
mysql安装出错林鹤霄 mysql安装
[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing... #####################
linux下编译libuv aigo libuv
下载最新版本的libuv源码，解压后执行： ./autogen.sh 这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool 如果提示错误：make: *** No targe
中国行政区数据及三级联动菜单 alxw4616
近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局发布时间：2014-01-17 15:0
哈夫曼加密文件百合不是茶哈夫曼压缩哈夫曼加密二叉树
在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 加密步骤: 1,统计文件中字节出现的次数,作为权值 2,创建节点和哈夫曼树 3,得到每个子节点01串 4,使用哈夫曼编码表示每个字节
JDK1.5 Cyclicbarrier实例 bijian1013 java thread java多线程 Cyclicbarrier
CyclicBarrier类一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
九项重要的职业规划 bijian1013 工作学习
一. 学习的步伐不停止古人说，活到老，学到老。终身学习应该是您的座右铭。世界在不断变化，每个人都在寻找各自的事业途径。您只有保证了足够的技能储
【Java范型四】范型方法 bit1129 java
范型参数不仅仅可以用于类型的声明上，例如 package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
ua实现split字符串分隔 ronin47 lua split
LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
java-从先序遍历和中序遍历重建二叉树 bylijinnan java
public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
openfire开发指南《连接和登陆》开窍的石头 openfire 开发指南 smack
第一步官网下载smack.jar包下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步把smack里边的jar导入你新建的java项目中开始编写smack连接openfire代码 p
[移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎但是，对于手机的新设计，有几点我们也要注意第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
20款国外知名的php开源cms系统 cuiyadll cms
内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
Java生成全局唯一标识符 darrenzhu java uuid unique identifier id
How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
5天学会一种 web 开发框架 dcj3sjt126com Web 框架 framework
web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路建议把本文
Gson使用三(Map集合的处理,一对多处理) eksliang json gson Gson map Gson 集合处理
转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述 Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。二、Map参考实例 package com.ickes.json; import java.lang.refl
cordova实现“再点击一次退出”效果 gundumw100 android
基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
openldap configuration leaning note iwindyforest configuration
hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
Nullability and Objective-C 啸笑天 Objective-C
https://developer.apple.com/swift/blog/?id=25 http://www.cocoachina.com/ios/20150601/11989.html http://blog.csdn.net/zhangao0086/article/details/44409913 http://blog.sunnyxx
jsp中实现参数隐藏的两种方法 macroli JavaScript jsp
在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境 bootstrap 纵观千象
Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。 <a href="#/group-buy" class="btn bt
二维数组在Java和C中的区别流淚的芥末 java c 二维数组数组
Java代码： public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } } 运行结果： Exception in thread "mai
systemctl命令用法 wmlJava linux systemctl
对比表，以 apache / httpd 为例任务旧指令新指令使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h

Dojo 部件进阶

部件的基本原理

前言： 降低复杂度

简单的好处

基本的部件结构

部件样式

渲染部件

支持 TSX

允许使用 TSX 的应用程序

TSX 部件示例

使用 VDOM

VDOM 节点类型

实例化 VDOM 节点

虚拟节点示例

组合部件的示例

渲染到 DOM 中

MountOptions 属性

向 VDOM 中加入外部的 DOM 节点

dom() API

检测外部 DOM 节点的变化

通过属性配置部件

VDOM 节点的 key

配置 VNode

修改属性和差异检测

支持交互

事件监听器

处理 focus

委托 focus

状态管理

基础：自封装的部件状态

让部件失效

中级：传入部件属性

高级：提取和注入状态

最佳开发实践

部件属性

使用基于类的部件

虚拟 DOM

渲染到 DOM 中

你可能感兴趣的:(Dojo,UI,Widget)

前言：降低复杂度

`MountOptions` 属性

`dom()` API

VDOM 节点的 `key`

配置 `VNode`