در این مقاله موضوعی را مطرح خواهم کرد که شاید برای خیلی‌ها این نوع کد نویسی خوشایند نباشد. حتی برای خود من هم خوشایند نیست؛ ولی نهایتا در بهبود Performance تاثیر خیلی زیادی دارد. به کد زیر دقت کنید.
توضیح کد: فرض کنید سناریوی پروژه ما به این صورت هست که ما یک لیست داریم، شامل 3 فیلد که header، title و footer را در تنظیمات می‌توانیم مشخص کنیم که header و footer در شرایطی نمایش داده شود و در شرایطی نمایش داده نشود و یا حالت‌های دیگر.
درست است من هم با شما موافق هستم که خوشایند نیست. در این کد ما همه‌ی حالت‌ها را پیش بینی و قالب مناسب هر شرط را درست کرده‌ایم. حجم کد چند برابر شده، ولی از لحاظ Performance در ساخت لیست در View در حد 98% بهبود پیدا کرده‌است. همان مثال قبلی را در نظر بگیرید. ng-if مربوط به header و footer در این کد فقط 4 بار بررسی میشود. چه 100 رکورد باشد، چه 1000 تا، چه 10 تا رکورد.
<div ng-repeat="item in items"><div ng-if="setting.header">{{item.header}}</div><div>{{item.title}}</div><div ng-if="setting.footer">{{item.footer}}</div></div>خوب مشکل چیست و راهکار چیست؟
فرض کنید لیست ما شامل 100 رکورد هست و در تنظیمات مشخص کرده‌ایم که header نمایش داده شود و footer نمایش داده نشود. اما اتفاقی بدی که میفتد این است که وقتی لیست در View ساخته میشود، 100 بار ng-if مربوط به header و footer چک میشود؛ در جمع 200 بار میشود. چه این مقادیر true باشند چه false فرقی نمی‌کند و 200 بار بررسی میشود.
راهکار این مشکل به این صورت است که ما باید از ng-if داخل ng-repeat استفاده نکنیم. اما برای پیاده سازی تنظیمات باید ng-ifها را قبل از ng-repeat بررسی کنیم. پس مسلما ng-repeatها باید قالب پیش بینی کرده ما را نسبت به ng-ifها درست کند. نتیجه‌ی کار به صورت کد زیر است که شاید برای شما هم خوشایند نباشد:
<div ng-if="setting.header && setting.footer"><div ng-repeat="item in items"><div>{{item.header}}</div><div>{{item.title}}</div><div>{{item.footer}}</div></div></div><div ng-if="setting.header && setting.footer==false"><div ng-repeat="item in items"><div>{{item.header}}</div><div>{{item.title}}</div> </div></div><div ng-if="setting.header==false && setting.footer"><div ng-repeat="item in items"> <div>{{item.title}}</div> <div>{{item.footer}}</div> </div></div><div ng-if="setting.header==false && setting.footer==false"><div ng-repeat="item in items"> <div>{{item.title}}</div> </div></div>در مورد ng-repeatها هم نگران نباشید فقط یک بار اجرا میشوند. اگر کارکرد ng-if را در مقاله‌ی قبلی من ، خوانده باشید، متوجه‌ی این موضوع می‌شوید که elementهای داخلی و directionهای AngularJS داخلی ng-if زمانی پردازش میشوند که شرط true باشد. از این روش زمانی استفاده کنید که تعداد داده‌ها و حالت‌های زیادی دارید و Performance اهمیت بیشتری دارد. امیدوارم مقاله‌ی مفیدی باشد.
