[go: up one dir, main page]

Skip to content
This repository has been archived by the owner on Sep 26, 2023. It is now read-only.

Latest commit

 

History

History
114 lines (67 loc) · 4.15 KB

README_zh.md

File metadata and controls

114 lines (67 loc) · 4.15 KB

UCON framework

GitHub Workflow Status GitHub last commit GitHub Translated CodeFactor Join the chat at https://gitter.im/ucon-project/community

简介

Response a request

UCON 是一个Node.js平台下功能强大的终端 I/O 框架

UCON 的设计目标是使得终端 I/O 可视化组件化规范化

作为一个框架的同时,UCON 也自带一套齐全的标准组件,比如进度条、表格等等。它们都高度可定制。

开发组件也十分方便,由于合理的框架设计于文本终端的特性,一个组件的实现一般无需超过 50 行。

本项目由 UniCoder 团队开发。DESIGNED IN CHINA

可视化

将纯文本的输出转变为字符组成的图形。

组件化

每一个输出都可以是组件构成的。

这一点借鉴了前端框架的设计思想。

关于组件的介绍

规范化

所有组件的调用都遵循 UCON 的约定,可以很容易地实现社区中的共用

组件

组件(Component)允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。1

组件种类

UCON 中,组件分为三大类:块组件行内组件容器组件

块组件

块组件(BlockComponent)占用一行或多行,不监听输入。

使用方式
  1. new创建一个新的实例
  2. 调用mount方法挂载组件到当前最新行
  3. 可以使用其他成员函数实现后续对内容的变更
示例代码
let pb = new ucon.ProgressBar({
    name: "test"
})......
注意事项
  • 重复调用mount方法会导致未定义行为

行内组件

行内组件(InlineComponent)由所给参数生成一行中的部分字符串。

使用方式

调用组件名([参数][...内容)返回一个实例

示例代码
ucon.ucon.log("This book is ", ucon.Italitic("Harry Potter"), ".");
注意事项
  • 调用返回的的实例是InlineComponent的派生类型的,不可以直接与字符串相加或传入标准的console的方法,请调用其render方法获取渲染后的纯字符串
  • 被调用的以组件名称命名的函数,实为一种语法糖。这些函数处理参数,然后用new构造并返回了组件实例
  • 这类组件可以没有内容参数,比如图标组件
  • 内容参数由“,”隔开,但不在参数之间加入空格,原因与ucon.log方法相同,是为了允许另一个行内组件成为内容的一部分

容器组件

容器组件(ContainerComponent)处理它们在被注册时的所有输出。

使用方式
  1. new创建一个新的实例
  2. 调用begin方法输出头部并注册组件
  3. 进行须被其处理的输出(通过ucon.log方法)
  4. 调用end方法取消注册组件并输出末尾几行
示例代码
let group = new ucon.Group();
......
注意事项
  • 仅通过ucon.log方法进行的输出会被处理
  • 中途可以调用register/unregister方法进行对处理的开启/关闭
  • 若由于异常等造成的程序逻辑跳跃,会导致组件栈的不平衡,这时,输出会混乱,所以务必清空/修复组件栈

组件开发

[TODO]

Footnotes

  1. https://reactjs.org/docs/components-and-props.html,引言