AngularJs 1.5 - 基于组件的架构、绑定和良好实践

Posted 2023-02-23

【中文标题】AngularJs 1.5 - 基于组件的架构、绑定和良好实践

【英文标题】：AngularJs 1.5 - Component Based Architecture, Bindings and Good Practices

【发布时间】：2017-03-18 05:51:37

【问题描述】：

按照我的问题 Angularjs 1.5 - CRUD pages and Components

我还有一些关于基于组件的架构的设计问题。

1- 根据指南，如果我有一个带有来自父级绑定的子组件，我应该在父级上处理数据操作。那么，我是保存数据，例如，在父级还是在子级？

例子

 <my-child on-save="$ctrl.save"></my-child>

MyChild 组件包含一个用于保存数据的表单。 在这种情况下，我应该在哪里保存数据，在 parent 还是 child ？假设我在孩子做，我使用父保存功能来更新用户界面？

2- 如果我有一个没有绑定的子组件，在子组件中进行数据保存和操作是否正确？

3- 理想情况下，所有应用程序都应该是一个组件树。假设我有一个表单，称为使用 ng-view 和路由器。一般来说，我必须考虑一个代表整个应用程序用户界面的核心或父组件，例如，我的表单是一个子组件？所以我必须像第 1 点和第 2 点那样传播绑定？

希望我的问题很清楚

【问题讨论】：

在这种情况下，您可以使用 scope.$emit 和 scope.$on。处理这些情况的最佳方法。

当您使用组件和基于组件的架构时，使用范围是一种不好的做法

【参考方案1】：

为了解释这一点，我首先必须考虑一些可能会改变您对应用程序设计看法的组件。

组件

组件是对既是整体的一部分又由另一个整体组成的事物的通用定义，但它没有具体说明每个组件在该整体中的作用。因此，在基于组件的架构中，通常会定义指令来处理组件，从而更好地定义每个角色。

例如：一堆组件，一个由另一个组合但所有组件；

<component>    
    <component></component>
    <component>        
        <component></component>
        <component></component>        
    </component>    
</component>

智能组件和哑组件

我了解到大多数基于组件的框架和库都使用这种方法。组件分为两类，智能组件和哑组件。这个Tero Parviainen's article 和Dan Abramov 更好地描述了这一点。

例如：仍然，都是组件，但由其类别定义

<app>
    <nav></nav>
    <!-- projects-page is Dumb: I don't have to know nothing
    <!-- just organize and display things -->
    <projects-page>
        <!-- project-list is Smart: I must know how to retrieve projects -->
        <project-list>
            <!-- Dumb: just display -->
            <project-list-item></project-list-item>
            <!-- Dumb: just display -->     
            <project-list-item></project-list-item>
        </project-list>
    </projects-page>    
</app>

基本上，智能组件连接到应用程序逻辑，他们知道如何思考。虽然他们可能有输入和输出，但他们大多知道如何加载自己的数据，以及如何在发生更改时持久保存。但是 Dumb 组件只知道事物应该是什么样子，并且完全由它们的绑定定义：它们使用的所有数据都作为输入提供给它们，它们引入的每一个更改都作为输出输出，Toward Smart And Dumb Components, Tero Parviainen's .

回答

所以你的问题的答案是：这取决于你如何看待那个子表单组件，如果它只是一个显示字段的编辑器（即，愚蠢，我认为在这种情况下它是）。或者由检索和命令与持久性单元的通信来保存它（即智能）。

无论如何，最重要的是确保您保存的是来自智能组件的数据，最好是来自该数据的所有者。将智能组件视为管理者，将愚蠢组件视为生产者。另外，请查看这篇关于编写基于组件的应用程序的文章：Writing component based goats dating app with angular 1.5，由 Dima Grossman 撰写。

注意：将智能组件视为有状态的。这基本上意味着智能组件在某些情况下的可重用性较低。如果您必须在另一个组件上重用form-component，其中对象project 是另一个对象的一部分（例如 client: name: '', projects: [ id:1, ... ...]），并且您想使用相同的表单来编辑此对象中的项目，您将面临一个问题。你不能重用完全相同的组件逻辑，因此在这种情况下，一个愚蠢的组件对于重用可能更有用，因为它更简单、更客观，而且它不做任何决定，只是展示东西，接收和返回数据。

【讨论】：

谢谢。我了解基于组件的方法，我喜欢它。就我而言，这件事让我从效率和数据负载两方面考虑。即我有一个包含一些信息的列表视图和更多信息的表单，所以我正在决定方法。

@Massimo 是的，这是一个必须谨慎做出的决定。另外，在我的回答中添加了一个注释。