Dojo 中间件简介

warmcheng 发布于2019-08-26 10:58 / 908人阅读

摘要：的中间件系统能以响应式的方式管理异步或命令式，以及影响基于函数的组合部件或其他中间件的行为与属性。控制部件渲染的生命周期对任何组合部件，中间件可以控制渲染管道的各个部分，如当需要更新渲染时让部件失效。

Dojo 的中间件系统能以响应式的方式管理异步或命令式 API，以及影响基于函数的组合部件或其他中间件的行为与属性 API。

框架已提供了几个核心中间件和可选中间件，应用程序开发人员也可以轻松编写自己的中间件。

功能	描述
响应式 DOM 访问	借助中间件，基于函数的部件可以处理和使用输出节点对应的 DOM 部分的具体信息和 API。
控制部件渲染的生命周期	对任何组合部件，中间件可以控制 Dojo 渲染管道的各个部分，如当需要更新渲染时让部件失效。也可以暂停和继续部件的渲染，在等待关键信息可以使用时，短路渲染结果。
框架提供了一些中间件	Dojo 提供了一些中间件，能让部件实现很多功能，如响应和控制焦点、简单的缓存值、响应元素的交叉事件和大小变化事件、CSS 主题、国际化和构建时渲染等。
易于组合和复用	中间件的设计是与基于函数的部件紧密结合的，中间件能组合到部件的层次结构中，并且在开发自定义中间件时也可复用中间件

基本用法 创建中间件

定义基于函数部件的 create() 也可以用于定义中间件

定义一个属性接口（可选），以扩充使用了此中间件的部件的属性接口。当创建组合部件实例时传入这些属性值

返回一个简单的函数引用，该函数定义了中间件的 API，供其他组合部件或中间件使用

src/middleware/myMiddleware.ts

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

const factory = create().properties<{ middlewareProp?: boolean }>();

export const myMiddleware = factory(({ properties }) => {
    return () => {
        return properties().middlewareProp ? "Conditional is true" : "Conditional is false";
    };
});

export default myMiddleware;

组合中间件

组合中间件并返回一个对象以公开更复杂的 API

使用核心的 invalidator 中间件将组合部件标记为需要重新渲染

src/middleware/myComposingMiddleware.ts

import { create, invalidator } from "@dojo/framework/core/vdom";
import myMiddleware from "./myMiddleware";

const factory = create({ myMiddleware, invalidator });

export const myComposingMiddleware = factory(({ middleware: { myMiddleware, invalidator } }) => {
    return {
        get() {
            return myMiddleware();
        },
        set() {
            invalidator();
        }
    };
});

export default myComposingMiddleware;

部件内使用中间件

用中间件使用的附加属性来扩充部件的属性接口

使用中间件组合成的部件时，传入中间件的属性

src/widgets/MyWidget.tsx

import { create, tsx } from "@dojo/framework/core/vdom";
import myComposingMiddleware from "../middleware/myComposingMiddleware";

const factory = create({ myComposingMiddleware });

export default factory(function MyWidget({ properties, middleware: { myComposingMiddleware } }) {
    return (
        
            {`Middleware property value: ${properties.middlewareProp}`}
            {`Middleware usage: ${myComposingMiddleware.get()}`}
        
    );
});

src/main.tsx

import renderer, { tsx } from "@dojo/framework/core/vdom";
import MyWidget from "./widgets/MyWidget";

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

GPU云服务器云服务器 Dojo dojo cdn php+dojo 推荐dojo学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106913.html

Dojo 部件进阶

摘要：如果为，则渲染生命周期中相关的回调特别是和渲染回调函数是同步运行的。如果为，则在下一次重绘之前，回调函数被安排为异步运行。更改检测策略，确定应用程序是否需要更新外部的节点是一个可选的回调函数，在节点追加到后执行检测外部节点的部件的基本原理部件是所有 Dojo 应用程序的基本构建要素。部件是主要的封装单元，它能表示从用户界面的单个元素，到更高级别的容器元素（如 Form 表单、段落、...

draveness 2019-08-26 10:55 评论0 收藏0
AMD规范(转)

摘要：可以看到，第三个参数是回调函数，可以直接使用依赖的模块，他们按依赖声明顺序作为参数提供给回调函数。结论规范是开发的一次重要尝试，它以简单而优雅的方式统一了的模块定义和加载机制，并迅速得到很多框架的认可和采纳。 1. AMD的由来　　前端技术虽然在不断发展之中，却一直没有质的飞跃。除了已有的各大著名框架，比如Dojo，jQuery，ExtJs等等，很多公司也都有着自己的前端开发框架。这些...

harriszh 2019-08-20 14:22 评论0 收藏0
使用 Selenium 抓取网页内容和模拟登入

摘要：传统的无法执行页面中的浏览器脚本，并且在抓取一些对爬虫有限制的网页时，往往要设定详细的来突破限制，编写起来较为复杂。直接使用浏览器运行，像真正的用户在操作。支持以下方式进行选择元素各种库对情况的检测方法传统的 cURL 无法执行页面中的浏览器脚本，并且在抓取一些对爬虫有限制的网页时，往往要设定详细的 http header 来突破限制，编写起来较为复杂。 Selenium简介： ...

mylxsw 2019-06-27 10:27 评论0 收藏0
使用 Selenium 进行模拟登入和页面内容的获取

摘要：传统的无法执行页面中的浏览器脚本，并且在抓取一些对爬虫有限制的网页时，往往要设定详细的来突破限制，编写起来较为复杂。直接使用浏览器运行，像真正的用户在操作。支持以下方式进行选择元素各种库对情况的检测方法传统的 cURL 无法执行页面中的浏览器脚本，并且在抓取一些对爬虫有限制的网页时，往往要设定详细的 http header 来突破限制，编写起来较为复杂。 Selenium简介： ...

thursday 2019-06-27 10:27 评论0 收藏0
Arcgis api for js 3.x 离线开发(1)

摘要：离线开发下载下载地址选择需要版本，因为版本和版本差别很大，所以这里主要是针对的开发配置文件配置文件找到下载的开发工具包中的文件文件路径是在文件中搜索，将其替换为配置文件找到下载的开发工具包中的文件文件路径是在文件中搜索，将其替换为部署到本地 Arcgis api for js 离线开发（1）下载Arcgis api for js 3.xArcgis api for js下载地址 s...

wushuiyong 2019-08-02 11:43 评论0 收藏0