在组件中思考

钥匙要点

• 界面开发的组件方法提供了比传统MVC和MVVM框架的好处，重点是交互的最小抽象部分，而不是建模业务领域。
>组件应设计用于重复使用，远离业务领域并适应不同上下文。可以在创建可以普遍使用的暗示性文本输入组件的创建中，而不是特定类型的帮助搜索组件。 将界面分解为可组合组件不仅简化了开发过程，而且还促进了孤立的测试。组件彼此独立，可以进行修改和添加而不会干扰整个系统。
> Web组件，反应，聚合物，飞行 - 全部用于构建接口组件。这是与大MVC和MVVM框架不同的工具集，在计划如何实现界面时需要不同的思维方式。虽然我仍然将MVC之类的模型用于服务器应用程序，但我是一个专门的转换，转换为接口开发的组件方法的好处。在本文中，我将概述组件中的思考与在MVC中思考并在现实世界中实现该方法的思考如何不同。
• 在我看来，MVC设计的顶空间是“我如何建模我的业务领域？如何建模与该域交互的过程？如何建模界面以促进这些过程？”。我认为，这个顶空不能促进良好的组件设计。实际上，当您打算将界面分解为可组合组件时，您应该如何思考。充其量您最终会获得微型应用程序。在最糟糕的情况下，您将建立上帝的组成部分。您要做的最后一件事是将业务领域作为组件建模。您应该以建模为目标是您可以描述的最小的互动段。
>

设计重复使用

而不是“我如何制作这个不可接受的警报面板？”，问自己：“如果我添加了新的HTML元素来促进这种互动，它们会是什么？”。我发现这导致了与业务领域安全距离的组成部分，并且本质上是在不同情况下最可重复使用的组件。

>

作为另一个例子，不要制作您要允许搜索帮助系统的任何地方使用类型的帮助搜索组件，制作一个暗示性的文本输入组件，以了解提供输入建议所涉及的交互。然后进行帮助搜索API数据组件，该组件知道如何接收数据请求，与帮助搜索API进行交互并进行广播结果。现在，您的建议性文本输入的测试不需要任何嘲笑API，当您被要求将建议添加到“标签”字段中时，您可以放入现有的建议性文本输入组件中，汇总一个简单的数据组件来交谈到标签API，然后完成！

>

实践 - “项目清单”

对于具体示例，让我们看一个简单的接口作为隔离组件。以下模型是从99Designs 1比1项目系统中提取的。虽然UI已大大简化，但我们将在撰写本网站上构建的JavaScript是生产代码。这是线框：

我们所拥有的是在三个项目列表之间进行导航 - 主动，草稿和存档。每个项目都有一个可以对其执行的操作 - 存档一个活跃的项目，删除草稿或重新激活存档项目。在应用设计思维中，我们将开始建模项目并提供诸如“存档”和“删除”之类的方法，以及“状态”属性以跟踪其所属的三个列表中的哪个。正是我们要避免的事情，因此我们只能关注互动以及促进它们所需的东西。

在其核心中，我们每行有一个动作。执行该操作时，我们想从列表中删除该行。我们已经提供了任何特定项目的领域知识！此外，我们有一个计数，每个列表中有多少个项目。为了限制本文的范围，我们假设每个页面都是生成服务器端的，而TAB导航会导致完整页面刷新。由于我们不需要强制依赖JavaScript，因此我们的操作按钮将是提交事件处理程序的表单元素，这些元素会异步执行表格的操作并在完成时广播事件。

>

以下是单个项目行的HTML：>

>我将使用飞行来构建我们的组件。目前，由于我以前的SitePoint JavaScript文章中概述的原因。

<span><span><span><li</span>></span>
</span>  <span><span><span><a</span> href<span>="/projects/99"</span> title<span>="View project"</span>></span>Need sticker designs for XYZ Co.<span><span></a</span>></span>
</span>  <span><span><span><div</span> class<span>="project__actions"</span>></span>
</span>    <span><span><span><a</span> href<span>="/projects/99"</span> class<span>="button"</span>></span>View<span><span></a</span>></span>
</span>    <span><span><span><form</span> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></span>
</span>        <span><span><span><button</span>></span>Archive<span><span></button</span>></span>
</span>    <span><span><span></form</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></li</span>></span></span>

>这是我们用于处理表单提交和广播事件的异步组件：

我们维护一个严格的政策，即从未使用JavaScript的类属性，因此我们将在我们的操作表格中添加一个data-assync-form属性，并将我们的组件附加到所有匹配的表单上，例如So：

>

<span><span><span><li</span>></span>
</span>  <span><span><span><a</span> href<span>="/projects/99"</span> title<span>="View project"</span>></span>Need sticker designs for XYZ Co.<span><span></a</span>></span>
</span>  <span><span><span><div</span> class<span>="project__actions"</span>></span>
</span>    <span><span><span><a</span> href<span>="/projects/99"</span> class<span>="button"</span>></span>View<span><span></a</span>></span>
</span>    <span><span><span><form</span> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></span>
</span>        <span><span><span><button</span>></span>Archive<span><span></button</span>></span>
</span>    <span><span><span></form</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></li</span>></span></span>

>现在，我们有能力执行动作，并广播将在成功中传播DOM树的事件。下一步是聆听该事件，并删除其起泡的行。为此，我们有可移动的：

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>AsyncForm</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>broadcastEvent: 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.node, 'submit', this.asyncSubmit.bind(this));
</span>    <span>});
</span>
    <span>this.asyncSubmit = function(event) {
</span>      event<span>.preventDefault();
</span>      $<span>.ajax({
</span>        <span>'url': this.$node.attr('action'),
</span>        <span>'dataType': 'json',
</span>        <span>'data': this.$node.serializeArray(),
</span>        <span>'type': this.$node.attr('method')
</span>      <span>}).done(function(response<span>, data</span>) {
</span>        <span>this.$node.trigger(this.attr.broadcastEvent, data);
</span>      <span>}.bind(this)).fail(function() {
</span>        <span>// error handling excluded for brevity
</span>      <span>});
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(AsyncForm);
</span><span>});</span>

