Javascript AngularJs 1.5-基于组件的体系结构、绑定和良好实践

按照我的问题

我还有一些关于基于组件的体系结构的附加设计问题

1-根据指导原则，如果我有一个子组件与父组件绑定，我应该在父组件上处理数据操作。那么，我是将数据保存在父级还是子级中

范例

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

MyChild组件包含用于保存数据的表单。 在这个场景中，我应该在哪里保存数据，在父级还是子级？假设我在child中这样做，我使用parent save函数来更新UI

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

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

---

希望我的问题很清楚

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

组件 组件是一个通用的定义，它既是一个整体的一部分，又由另一个整体组成，但它没有具体说明每个组件在该整体中的作用。因此，在基于组件的体系结构中，通常定义指令，以更好地定义每个角色的方式处理组件

例如：一组组件，一个组件被另一个组件组合，但所有组件

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

智能和哑组件 我已经了解到，大多数基于组件的框架和库都使用这种方法。组件分为两类，智能组件和非智能组件。这是更好的描述，这也是

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

<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，我认为在本例中是这样）。或者由检索负责，并命令与持久性单元通信以保存它（即smart）

无论如何，最重要的是确保您正在从智能组件保存数据，最好是从数据所有者那里保存数据。将智能组件视为管理者，将哑组件视为生产者。另外，请查看这篇关于编写基于组件的应用程序的文章：由DimaGrossman编写

注意：将智能组件视为有状态组件。这基本上意味着智能组件在某些情况下不太可重用。如果必须在另一个组件上重用
表单组件
，而对象
项目
是另一个对象的一部分（例如，
{client:{name:''，projects:[{id:1，…}…]
）如果您想使用相同的表单编辑此对象中的项目，您将面临一个问题。您不能重用完全相同的组件逻辑，因此在这种情况下，哑组件对重用更有用，因为它更简单、更客观，并且不做任何决定，只显示内容、接收和返回数据

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

组件
组件是一个通用的定义，它既是一个整体的一部分，又是由另一个整体组成，但它没有具体说明每个组件在该整体中的角色。因此，在基于组件的体系结构中，通常定义指令，以更好地定义每个角色的方式处理组件

例如：一组组件，一个组件被另一个组件组合，但所有组件

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



智能和哑组件
我已经读到，大多数基于组件的框架和库都使用这种方法。组件分为两类，智能组件和非智能组件。这两种方法更好地描述了这一点

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

<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，我认为在本例中是这样），或者由检索负责并命令与持久性统一体通信以保存它（即，smart）

无论如何，最重要的是确保您正在从智能组件保存数据，最好是从数据所有者那里保存数据。将智能组件视为管理者，将哑组件视为生产者。此外，请查看这篇关于编写基于组件的应用程序的文章：由Dima Grossman撰写

注意：将智能组件视为有状态组件。这基本上意味着智能组件在某些情况下不太可重用。如果必须在另一个组件上重用
表单组件
，其中对象
项目
是另一个对象的一部分（例如，
{client:{name:''，项目：[{id:1，…}…]
）如果您想使用相同的表单编辑此对象中的项目，您将面临一个问题。您不能重用完全相同的组件逻辑，因此在这种情况下，哑组件对重用更有用，因为它更简单、更客观，并且不做任何决定，只显示内容、接收和返回数据

在这种情况下，您可以使用scope.$emit和scope.$on。这是处理这些情况的最佳方法。当您使用组件和基于组件的体系结构时，使用scope是一种不好的做法。在这种情况下，您可以使用scope.$emit和scope.$on。这是处理