React 시각적 개발 도구 Shadow-Widget 소개

이 글에서는 일반적인 시나리오에서 최적의 개발 방법에만 초점을 맞춰 일반적인 GUI 개발에 적용되는 "React + Shadow Widget"의 모범 사례를 소개합니다. 두 번째 부분은 직교 프레임워크 분석 모드와 일반적인 디버깅 방법을 설명합니다.

이전 기사를 보려면 여기를 클릭하세요. Shadow Widget 오픈 소스 프로젝트는 여기에 있습니다.

1. Controller View 및 View

일반적인 Flux 프레임워크에서 Store와 View의 관계는 다음과 같습니다.

이 사진은 fluxxor.com에서 가져온 것입니다 "Flux란 무엇입니까?" 기사에서 Store의 데이터는 구성 요소로 전달되며, 이는 다시 props 속성을 통해 다중 계층 구성 요소 하위 노드를 구동하여 인터페이스를 표시합니다. 이 데이터 전송 관계에서 여러 구성 요소는 뷰이지만 Store에서 데이터를 가져오는 뷰는 특별하며 "컨트롤러 뷰"라고 합니다(위 그림 참조). Shadow Widget의 MVVM 프레임워크에 대응하는 Controller View와 View로, Controller View는 VM(ViewModel)이고, VM이 구동하는 자식 Component는 V(View)입니다. <code>fluxxor.com 的 “What is Flux?” 一文，Store 中的数据传递给一个 Component，这个 Component 又通过 props 属性驱动多层 Component 子节点来展示界面。在这种数据传递关系中，多个 Component 都是 View，但从 Store 获得数据的那个 View 比较特殊，称为 "Controller View"（见上图）。将 Controller View 与 View 对应到 Shadow Widget 的 MVVM 框架，Controller View 就是 VM（ViewModel），由 VM 驱动的子级 Component 就是 V (View)。

然而现实编程并非上图那么简单，Controller View 的子节点，也即 View 节点，有时很复杂，其外部若只依赖从上级 props 传递下来的数据来驱动渲染，会很别扭。开发者常不由自主的放弃 “纯净” 的编程模式，突破限制，让 View 也从全局变量读数据，即，变相的把部分数据从 Store 分离出去，改用全局变量表达，或者干脆让 View 也直接从 Store 读数据，而不是只用 Controller View 代传的数据。

Shadow Widget 将问题简化，既然 Store 主要用于存贮数据，那就还原它的数据特性，作为数据，在哪儿定义关系不大，直接拿 Component 的属性存贮数据就好，将 Store 并入 Component 没有不可逾越的障碍，当然，前提是我们已设计了 “双源属性” 与 “W 树” 机制。然后，Controller View 及其下级多个 View，合起来视作一个 FB（Functionarity Block），在同一 Functionarity Block Namespace 下用 javascript 定义各节点行为。把相关节点的投影定义写一起，很大程度消除了节点间隔阂，因为，你能随时可以定义一个变量用来传数据。

2. 正交框架分析模式

接本文上篇的例子，假定我们在原功能基础上，再增加 “全局配置” 的功能，提供 3 个可选项：“自动选 Celsius 还是 Fahrenheit 格式”、“固定用 Celsius”、“固定用 Fahrenheit”。其中，第一个选项 Auto（自动选格式）依据浏览器特性推断国别信息，然后智能选择 Celsius 或 Fahrenheit。

新增如下界面设计：

相应的，增加一个 Functionarity Block，JS 编码如下：

(function() { // functionarity block

var configComp = null;

idSetter['config'] = function(value,oldValue) {
  // ...
};
})();

该 FB 的入口节点是 configComp。再接着细化设计，我们该将 configComp 定义挪到全局变量定义区，因为该节点在两个 FB 功能块都用到。

为方便讲述起见，我们把这两个 FB 分别称为 config 与 calculator，以 FB 分布为横轴，以 W 树为纵轴，W 树中的节点是层层串联的，绘制这两个 FB 的分布如下图：

当我们整体设计 GUI 时，应以 MVVM 方式思考。结合本例，也就是规划 config 与 calculator 两个 “功能块”，确定各功能块的入口节点，以及它的上下层串接关系。而处理各个功能块之间联动关系时，应切换到 Flux 单向数据流思考方式。

总结一下，整个 HTML 页面是一颗 DOM 树，是纵向的，在这颗树划分若干功能块的过程，是基于 MVVM 为主的设计过程；而处理各功能块之间横向联系，则以 FRP 思路为主导。这一纵一横的思考方式，我们称为 “正交框架” 分析模式。

说明，Flux 是 FRP（Functional Reactiv Programming）开发思想的一种实现，对于 React 开发，上面所提 Flux 与 FRP 基本等效。

