Question

当有人在angularjs / angular 的Web应用程序中创建一个新组件时，我一直在寻找的逻辑，但我认为这更通用，可能适用于所有组件基于前端框架。

我知道有些原则应该是抽象的和可重复使用的，例如我在angular docs上看到，每条独立的路径都会查看一个特定的组件（这怎么可以重用）。 在创建新组件之前，我可能会问一些问题吗？

Answer 1

为了决定是否必须创建组件，我认为您必须回答以下问题：

您的代码块是否可以重用？如果是的话，构建新组件似乎是一个好主意。
你的代码是否相当复杂？如果是，也许最好分成不同的组件，以使您的代码更具可读性和可维护性。

Answer 2

无论框架如何，此建议均适用。通常会出于以下两个原因之一制作新组件：

（1）可恢复性

您将重复使用此组件。重复使用水平各不相同。某些代码可能是项目特定的，但可能在项目的两个位置使用，但永远不会在项目之外使用。它仍然可以重复使用。

但是，如果它是一个高度可重复使用的代码，你应该真正改进它，并将其发布到世界各地！

（2）组织

有时代码可能会持续太长时间。可能有数百条线路，它只是不可读。将代码分解为组件有助于提高可读性和代码组织。这里，新组件应该是父组件的子组件。

代码结构：

您应该考虑将高度重用的组件放在名为components的文件夹中。可以组成/成为第三方库的一部分的组件。

将可重用组件项目放入名为apponents的文件夹中。

最后，组织组件应该是其父组件的子组件，并且应该放在其父组件的子文件夹中。

Answer 3

我使用Angular的时间越长，我认为越合理，越多的组件就越好。当然，这是可重复使用的因素，但我认为它们通常会使您的代码更易于维护。

我没有经常使用Ionic，但它确实塑造了我对组件的看法

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let u of users">
      <ion-avatar item-left>
        <img src="{{u.ImgUrl}}">
      </ion-avatar>
      <h2>{{u.Name}}</h2>
      <p>{{u.Status}}</p>
    </ion-item>
  </ion-list>
</ion-content>

他们经常使用组件来使用bootstrap类！但看看代码的可读性有多大。离子列表，有离子项目。你通常可以猜出离子化身的样子，但实际上组件内部可能会发生一些事情。所有这些都被抽象掉了。复杂的事物被分解为易于理解的小组件。每个组件本身通常都很简单。

对于任何html元素，我认为值得考虑它的重点是什么，以及是否值得制作一个角度组件，以使代码更加划分，更容易从高层次理解。

Answer 4

在决定编写新组件之前，请按照步骤进行操作

（i） <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test for P1727410</title> <script src="/ref-files/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { function moveItems(origin, dest) { $(origin).find(':selected').appendTo(dest); } function moveAllItems(origin, dest) { $(origin).children().appendTo(dest); } $('#left').click(function () { moveItems('#Two', '#One'); }); $('#right').on('click', function () { moveItems('#One', '#Two'); }); $('#leftall').on('click', function () { moveAllItems('#Two', '#One'); }); $('#rightall').on('click', function () { moveAllItems('#One', '#Two'); }); }); </script> </head> <body> <h2>Test for P1727410</h2> Available Locations | Selected Locations <form method="POST" action="#"> <select id="One" name="One" multiple="multiple"> <option value="100">Loc1</option> <option value="101">Loc2</option> <option value="102">Loc3</option> </select>     <select id="Two" name="Two" multiple="multiple"> <option value="103">Loc4</option> <option value="109">Loc10</option> </select> <br /> <input type="text" name="something" /><br /> <input type="hidden" name="form" value="1" /> <input type="hidden" name="TwoArray" value="" /> <input type="button" id="leftall" value="<<" /> <input type="button" id="left" value="<" /> <input type="button" id="right" value=">" /> <input type="button" id="rightall" value=">>" /> <input type="button" id="update" value="Save" /> <br /> <input type="Submit" name="Submit" value="Submit" /> </form> <p> <?php if(isset($_POST['form'])) { echo "<pre>"; print_r($_POST); echo "</pre>"; } ?> </p> </body> </html> - 您应该在撰写之前定义 Identify the responsibility ，因此您知道何时开始撰写。

（ii） components responsibility - 根据经验，如果您的组件代码超过600行，请将其划分为更小的组件，以便您的代码易于阅读和维护

（iii） When it is large - 当您发现在各种模块中使用的组件时，您应该将其作为共享组件。

以上3条规则将帮助您确定何时需要编写新组件。希望它有所帮助

Answer 5

您为Route提供的内容实际上是视图/容器，但这并不是Angular中的一个着名术语，所以我们只是将其称为Component。

查看/容器

这些实际上是传递给Route的组件以及路由的所有组件的父组件。它们连接到商店并将数据传递给组件（大多数时候）。这些不可重复使用并且特定于路线。它们只是一个组合所有较小组件以创建路径的组件。

优选组分是可重复使用的并且是哑巴的。愚蠢的，我的意思是仅接收数据并显示它并且不直接连接到商店的组件。

在AngularJS中只有组件，但在React中有容器/视图和组件（即使在代码中它们看起来都相同）。在大多数反应项目中，您会发现views和components有不同的目录。

因此，您确实应该重用和抽象的组件是正确的。您感到困惑的是视图和组件之间。我希望这些术语在Angular世界中也很受欢迎。如果你发现一个特定的组件不值得分开，那就让它成为View的一部分。

Answer 6

来自React docs：

但是你怎么知道它自己的组件应该是什么？只需使用相同的技术来决定是否应该创建新的函数或对象。一种这样的技术是单一责任原则，即理想情况下，一个组件应该只做一件事。如果它最终增长，它应该被分解成更小的子组件。

由于您经常向用户显示JSON数据模型，因此您会发现如果您的模型构建正确，您的UI（以及您的组件结构）将很好地映射。这是因为UI和数据模型倾向于遵循相同的信息体系结构，这意味着将UI分离到组件中的工作通常是微不足道的。只需将其分解为代表您的数据模型的一部分的组件。https://facebook.github.io/react/docs/thinking-in-react.html

PS。还要考虑性能。通过分离组件，您可以管理小视图的生命周期，因此，如果组件显示单个（原子）数据部分，您可以轻松定义组件何时应更新。见shouldComponentUpdate()。

如何判断何时创建新组件？

6 个答案:

查看/容器