是否有关于使用AngularJS过多指令的指导？

2023年11月12日 223次阅读

对“一切”使用指令是不好的做法,形式还是表现？我开始将它们看作是渲染
HTML的函数,就像函数一样,它们在非常谨慎和组合时变得有用.

但是,我开始担心这可能会导致性能不佳或指令过载.这是我想如何使用它们的一个例子 – 我对反馈感兴趣,特别是关于性能等.

  <!-- This could even be wrapped in a my-editing-area-navbar directive -->
  <my-navbard heading="{{pg.constants.navHeader}}">
    <my-jump-to-page></my-jump-to-page>

    <my-divider></my-divider>

    <my-undo></my-undo>
    <my-redo></my-redo>

    <my-divider></my-divider>

    <my-clear></my-clear>

    <my-accept-and-continue acceptFunction="pg.acceptAndContinue()"></my-accept-and-continue>

    <my-divider></my-divider>

    <my-reset-utility></my-reset-utility>
  </my-navbar>

  <my-left-column heading="{{pg.constants.leftColHeading}}">
    <my-preview-component></my-preview-component>

    <my-debug-utility ng-if="{{pg.showDebug}}"></my-debug-utility>
  </my-left-column>

  <my-main-content heading="{{pg.constants.mainHeading}}" subheading="{{pg.constants.mainSubheading}}">
      <my-message-viewer></my-message-viewer>

      <my-content-mainpulator>
        <my-content-frobber></my-content-frobber>

        <my-dohicky></my-dohicky>
      </my-content-mainpulator>
  </my-main-content>
</my-page>

最佳答案 在我看来,几乎任何小型,模块化和可重复使用的东西都应该在指令中.保持它
DRY.如果它真的特定于控制器/视图,那么实际上没有必要将它抽象成它自己的东西.

我不能说性能,但是我所使用的任何指令性重型应用程序都没有感到迟钝或任何东西.而且我愿意交换指令所提供的封装和重用可能带来的性能损失.

我看到的指令与任何其他专门的html元素(输入框,文本区域等)的方式相同,并以相同的方式使用它们(当你知道角度朝向使用Shadow DOM时,这更有意义).只要确保它编码良好,你就不应该看到性能问题.

点赞