我一直在寻找何时有人在 angularjs / angular 上的 Web 应用程序中创建新组件的逻辑,但我认为这更通用,可能适用于所有基于组件的前端框架。
我知道有一些原则,比如它应该是抽象的和可重用的,但例如,我在 angular 文档中看到,每个单独的路由都查看一个特定的组件(这如何可重用)。在创建新组件之前,我可能会问任何可靠的问题吗?
我一直在寻找何时有人在 angularjs / angular 上的 Web 应用程序中创建新组件的逻辑,但我认为这更通用,可能适用于所有基于组件的前端框架。
我知道有一些原则,比如它应该是抽象的和可重用的,但例如,我在 angular 文档中看到,每个单独的路由都查看一个特定的组件(这如何可重用)。在创建新组件之前,我可能会问任何可靠的问题吗?
为了决定是否必须创建组件,我认为您必须回答以下问题:
无论框架如何,此建议都适用。制造新组件通常是出于以下两个原因之一:
(1) 可重用性
您将重新使用该组件。再利用水平各不相同。某些代码可能是项目特定的,但可能会在您的项目中的 2 个地方使用,但绝不会在您的项目之外使用。它仍然可以重复使用。
但是,如果它是一段高度可重用的代码,您应该真正改进它,并可能将其发布给全世界!
(2) 组织
有时代码可能会持续太长时间。可能有数百行,而且它只是不可读。将代码分解成组件有助于提高可读性和代码组织。在这里,新组件应该是父组件的子组件。
代码结构:
您应该考虑将高度重用的组件放在名为 components 的文件夹中。可以制作成第三方库/一部分的组件的种类。
将可重复使用的组件投影到名为 apponents 的文件夹中。
最后,组织组件应该是其父组件的子组件,并且应该放置在其父组件的子文件夹中。
在您决定编写新组件之前按照步骤操作,
(i) Identify the responsibility
- 您应该components responsibility
在编写之前定义 a ,因此您知道何时开始编写。
(ii) When it is large
- 根据经验,如果您的组件代码超过 600 行,请分成更小的组件,这样您的代码易于阅读和维护
(iii) When you want to reuse
- 当您发现某个组件在各种module中使用时,您应该将其设为共享组件。
以上 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>
它们使用组件的频率与您可能习惯使用引导程序类的频率一样!但是看看代码的可读性有多高。离子列表,有离子项目。您通常可以猜测离子化身会是什么样子,但实际上组件内部可能会发生一些事情。所有这些都被抽象掉了。复杂的事物被分解成易于理解的小组件。每个组件本身通常都很简单。
对于任何 html 元素,我认为值得考虑它的重点是什么,以及是否值得将其制作成一个有角度的组件,以使代码更加分割,更容易从高层次上理解。