AngularJS با وجود توقف پشتیبانی مجدد در بسیاری از پروژههای داخلی و سازمانی حضور دارد. شرکت ها معمولاً به دلیل محدودیت زمانی یا قیمت بالا نمیتوانند این سیستم ها را به نسخههای جدید Angular منتقل کنند. به همین دلیل مهارتهایی که به بهبود تجربه استفاده از کمک میتوانند بیشتر داشته باشند. یکی از این مهارت ها طراحی یک سیستم جستجو و فیلتر دقیق و سریع است .
در این مقاله بهجای توضیحهای ساده و تکراری، دیدی عمیقتر و کاربردی درباره روشهای جستجو و فیلتر در AngularJS ارائه شده است. این مطالب براساس نکاتی است که در پروژه های واقعی بارها مورد استفاده قرار گرفته و بهبود عملکرد را به شکل قابل توجهی امکان پذیر می کند.
اهمیت جستجو و فیلتر در پروژه های AngularJS
در بسیاری از سیستمهای قدیمی حجم داده بسیار زیاد است. کاربران این سیستمها شامل مدیران، اپراتورها و کارشناسان پشتیبانی هستند و انتظار دارند اطلاعات را سریع پیدا کنند. AngularJS از ساختاری قدیمی برای بروز رسانی داده استفاده میکند و همین باعث میشود روش انتخابی برای فیلتر اطلاعات روی سرعت نهایی تاثیر مستقیم داشته باشد.
ترفندهای مختلف جستجو و فیلتر کردن اطلاعات در AngularJS + روش استفاده
در ادامه به بررسی این روش های فیلتر کردن اطلاعات خواهیم پرداخت:
1- فیلتر داخلی AngularJS
سادهترین روش استفاده از فیلتر داخلی است . این روش سبک است و نیازی به کدنویسی بالا ندارد
<ul>
<li ng-repeat="item in items | filter:search / Text">
{{ item }}
</li>
</ul>
مزیت این روش در سادگی آن است اما زمانی که تعداد دادهها افزایش پیدا کند باعث کاهش سرعت میشود.
2- فیلتر کردن یک فیلد مشخص
در بیشتر پروژهها دادهها یک آبجکت کامل هستند. اگر جستجو روی یک فیلد مشخص انجام شود مقدار پردازش کاهش پیدا میکند و سرعت بیشتر میشود.
<li ng-repeat="user in users | filter:query">
{{ user.name }}
</li>
در این روش کنترل روی هدف جستجو و پردازش غیرضروری رخ نمی دهد.
3- فیلتر سفارشی برای جستجوهای پیشرفته
فیلتر سفارشی کاربردی دارد که چه ساختاری پیچیده باشد یا چه نیاز به منطقی دقیق تری داشته باشید. در پروژههای بزرگ معمولاً با دادههایی روبهرو هستند که شامل اطلاعات چندبخشی هستند.
app.filter('nameLength', function() {
return function(items, min) {
return items.filter(function(item) {
return item.name.length >= min;
});
};
});
این روش مناسب زمانی است که نیاز به شرایط ترکیبی و پیچیده دارید.
بهترین روش فیلتر کردن اطلاعات در کنترلر (متد 2025)
برنامه سیستم برای یک سیستم پایدار و سریع این است که تمام منطق را از بخش نمایش جدا و کنترلر اجرا می کند. این کار باعث سبک شدن صفحه میشود و پردازش فقط زمانی انجام میشود که مقدار ورودی تغییر میکند.
$scope.filterUsers = function() {
var key = $scope.search.toLowerCase();
$scope.filtered = $scope.users.filter(function(user) {
return user.name.toLowerCase().includes(key);
});
};
این روش در پروژههایی که تعداد آنها بیشتر است، بهترین عملکرد را ایجاد میکند.
1- طراحی فیلتر چندگانه در یک مثال واقعی
درهای معمولی چند سیستمی که باید میشود. برای مثال فیلتر نام فعالیت کاربر، نقش کاربری، وضعیت و ایمیل.
$scope.applyFilters = function() {
var s = $scope.search.toLowerCase();
$scope.filtered = $scope.users.filter(function(user) {
var matchName = user.name.toLowerCase().includes(s);
var matchRole = !$scope.role || user.role === $scope.role;
var matchStatus = $scope.active === "" || user.active == $scope.active;
var matchEmail = !$scope.email || user.email.toLowerCase().includes($scope.email.toLowerCase());
return matchName && matchRole && matchStatus && matchEmail;
});
};
در این ساختار هر شرط به طور کلی بررسی میشود و نتیجه در قالب یک لیست جدید قرار میگیرد. این روش در سیستم های مدیریتی، پنل فروشگاه ها و بخش گزارش گیری بسیار کاربردی است.
خطاهای رایج در جستجو و فیلتر در AngularJS
در بسیاری از پروژهها مشکلات عملکردی به دلیل استفاده نادرست از برخی الگوها اتفاق میافتد . به چند مورد توجه کنید:
- استفاده مستقیم از فیلتر داخلی در ng-repeat برای داده های زیاد
- اجرای فیلتر در هر تغییر کوچک صفحه
- استفاده از فیلتر روی کل آبجکت به جای یک فیلد
- ساخت فیلترهای سفارشی بدون توجه به مصرف پردازشی
- بدون کش نگه داشتن نتایج
با رعایت این موارد میتوان AngularJS را حتی در پروژههای سنگین بهینه نگه داشت.
نمونه واقعی بهبود سرعت در یک پروژه سازمانی:
در یک سیستم ثبت سفارش که روزانه چند هزار رکورد میشود، فیلتر داخلی AngularJS باعث میشود صفحه چهار تا پنج سال طول بکشد. با انتقال منطق جستجو به کنترلر و ذخیره نتایج در یک آرایه جداگانه، سرعت صفحه به کمتر از نیم ثانیه رسید . این تجربه نشان داد که یک روش درست را انتخاب کرد، حتی بدون تغییر فریمورک، تأثیر زیادی در کارایی پروژه دارد.
نتیجه گیری
AngularJS هنوز بسیاری از پروژههای زنده است و به همین دلیل آشنایی با روشهای بهینه برای جستجو و فیلتر اطلاعات مهم وجود دارد. انتخاب روش درست میتواند عملکرد سیستم را بهتر کند. روشهای داخلی برای آموزش و پروژههای کوچک، اما برای سیستمهایی با دادههای زیاد، بهترین روش انجام فیلترینگ در کنترلر هستند.
اگر قصد دارید پروژه خود را ارتقا دهید یا عملکرد آن را بهتر انجام دهید، اجرای نکات گفته شده در این مقاله میتواند بهترین نقطه شروع باشد.