至于 FB 之间的功能如何交互，如果处理逻辑简单，不妨在相关 FB 代码块中直接写代码，如果逻辑复杂，不妨取相关 FB 的共有父节点作为入口节点，新设一个 FB 功能块。取共有父节点的主要作用是，该父节点从创建到 unmount

그러나 실제 프로그래밍은 위 그림처럼 간단하지 않습니다. Controller View의 하위 노드, 즉 View 노드는 외부 부분이 상위에서 전달된 데이터에만 의존하는 경우 매우 복잡합니다. 렌더링을 구동하는 소품은 매우 어색할 것입니다. 개발자는 종종 무의식적으로 "순수한" 프로그래밍 모델을 포기하고 한계를 뛰어넘어 View가 전역 변수에서 데이터를 읽도록 합니다. 즉, Store에서 일부 데이터를 위장하여 분리하고 전역 변수를 사용하여 이를 표현하거나 단순히 View가 데이터를 읽도록 합니다. Store에서 직접 데이터를 읽습니다. Store는 Controller View에서 전달된 데이터만 사용하는 대신 데이터를 읽습니다. 🎜🎜Shadow Widget은 주로 데이터를 저장하는 데 사용되므로 데이터 특성을 복원하는 데 사용되므로 데이터가 정의된 위치에 관계없이 데이터를 저장하고 Store에 병합하면 됩니다. 물론 "이중 소스 속성"과 "W 트리" 메커니즘을 설계했다면 Component에 극복할 수 없는 장애물은 없습니다. 그런 다음 Controller View와 이에 속한 여러 하위 View를 집합적으로 FB(Functionarity Block)로 간주하고 동일한 Functionality Block Namespace에서 각 노드의 동작을 정의하기 위해 javascript를 사용합니다. 관련 노드의 투영 정의를 함께 작성하면 언제든지 데이터를 전송할 변수를 정의할 수 있기 때문에 노드 간격이 크게 줄어듭니다. 🎜🎜2. 직교 프레임 분석 모드🎜🎜이전 기사의 예에 이어 원래 기능을 기반으로 "전역 구성" 기능을 추가하고 "섭씨 또는 화씨 형식 자동 선택", "고정"이라는 3가지 옵션을 제공한다고 가정합니다. 섭씨로 고정됨", "화씨로 고정됨". 그 중 첫 번째 옵션인 자동(자동 형식 선택)은 브라우저 특성을 기반으로 국가 정보를 추론한 다음 지능적으로 섭씨 또는 화씨를 선택합니다. 🎜🎜다음 인터페이스 디자인을 추가했습니다: 🎜🎜🎜🎜🎜🎜따라서 다음을 추가하세요. 기능 블록이며 JS 코드는 다음과 같습니다. 🎜

if (!window.W) { window.W = new Array(); W.$modules = [];}
W.$modules.push( function(require,module,exports) {

var W = require('shadow-widget');

var dataSrc = W.$dataSrc = {};
dataSrc['.body.calculator.field'] = { 'scale': 'f' };

});

🎜 이 FB의 항목 노드는 configComp입니다. 그런 다음 설계를 개선하려면 configComp 정의를 전역 변수 정의 영역으로 이동해야 합니다. 이 노드는 두 FB 기능 블록 모두에서 사용되기 때문입니다. 🎜🎜설명의 편의를 위해 이 두 개의 FB 구성과 계산기를 각각 FB 분포를 수직 축으로 사용합니다. W 트리의 노드는 레이어별로 직렬로 연결됩니다. 이 두 FB의 분포 GUI를 디자인할 때 MVVM 방식으로 생각하세요. 이 예와 결합하여 두 개의 "기능 블록" 구성 및 계산기를 계획하고 각 기능 블록의 입력 노드와 상위 및 하위 직렬 연결 관계를 결정합니다. 다양한 기능 블록 간의 연계 관계를 다룰 때는 Flux 단방향 데이터 흐름 사고 방식으로 전환해야 합니다. 🎜🎜전체 HTML 페이지는 수직적인 DOM 트리입니다. 이 트리에서 여러 기능 블록을 나누는 과정은 MVVM 기반 설계 프로세스와 각 기능 블록 간의 수평 처리를 기반으로 합니다. 접촉은 FRP 아이디어에 의해 지배됩니다. 이러한 수직적, 수평적 사고 방식을 '직교 프레임워크' 분석 모드라고 합니다. 🎜🎜Flux는 FRP(Functional Reactiv 프로그래밍) 개발 아이디어를 구현한 것이라고 설명하세요. React 개발에서 위에서 언급한 Flux는 기본적으로 FRP와 동일합니다. 🎜🎜FB 간의 기능이 상호 작용하는 방식에 관해서는 처리 로직이 간단한 경우 관련 FB 코드 블록에 직접 코드를 작성하는 것이 좋습니다. 로직이 복잡한 경우 해당 FB의 공유 상위 노드를 사용하는 것이 좋습니다. 해당 FB를 엔트리 노드로 설정하고 새로운 FB 기능 블록을 설정합니다. 공유 상위 노드를 사용하는 주요 기능은 상위 노드가 생성부터 마운트 해제까지 그 아래에 있는 모든 노드의 수명 주기를 포괄할 수 있다는 것입니다. idSetter 기능에서 프로그래밍하는 것이 더 편리합니다. 🎜

