在组件中思考-js教程-PHP中文网

钥匙要点

实践 - “项目清单”

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

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

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

首页

web前端

js教程

在组件中思考

Joseph Gordon-Levitt

Feb 21, 2025 am 09:54 AM

在组件中思考

钥匙要点

界面开发的组件方法提供了比传统MVC和MVVM框架的好处，重点是交互的最小抽象部分，而不是建模业务领域。
在我看来，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设计师指出，如果有人试图删除草稿时，我们要求确认会更好，因为这项操作无法撤销。没问题，我们可以鞭打一个可以做到这一点的组件：