ثالثًا: تحسين الأداء باستخدام track by

عند التعامل مع قوائم كبيرة أو في حال كانت هناك عمليات إدخال وحذف متكررة من المجموعة، يصبح من المهم تحسين أداء التكرار باستخدام خاصية track by. تُمكّن هذه الخاصية AngularJS من تتبع العناصر بكفاءة عند إعادة التهيئة (re-rendering)، مما يقلل من العمليات الحسابية الداخلية.

الصيغة:

html
CopyEdit
<div ng-repeat="item in items track by item.id">
  {{ item.name }}
div>

تُساعد هذه التقنية على تقليل إعادة التهيئة الكاملة للعناصر عند التعديل أو التحديث، إذ يُحدد العنصر بمفتاح فريد.

رابعًا: ترتيب المجموعات باستخدام orderBy

يُستخدم orderBy لترتيب عناصر المجموعات حسب خاصية معينة، ويمكن استخدامه ضمن ngRepeat أو مباشرة من خلال الفلاتر في JavaScript.

الصيغة:

html
CopyEdit
<div ng-repeat="product in products | orderBy:'price'">
  {{ product.name }} - {{ product.price }}
div>

كما يمكن الترتيب تنازليًا بإضافة علامة الطرح -:

html
CopyEdit
<div ng-repeat="product in products | orderBy:'-price'">
  {{ product.name }} - {{ product.price }}
div>

خامسًا: فلترة المجموعات باستخدام filter

تسمح خاصية filter بإنشاء عرض ديناميكي لمجموعة من العناصر بناءً على معيار معين. وتُستخدم هذه الخاصية لتمكين البحث أو التصفية حسب الشروط المدخلة.

مثال:

html
CopyEdit
<input type="text" ng-model="searchQuery">

<ul>
  <li ng-repeat="contact in contacts | filter:searchQuery">
    {{ contact.name }}
  li>
ul>

في هذا المثال، يتم عرض العناصر المتوافقة فقط مع الكلمة المفتاحية المُدخلة في searchQuery.

سادسًا: التعامل البرمجي مع المجموعات

يوفر AngularJS مجموعة من الدوال المساعدة angular.forEach وangular.copy وangular.isArray، لتسهيل عمليات التحقق والتكرار والنسخ بين المجموعات.

angular.forEach

يُستخدم لتكرار العناصر داخل مجموعة معينة:

javascript
CopyEdit
angular.forEach($scope.items, function(item) {
  console.log(item);
});

angular.copy

لنسخ مجموعة دون ربطها بالإشارة المرجعية (reference):

javascript
CopyEdit
var newItems = angular.copy($scope.items);

angular.isArray

للتحقق مما إذا كانت القيمة تمثل مصفوفة:

javascript
CopyEdit
if (angular.isArray($scope.products)) {
  console.log("المجموعة عبارة عن مصفوفة");
}

سابعًا: الربط الثنائي والربط الأحادي للمجموعات

من أبرز ميزات AngularJS القدرة على الربط الثنائي للبيانات (Two-Way Data Binding)، حيث يتم تحديث العرض تلقائيًا عند تغير البيانات في النموذج، والعكس صحيح.

لكن عند الحاجة لتقليل الحمل الحسابي يمكن استخدام الربط الأحادي (One-Time Binding) عن طريق :: لتحديث العرض مرة واحدة فقط.

مثال على الربط الأحادي:

html
CopyEdit
<div>{{::user.name}}div>

يتم هنا عرض الاسم مرة واحدة فقط ولن يتم تحديثه عند تغير القيمة في النموذج.

ثامنًا: تصفية المجموعات باستخدام دوال مخصصة

إلى جانب filter وorderBy المدمجين، يمكن للمطورين كتابة دوال مخصصة لتصفية المجموعات حسب شروط معينة.

مثال على فلترة برمجية:

javascript
CopyEdit
$scope.expensiveItems = $scope.items.filter(function(item) {
  return item.price > 100;
});

تُستخدم هذه الطريقة عندما تتطلب الفلاتر منطقًا أكثر تعقيدًا من المتاح عبر filter.

تاسعًا: استخدام المجموعات داخل التوجيهات المخصصة (Custom Directives)

يُستخدم مفهوم المجموعات أيضًا ضمن التوجيهات المخصصة التي تُبنى لتعزيز مكونات قابلة لإعادة الاستخدام. وغالبًا ما تُمرر المجموعات إلى التوجيهات عبر الخصائص (Attributes) ويُتعامل معها داخليًا من خلال scope.

مثال:

html
CopyEdit
<product-list items="products">product-list>

javascript
CopyEdit
app.directive('productList', function() {
  return {
    restrict: 'E',
    scope: {
      items: '='
    },
    template: '
{{ product.name }}
'
  };
});

عاشرًا: جداول توضيحية للمقارنة والوظائف

جدول مقارنة بين ngRepeat, filter, orderBy, track by

الحادي عشر: أفضل الممارسات عند التعامل مع المجموعات في AngularJS

• استخدام track by مع ngRepeat دومًا لتفادي مشاكل الأداء عند إعادة التكرار.

• تجنب التكرار على الكائنات (Objects) عند استخدام ngRepeat والاقتصار على المصفوفات، حيث أن التكرار على كائنات قد يكون غير متوقع الترتيب.

• فصل المنطق المعقد للفلترة في Controllers أو Services بدلًا من تضمينه مباشرة في HTML.

• عدم تعديل المجموعات المرتبطة مباشرة بـ $scope في العرض، بل العمل على نسخ منها.

• استخدام One-Time Binding للعناصر غير المتغيرة لتحسين الأداء.

الثاني عشر: تأثير المجموعات على تحسين تجربة المستخدم

من خلال استخدام المجموعات بطرق فعالة، يمكن إنشاء واجهات تفاعلية تعتمد على العرض الديناميكي للبيانات مما يوفر تجربة مستخدم عالية الجودة. تُمكن الفلاتر والتكرار الديناميكي المستخدم من التفاعل مع المعلومات في الزمن الفعلي بدون الحاجة إلى تحديث الصفحة أو إرسال طلبات إلى الخادم باستمرار.

الثالث عشر: تطبيقات عملية تعتمد على المجموعات في AngularJS

• أنظمة إدارة المنتجات (Product Management): عرض قائمة المنتجات، ترتيبها، تصفيتها، والسماح بتحريرها.

• أنظمة الرسائل (Messaging Systems): قائمة الرسائل، تحديثات فورية، بحث في الرسائل.

• لوحات المعلومات التفاعلية (Dashboards): عرض جداول البيانات والإحصائيات بناءً على مجموعات من المعلومات.

• أنظمة التعليم الإلكتروني: عرض الدورات، المحتوى، نتائج الطلاب ضمن مجموعات منظمة وقابلة للتصفية والترتيب.

المراجع

1. AngularJS Documentation – https://docs.angularjs.org/guide

2. AngularJS API Reference – https://docs.angularjs.org/api