Virtual List (ভার্চুয়াল লিস্ট) হল Framework7-এর একটি দক্ষ UI কম্পোনেন্ট, যা অসংখ্য আইটেম বিশিষ্ট বড় লিস্ট অত্যন্ত দ্রুত এবং কার্যকরভাবে রেন্ডার করতে সহায়তা করে। সাধারণত লিস্টে হাজার হাজার আইটেম থাকলে DOM এ সমস্ত আইটেম একসাথে রেন্ডার করা পারফরম্যান্স এবং মেমোরির উপর বিরূপ প্রভাব ফেলে। Virtual List কৌশলগতভাবে কেবল দৃশ্যমান আইটেমগুলো রেন্ডার করে, অন্য আইটেমগুলো ভার্চুয়ালি হিসেব করে স্ক্রলিং এর সাথে সাথে ডায়নামিকভাবে DOM এ যুক্ত বা সরিয়ে ফেলে। এর ফলে বড় মাপের লিস্ট অত্যন্ত স্মুথ স্ক্রলিং এবং উন্নত পারফরম্যান্স নিয়ে উপস্থাপন করা যায়।
Virtual List কীভাবে কাজ করে
Virtual List মূলত একটি ইন্টেলিজেন্ট লিস্ট রেন্ডারিং মেকানিজম, যা স্ক্রল পজিশন অনুযায়ী বর্তমানে দৃশ্যমান আইটেমগুলো DOM এ দেখায় এবং অদৃশ্য আইটেমগুলো DOM থেকে সরিয়ে রাখে। যখন ব্যবহারকারী লিস্ট স্ক্রল করেন, Virtual List তখন নতুন আইটেমগুলো DOM এ যোগ করে এবং পুরনো অদৃশ্য আইটেমগুলো সরিয়ে দেয়। এতে করে DOM সবসময় সীমিত সংখ্যক এলিমেন্ট ধারণ করে, যা মেমোরি অপ্টিমাইজ করে এবং পারফরম্যান্স বৃদ্ধি করে।
Virtual List এর প্রধান বৈশিষ্ট্য
- পারফরম্যান্স উন্নতকরণ: হাজার হাজার আইটেম বিশিষ্ট লিস্ট স্ক্রল করলে অনেক সময় ল্যাগ করতে পারে। Virtual List কেবল দৃশ্যমান আইটেম রেন্ডার করে স্ক্রলিংকে স্মুথ রাখে।
- কম মেমোরি ব্যবহার: পুরনো অদৃশ্য আইটেমগুলো সরিয়ে রেখে DOM ছোট রাখা হয়, ফলে কম মেমোরি ব্যবহৃত হয়।
- সহজ ইমপ্লিমেন্টেশন: Framework7 এ Virtual List তৈরি করা সহজ, শুধু কনফিগারেশন এবং কিছু অপশন প্রদান করলেই চলে।
Virtual List উদাহরণ
নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে Virtual List ব্যবহার করে হাজার হাজার আইটেম বিশিষ্ট লিস্ট তৈরি করা হবে।
<div class="page">
<div class="page-content">
<div class="list virtual-list"></div>
</div>
</div>
<script>
var app = new Framework7();
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i
});
}
var virtualList = app.virtualList.create({
// Virtual List কন্টেইনার
el: '.virtual-list',
// লিস্টের ডেটা
items: items,
// প্রতিটি আইটেম কিভাবে রেন্ডার হবে
itemTemplate:
'<li>' +
'<a href="#" class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'</a>' +
'</li>',
// আইটেম উচ্চতা (ফিক্সড হলে ভাল)
height: app.theme === 'ios' ? 44 : 48,
});
</script>
উপরের উদাহরণে items অ্যারেতে ১০,০০০ আইটেম আছে। Virtual List কেবল দৃশ্যমান আইটেমগুলো DOM এ রেন্ডার করবে। স্ক্রল করার সময় নতুন আইটেম DOM এ আসবে এবং পুরনো আইটেম DOM থেকে সরিয়ে নেওয়া হবে। এতে স্ক্রলিং হবে দ্রুত ও স্মুথ।
Virtual List ব্যবহারের সুবিধা
- বড় ডেটাসেট সামলানো সহজ: সহজেই কয়েক হাজার আইটেমের লিস্ট তৈরি করা যায়।
- পারফরম্যান্স উন্নয়ন: DOM এ একসাথে সব আইটেম না রেখে কেবল দৃশ্যমান অংশ রেন্ডার করে অ্যাপের পারফরম্যান্স বৃদ্ধি করে।
- স্মুথ ইউজার এক্সপেরিয়েন্স: স্ক্রলিং ল্যাগ কমে আসে, ফলে ব্যবহারকারীদের smoother UX পাওয়া যায়।
Virtual List হল Framework7-এর একটি শক্তিশালী কম্পোনেন্ট, যা বড় আকারের লিস্ট পরিচালনা ও প্রদর্শন করার জন্য আদর্শ। এর মাধ্যমে আপনি খুব সহজে অসংখ্য আইটেম বিশিষ্ট লিস্টে উন্নত পারফরম্যান্স ও ব্যবহারকারী অভিজ্ঞতা নিশ্চিত করতে পারবেন।
Read more
