استخدام تعليمات مخصصة لتحل محل ng-repeat في AngularJS

مقدمة

جميعنا نعلم أن ng-repeat مفيد جدًا لمعالجة كميات صغيرة، ولكن إذا كان علينا معالجة كميات كبيرة، فإن استخدام الطرق المخصصة أفضل.

التعبيرات في ng-repeat و $watch

تقوم جميع التعبيرات في Angular بإنشاء وظيفة $watch في نطاق Scope. تستخدم لمراقبة التغيير في النموذج، وتبعًا للتغييرات في جزء من النموذج، تقوم بإعلامك. في تعليمات ng-repeat، إذا كانت جميع الصفوف تحتوي على 15 عمودًا مرتبطًا بتعبيرات، فإن لديك أكثر من 1000 صفًا، فإن $watch سيكون هناك 15000 وظيفة، مما يجعل الأداء صعبًا للغاية.

لذلك، عندما نريد تنفيذ وظيفة ng-repeat ونتطلع إلى تحسين الأداء، فإننا لا نستطيع سوى البحث عن طريقة أخرى.

استبدال طريقة ng-repeat

إذا كانت البيانات ثابتة، لا نحتاج إلى طريقتين للتحكم، فقط قم بإجراء تعيين مرة واحدة باستخدام {{::value}} يمكن أن يكون. إذا كان AngularJS إصدارًا 1.3 أو أقل، فإنه لا يدعم لغة التخصيص المرة الواحدة. لذا، أفضل طريقة هي إنشاء تعليمات برمجية مخصصة، أي يمكن استخدام بعض الطرق البسيطة لتنسيق البيانات الثابتة.

إجراءات تنفيذ

1- أولاً إنشاء قائمة غير مرتبة لتح Konsol الديناميكية.

إنشاء علامة ul كحاوية لعرض القائمة

نحن نختار تحميل بيانات القائمة بشكل ديناميكي، أولاً نضيف علامة div، ونسميها "repeater-alternative" لتمثيل تدفق.

<div>
 <ul>
  <div repeater-alternative></div>
 </ul>
</div>

2- تعريف بيانات القائمة:

// بيانات مثال
var studentsList = 
[
 {
  FirstName: "Raj,
  LastName : "B",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 {
  FirstName: "Kumar,
  LastName : "S",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 ..................
 ..................
 ..................
 ..................
];
$scope.collectionObject = studentsList; // تخصيصه لـ $scope الدالة

3- محتويات القائمة الفعلية

الغرض الرئيسي هو تطبيق المجموعات المتكررة وتظهر في القائمة، لذا يجب إعداد منطق الاستدلال وتنسيق السلسلة وفقًا للطلب.

var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div> ',
  '<div class="col-md-1 ">' + item.LastName + '</div> '
  '<div class="col-md-1 ">' + item.Country+ '</div> ',
  '<div class="col-md-1 ">' + item.Id + '</div> '
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> '
  '</li>'].join('');
});

4- منطق تنسيق القائمة

بمجرد أن تم تخصيص قيمة collectionObject إلى متغير آخر، يجب تعريف جدول العرض للبيانات.

5- كيفية الحصول على وقت تخصيص CollectionObject

سيقوم Angular بمتابعة تغييرات قيمة المتغير $scope، وعندما يتم تعديل القيمة، يتم تنفيذ $watch، لذا يجب وضع منطق تخصيص CollectionObject داخل $watch الخاص بمتغير $scope.

كود كما يلي:

$scope.$watch($scope.object, function (oldValue, newValue) { 
})

بمعنى آخر، عند تنفيذ جملة الassignment، سيتعامل Angular مع هذا الحدث ويعمل على تنسيق محتويات القائمة.

$scope.$watch('collectionObject', function (oldValue, newValue) {
 var tableRow = "";
 angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div> ',
  '<div class="col-md-1 ">' + item.LastName + '</div> '
  '<div class="col-md-1 ">' + item.State + '</div> '
  '<div class="col-md-1 ">' + item.Id + '</div> '
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> '
  '</li>'].join('');
 });
})

ثم نبدأ في إرسال المحتوى إلى عنصر التحكم في الجدول، أي علامة HTML <DIV> repeater-alternative.
على الأولاً، يجب أن نفهم آلية Directive في Angular، بسيطاً، نحن نعطي إشارة لـ Angular للبدء في إجراء العمليات الخلفية عند إيجاد المتغير المحدد.

var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  link: function ($scope, $elem, attrs) {
     //معالجة الخلفية
 }
});

سنخبر Angular بأننا نريد إرسال البيانات التالية إلى سطر القائمة عند إيجاد عنصر "repeater-alternative".

كود كما يلي:

var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  link: function ($scope, $elem, attrs) {
   $scope.$watch('collectionObject', function (oldValue, newValue) {
    var tableRow = "";
    angular.forEach($scope.collectionObject, function (item) {
     tableRow = tableRow + ['<li>',
         '<div class="col-md-1">' + item.FirstName + '</div> ',
         '<div class="col-md-1 ">' + item.LastName + '</div> '
         '<div class="col-md-1 ">' + item.State + '</div> '
         '<div class="col-md-1 ">' + item.Id + '</div> '
         '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> '
         '</li>'].join('');
    });
    //إذا كان متصفحك الرئيسي هو IE، يُنصح باستخدام innerHTML لزيادة الأداء
    $elem.context.innerHTML = tableRow;
    //إذا كان متصفح IE ليس متصفحك الرئيسي، يكفي فقط إضافة المحتوى إلى العنصر.
    //$elem.append(tableRow);
   });
  }
 }
});

الخلاصة

في هذا المقال، تم محاكاة طريقة عمل ng-repeat و منطقها، ولكن هذا محدود بالمواد الثابتة فقط، لذا تكون النتائج المتنوعة مع نتائج ng-repeat، ولكن يتم عرضها بشكل أسرع، لأن هذا الأسلوب يحتوي على طريقة إرتباط بيانات واحدة وعدد قليل من $watch. هذا هو نهاية مقال هذا، آمل أن تكون محتويات هذا المقال مفيدة لكم في التعلم أو العمل، إذا كان لديكم أي استفسارات، يمكنكم ترك تعليقات للتفاعل.