创建Dojo部件简介-创新互联

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

成都做网站、网站建设的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给成都创新互联一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

Dojo 鼓励编写简单的、模块化组件，并称之为部件，它仅实现应用程序大量需求中的单一职责。部件被设计成可在各种场景中组合和复用，能以响应的方式连接在一起，以满足更复杂的 web 应用程序需求。

部件使用渲染函数返回的虚拟节点描述其预期的结构。然后，在应用程序运行时，Dojo 的渲染系统会持续地将部件每一层渲染的内容转换为对应的、高效的 DOM 更新。

基本用法

定义部件

• 使用 内置的 create() 将部件定义为一个渲染函数 factory
• 返回定义了部件结构的 虚拟 DOM 节点，这里使用 TSX 语法

src/widgets/MyWidget.tsx

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

const factory = create();

export default factory(function MyWidget() {
    return 
Hello from a Dojo widget!
;
});

设置部件属性

• 为了使部件能更好的复用，需要使用类型化的属性接口来抽象出 state, 配置和事件处理函数
• 使用 create 工厂为部件提供中间件
• 通过为节点指定 key 属性，来区分同一类型的兄弟元素，此示例中是两个 div 元素。这样当应用程序中的状态发生变化，需要更新 DOM 节点时，框架就可以高效、准确地定位到相关元素

src/widgets/Greeter.tsx

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

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

export default factory(function Greeter({ middleware: { icache }, properties }) {
    const { name, onNameChange } = properties();
    let newName = icache.get('new-name') || '';
    return (
        

            
Welcome to a Dojo application!
            {name && 
Hello, {name}!
}
            What's your name?
             {
                    icache.set('new-name', (e.target as HTMLInputElement).value);
                }}
            />
             {
                    icache.set('new-name', undefined);
                    onNameChange && onNameChange(newName);
                }}
            >
                Set my name
            
        
    );
});

组合部件

• 通过将部件组合在一起形成多层结构，以满足更复杂的应用程序需求
• 为子部件提供 state 和事件处理函数等属性(properties)
• 使用 icache 中间件管理 state，并当状态变更时，失效或重新渲染受影响的部件

src/widgets/NameHandler.tsx

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

import Greeter from './Greeter';

const factory = create({ icache });

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

渲染到 DOM 中

• 使用框架中的 renderer 函数将部件挂载到 DOM 中
• 也可以对 Dojo 应用程序在页面中呈现的位置做更多控制，以便稳步地采用较小的子组件，甚至支持一个页面中存在多个应用程序或框架

src/main.tsx

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

import NameHandler from './widgets/NameHandler';

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。