离子标签的最佳实践

Question

我对 ionic 框架中的标签使用有点困惑。如果您在CSS components 下查看他们的文档，您会看到他们使用具有特定类选择的现有标签（尤其是 div）来实现格式化，就像您对 bootstrap 之类的期望一样。示例：

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

但是，如果您查看他们的code samples，您会发现他们使用的是自定义离子标签。示例：

<ion-header-bar class="bar-assertive">
  <h1 class="title">Left Menu</h1>
</ion-header-bar>

在他们的guide 以及我在 ionic 上找到的复数教程中使用了使用自定义离子标签的相同做法。

那么这里发生了什么？如果这两种方法都完成了同样的事情，那么哪一种被认为是最佳实践？

Answer 1

离子框架，正如他们的site 所述，是：

Ionic 既是一个 CSS 框架，也是一个 Javascript UI 库。许多 组件需要 Javascript 才能产生魔法，尽管通常 无需通过框架编码即可轻松使用组件 扩展，例如我们的 AngularIonic 扩展。

使用CSS Components，您只是将CSS 样式应用于您的HTML 页面。

使用 Ionic 指令时，您使用的是功能齐全的 JavaScript 组件，并且您可以访问框架提供的 API。

为了更好地了解差异，您应该深入了解AngularJs directives。

以列表为例。您可以使用 HTML ul li 创建一个简单的 list：

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

但是如果你使用directive:

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

您可以访问框架提供的扩展功能（请参阅页面底部的API）。

我大部分时间都倾向于使用指令，除非我知道我不想与界面进行任何形式的交互。