چرا من ایده “جریان کنترل داخلی” را دوست دارم

یک RFC جدید در Angular، “Built-In Control Flow” من (و بسیاری دیگر) را هیجان زده کرد، اما نه همه. برخی از این تغییر به خودی خود خوششان نمی آید، برخی دوست ندارند که دستورالعمل های ساختاری منسوخ شود، برخی از نحوه ظاهر نحو جدید و غیره خوششان نمی آید. در اینجا توضیح خواهم داد که چرا این ایده جدید را دوست دارم.

بخشنامه های ساختاری نباید بخشنامه باشد

آنها صرفاً به مؤلفه ای که روی آن اعمال می شوند مرتبط نیستند.
به این کد نگاه کنید:

<ul>
  <li *ngFor="let item of items">
    {{item.label}}
  </li>
</ul>

اینجا ngFor یک ویژگی یک عنصر رندر شده نیست li – مشخص می کند که آیا آن عنصر اصلاً باید رندر شود یا خیر.

حالا بیایید کمی کدمان را پیچیده کنیم و فقط مواردی را رندر کنیم که برچسب غیر خالی دارند:

<ul>
  <ng-container *ngFor="let item of items">
    <li *ngIf="!!item.label">
      {{item.label}}
    </li>
  </ng-container>
</ul>

چون نمی‌توانیم بیش از یک دستورالعمل ساختاری را برای یک عنصر اعمال کنیم، حرکت کردیم ngFor دور از li و بر چگونگی آن تأثیری نداشت liبه نظر می رسد یا رفتار می کند.

اگر بتوانیم آن را حذف کنیم، پس «ویژگی» آن نبوده استli، این یک مکانیسم جریان کنترلی بود که به عنوان یک دستورالعمل اجرا شد – در مثال دوم هنوز یک دستورالعمل است که برای عنصر مصنوعی اعمال می شود. ng-container. این باید به عنوان مکانیزم جریان کنترلی اجرا شود و نباید شبیه یک ویژگی برخی از عناصر باشد.

کد را فشرده تر می کند

حتی “if-else” ساده در قالب های Angular در حال حاضر ناخوشایند به نظر می رسد. مواردی مانند «اگر-اگر-دیگر» به سرعت گیج کننده و خیلی بزرگ می شوند:

<ng-container *ngIf="item.type==='email'; else nonEmail">
  <a href="mailto:{{item.ref}}">{{item.ref}}</a>
</ng-container>

<ng-template #nonEmail>
  <ng-container *ngIf="!!item.label; else noLabel">
    <a href="{{item.ref}}">{{item.label}}</a>
  </ng-container>

  <ng-template #noLabel>
    <div>Wrong link</div>
  </ng-template>
</ng-template>

مقایسه کنید با:

{#if item.type==='email'}
  <a href="mailto:{{item.ref}}">{{item.ref}}</a>
{:elseif !!item.label }
  <a href="{{item.ref}}">{{item.label}}</a>
{:else}
   <div>Wrong link</div>
{/if}

قدرتمندتر از دستورالعمل های کاربر زمین

به دلیل ماهیت “ساخت‌شده” جریان کنترل جدید، چارچوب می‌تواند برخی از “آماده‌سازی” و بهینه‌سازی را در مرحله “ساخت” انجام دهد. در را به روی چیزهایی باز می کند که قبلاً امکان پذیر نبودند (یا اجرای آنها بسیار دشوار بود). و یک مثال عالی است #defer (به “RFC: Deferred Loading” مراجعه کنید).

محدودیت های ریز نحوی را حذف می کند

ما کنترل تایپ و تایپ بسیار بهتری خواهیم داشت.
اگر در مورد ریز نحو چیزی نشنیده اید: هر بار که می نویسید

<li *ngFor="let item of items; index as i; trackBy: trackByFn">{{item}}</li>

Angular آن را به شکل طولانی ترجمه می کند ngFor (من مطمئن هستم که تعداد کمی از توسعه دهندگان به طور منظم از آن استفاده می کنند):

<ng-template ngFor 
             let-item 
             [ngForOf]="items" 
             let-i="index" 
             [ngForTrackBy]="trackByFn"
>
  <li>{{item}}</li>
</ng-template>

بنابراین، توسعه‌دهندگان مجبور بودند برای اینکه شما را مجبور به استفاده از فرم طولانی با API ناخوشایندش نکنند، ریز نحو ایجاد می‌کردند تا آن کوتاه‌نویسی را ممکن کنند. جریان کنترل داخلی این ناهنجاری را از بین می برد و تایپ را باریک تر می کند.

این فرصتی است برای بهبود چشمگیر Angular

جریان کنترل یک ویژگی ضروری، یکی از ویژگی های اصلی چارچوب است. هر گونه پیشرفت در این زمینه برای هر توسعه دهنده ای بسیار سودمند خواهد بود.

جریان کنترل داخلی، جریان کنترل را از “کد کاربر زمین” حذف می کند و کنترل کامل را به چارچوب می دهد – این دیگر فقط برخی دستورالعمل های ساختاری نیست، بنابراین Angular می تواند کارهای بیشتری را به روشی بهینه تر انجام دهد. من معتقدم که #defer فقط اولین نمونه از بسیاری از ویژگی های خوب است که از این ایده بیرون خواهیم آمد.