>再次，我们在项目行中添加了一个可移动的属性，然后将组件附加到行元素：

>

<span>AsyncForm.attachTo('[data-async-form]');</span>

完成！每个事件都有两个小组，我们以优雅降级的方式处理了三种类型的动作。只剩下一件事，这就是我们在每个选项卡上的计数。应该很容易，我们需要的只是每次删除一行时将活动选项卡的计数减少一个。但是等等！当一个活动的项目被存档时，归档的计数需要增加，并且重新激活存档的项目时，激活的计数需要增加。首先，让我们制作一个可以接收指令更改其数字的计数组件：

>

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Removable</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'removeOn': 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.attr.removeOn, this.remove.bind(this));
</span>    <span>});
</span>
    <span>this.remove = function(event) {
</span>      <span>// Animate row removal, remove DOM node, teardown component
</span>      $<span>.when(this.$node
</span>        <span>.animate({'opacity': 0}, 'fast')
</span>        <span>.slideUp('fast')
</span>      <span>).done(function() {
</span>        <span>this.$node.remove();
</span>      <span>}.bind(this));
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(Removable);
</span><span>});</span>

我们的计数将在HTML中表示为 4 之类的东西。由于计数在文档级别上倾听事件，因此我们将其事件属性为空。这将迫使任何使用它来定义此实例应听取的事件，并防止意外地让多个计数实例收听同一事件的说明。

>

<span>Removable.attachTo('[data-removable]');</span>

>

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Count</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'event': null
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(document, this.attr.event, this.update.bind(this));
</span>    <span>});
</span>
    <span>this.update = function(event<span>, data</span>) {
</span>      <span>this.$node.text(
</span>        <span>parseInt(this.$node.text(), 10) + data.modifier
</span>      <span>);
</span>    <span>}
</span>  <span>}
</span>
  <span>return defineComponent(Count);
</span><span>});</span>

现在，计数和可移动之间的耦合发生在特定的页面脚本中，我们将组件连接到DOM：：

任务完成了。我们的柜台对我们的项目列表行不了解，这些行不了解其中的形式。而且，这些组件都没有以少数方式设计的，围绕着项目列表的概念。

<span>Count.attachTo(
</span>  <span>'[data-counter="active"]',
</span>  <span>{'event': 'uiActiveCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="draft"]',
</span>  <span>{'event': 'uiDraftCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="archived"]',
</span>  <span>{'event': 'uiArchivedCountChanged'}
</span><span>);</span>

最后一分钟添加

>我们的UX设计师指出，如果有人试图删除草稿时，我们要求确认会更好，因为这项操作无法撤销。没问题，我们可以鞭打一个可以做到这一点的组件：

>

>将其连接到删除按钮上，我们得到了所要求的。确认对话框将拦截按钮，如果用户选择“确定”，则允许表单提交。我们不必更改我们的异步组件，因为我们可以在不相互干扰的情况下组成这些组件。在我们的生产代码中，我们还在“动作”按钮上使用单身式组件，该组件提供了视觉反馈，表明该表格已提交并防止多个提交。

最终组件，测试和固定装置

>希望本文已经证明您的项目如何从将界面分解为可组合组件中受益。我尚未涵盖的组件设计的一个重要好处是它们易于隔离测试，因此，这是最终组件以及其茉莉测试和HTML测试固定装置：>

yncform
可移动
>计数
>确认

如果您对我所涵盖的内容有任何疑问，请在评论中索取详细信息，我会尽力提供帮助。

>关于思考组件的常见问题（常见问题解答）

>有效思维的关键组成部分是什么？

有效思维是一个涉及多个关键组成部分的多方面过程。这些包括清晰度，精度，准确性，相关性，深度，广度，逻辑，意义和公平性。这些组件中的每一个都在确保我们的思维过程有效并得出准确的结论中起着至关重要的作用。

>

>我如何提高我的批判性思维能力？诸如质疑假设，寻求多种观点并开放新思想之类的习惯。它还涉及开发诸如分析，解释，推理，评估，解释和自我调节之类的技能。

>

>逻辑在批判性思维中的作用是什么？批判性思维。它涉及正确推理，从前提获得结论，评估索赔并避免推理中的谬论或错误的能力。

>相关性如何有效思维？我们正在考虑的信息或想法与当前问题或问题直接相关。它有助于我们保持专注并避免分心或无关紧要的信息。

>

>批判性思维中深度的重要性是什么？问题或问题，了解其潜在的原因或含义，并从多个角度探索它。

>

>我如何在思想中发展广度？

>

在思考中发展广度涉及考虑广泛的观点，思想和信息来源。它需要开放，好奇，愿意探索新的想法或观点。

公平在批判性思维中的作用是什么？和客观。它要求我们考虑所有相关的观点和证据，并避免偏爱，偏见或偏见。

精确性如何有效思维？

精确性涉及精确，详细和清晰的思想和表达方式。它有助于我们避免模糊，模棱两可或混乱，并有效地传达我们的想法。

>

>准确性在批判性思维中的重要性是什么？

准确性的批判性思维中的准确性涉及确保我们的信息，想法和结论是正确的，可靠的，并且没有错误或扭曲。这对于做出正确的决策和判断至关重要。

>我如何提高思想的清晰度？我们的思想和表达中的简单性和直截了当。

以上是在组件中思考的详细内容。更多信息请关注PHP中文网其他相关文章！