3. 挂载数据来驱动调测

在可视设计器中开发界面的过程，可能存在破坏式重构，比如你在某个 FB 的入口节点指定 data 属性值，然后它的子节点根据 data 取值自动生成子节点，如果你给定的 data 初始值格式不对，其下子节点会无法生成。所给初值不对可能因为设计变化了，你的 data 格式还没来得及调整。

为了最大幅度减少上述破坏式重构带来错误，在设计界面时，我们建议用作驱动源头的数据初值应取 “空” 值，比如赋给 null 或 [] 之类的值。

界面设计过程中，若想查看不同数据初值会驱动什么样的界面形态，不妨启用 W.$dataSrc 定义，比如前面例子界面缺省显示 Celsius 温度格式，因为 '.body.calculator.field' 节点的 scale 属性初值是 'c'，现在我们想检查 scale='f' 界面是否正确。按如下方式使用两行代码即可：

if (!window.W) { window.W = new Array(); W.$modules = [];}
W.$modules.push( function(require,module,exports) {

var W = require('shadow-widget');

var dataSrc = W.$dataSrc = {};
dataSrc['.body.calculator.field'] = { 'scale': 'f' };

});

其中，var dataSrc = W.$dataSrc = {} 表示启用 W.$dataSrc，缺省是不启用的。另一句 dataSrc['.body.calculator.field'] = { 'scale': 'f' }，用来预定义哪个节点要附加哪些属性的初值。

上面代码可以写入独立的 js 文件，多个此类 js 文件可构造不同的调测场景，然后用 <script> 标签按需把某一个 js 文件导入到被测页面。

4. 结合 shadow-bootstrap 的可视化设计

shadow-bootstrap 新近推出 v1.1 版本，Bootstrap 设计方式在 Shadow Widget 体系得到完整支持了。

Bootstrap 提供了优秀的前端控件库，在 shadow-widget 上用 bootstrap 堪称完美，毕竟上百个 class 类谁都记不住，大家做开发时，要不停的查手册。用 shadow-widget 的可视化设计器，只需从右侧样板页拖一个样板扔进来，就创建你想要的构件了，然后选择相应节点，把相关属性配置一下，你的界面很快就做好。

上图是其中一个样板页，该拖入哪个样板，看一眼就能区分，不再受那么多 class 类名困扰了。

5. 注意事项

刚开始使用 Shadow Widget 时，大家可能不适应它的可视化设计，容易忘掉几项设计约束，简单举几个例子：

1. 在根节点（即 ".body" 节点）下只能摆放面板与绝对定位的构件（如 ScenePage 等），即首层节点要么是 Panel 类构件，要么是指定 position='absolute' 的非行内构件。

2. 绝对定位的构件，应挂到根节点，不宜在其它地方出现。（注：此项为建议，不强制）

3. 面板之下不能直接放行内构件，要在面板下放置 P 类构件后，才能放 Span 类构件。

4. 一个构件要么启用 "html." 属性，要么使用它的若干子节点，两者只能二选一，若定义子节点了，以 "html." 表示文本将被忽略。

总之，与界面设计打交道，设计总是具体的，你要面对各类封装好的构件，不少构件有特殊要求，《Shadow Widget 用户手册》有全面介绍，有必要通读该手册。

6. 关于团队分工

Shadow Widget 最佳实践还建议团队成员要按技能分工，至少有两个工种，其一是能运用他人已封装好的 WTC 类或库化 UI，进行 GUI 开发；其二是为他人封装 WTC 类或库化 UI。前者对技能要求不高，后者则要求深入掌握 React 与 Shadow Widget 知识。

对于微型团队，也应按上述分工的思路规划您的产品开发，因为这两种分工的目标不同，前者着眼短期目标，尽快把产品做出来，把界面弄漂亮些，后者着眼中长期目标，用封装库提高开发复用率。即使是单人团队，同样需要分工，无非在时间上错开，一段时间承担一种角色，另一段时间换一个角色。

Shadow Widget 当前的 WTC 类与界面库还不够丰富，但它的架子已搭好，起点不低。它的定制扩展能力出色，已通过一些上规模代码的产品检验，如 shadow-bootstrap， pinp-blogs 等，具备一定成熟度。我们有理由相信，这个产品会随着扩展库逐渐增多，前景越来越光明。

위 내용은 React 시각적 개발 도구 Shadow-Widget 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!