Utility Functions

Utility Functions কি?

Utility functions হল এমন ফাংশন যেগুলি সাধারণ কার্যক্রম বা কাজগুলো সহজ এবং দ্রুত সম্পন্ন করতে ব্যবহৃত হয়। Underscore.js এই ধরনের বেশ কিছু শক্তিশালী utility functions প্রদান করে যা ডেভেলপারদের বিভিন্ন সাধারণ কাজ যেমন ডেটা ম্যানিপুলেশন, ক্যালকুলেশন, ফাংশনাল প্রোগ্রামিং এবং সিস্টেম কোডিং আরও সহজ করে তোলে।

Underscore.js-এ utility functions-এর মাধ্যমে আপনি কোডকে আরও সহজ এবং দ্রুত করতে পারেন, এবং এটি অনেক সাধারণ কাজকে অটোমেট করতে সহায়তা করে।

কিছু গুরুত্বপূর্ণ Utility Functions

১. _.identity()

এই ফাংশনটি একটি ফাংশনকে রিটার্ন করে যা ইনপুট হিসেবে যেকোনো আর্গুমেন্ট নেয় এবং সেই আর্গুমেন্টটিকে অপরিবর্তিত রেখে রিটার্ন করে। এটি মূলত একটি "ডামি" ফাংশন হিসেবে কাজ করে।

উদাহরণ:

const identity = _.identity;
console.log(identity(5));  // 5
console.log(identity("Hello, World!"));  // "Hello, World!"

ব্যবহার: এটা সাধারণত ডিফল্ট ভ্যালু প্রদান করতে ব্যবহার করা হয়।

২. _.constant()

এই ফাংশনটি একটি ভ্যালু রিটার্ন করে যা সমস্ত কলের জন্য একটি নির্দিষ্ট মান রিটার্ন করবে। অর্থাৎ, এটি একটি কনস্ট্যান্ট ভ্যালু প্রদান করে।

উদাহরণ:

const getConstant = _.constant(42);
console.log(getConstant());  // 42
console.log(getConstant());  // 42

ব্যবহার: আপনি যখন চাইবেন যে একটি ফাংশন সর্বদা একই ভ্যালু রিটার্ন করবে, তখন এটি ব্যবহার করতে পারেন।

৩. _.noop()

_.noop() হল একটি ফাংশন যা কিছুই করে না এবং কোনো রিটার্ন ভ্যালু প্রদান করে না। এটি সাধারণত কোনো ফাংশন প্যারামিটার হিসেবে পাঠানোর জন্য ব্যবহার করা হয় যেখানে কোনো কাজের প্রয়োজন নেই।

উদাহরণ:

_.noop();  // কোন কিছুই রিটার্ন করবে না

ব্যবহার: এটি সাধারণত ব্যবহার করা হয় যেখানে একটি কলব্যাক ফাংশন প্রয়োগ করা হয় কিন্তু বাস্তবিক কোনো কাজ করার প্রয়োজন হয় না।

৪. _.times()

এই ফাংশনটি একটি নির্দিষ্ট সংখ্যক বার একটি ফাংশন চালায় এবং রিটার্ন করে। এটি সাধারণত লুপিং বা রিপিটিভ কাজ করার জন্য ব্যবহৃত হয়।

উদাহরণ:

_.times(3, function(n) {
  console.log('Hello, World!', n + 1);
});
// Output:
// Hello, World! 1
// Hello, World! 2
// Hello, World! 3

ব্যবহার: এটি আপনি যখন একটি কাজ নির্দিষ্ট সংখ্যক বার করতে চান তখন ব্যবহার করতে পারেন।

৫. _.random()

এই ফাংশনটি একটি র‍্যান্ডম সংখ্যা তৈরি করে। আপনি একটি নির্দিষ্ট রেঞ্জ বা সীমা নির্ধারণ করে র‍্যান্ডম সংখ্যা পেতে পারেন।

উদাহরণ:

console.log(_.random(1, 100));  // 42 (random number between 1 and 100)
console.log(_.random(100));     // 57 (random number between 0 and 100)
console.log(_.random());        // Random number between 0 and 1

ব্যবহার: এটি র‍্যান্ডম সংখ্যা জেনারেট করতে বা কোনো এক্সপেরিমেন্ট বা গেমে ব্যবহার করা যেতে পারে।

৬. _.uniqueId()

এই ফাংশনটি একটি ইউনিক আইডি জেনারেট করে যা আপনি বিভিন্ন কাজে, যেমন আইটেমের আইডি তৈরি করতে ব্যবহার করতে পারেন। আপনি একটি প্রিফিক্স (prefix) দিয়েও আইডি তৈরি করতে পারেন।

উদাহরণ:

console.log(_.uniqueId('user_'));  // user_1
console.log(_.uniqueId('order_')); // order_2

ব্যবহার: ইউনিক আইডি তৈরি করতে যা কিনা ডাটা ট্র্যাকিং বা ডাইনামিক এলিমেন্টগুলো সনাক্ত করতে সহায়তা করে।

৭. _.escape()

এই ফাংশনটি একটি স্ট্রিং থেকে বিশেষ HTML ক্যারেক্টারগুলি এস্যকেপ (escape) করে, যাতে এটি ওয়েব পেজে সঠিকভাবে প্রদর্শিত হয়।

উদাহরণ:

console.log(_.escape('<div>Hello World!</div>'));
// Output: "<div>Hello World!</div>"

ব্যবহার: এটি HTML স্ট্রিংকে সেফ করে প্রদর্শন করার জন্য ব্যবহার করা হয় যাতে নিরাপত্তা সমস্যাগুলি এড়ানো যায়।

Underscore.js এর Utility Functions এর ব্যবহার

Underscore.js এর Utility Functions সাধারণত কোডকে আরও পরিষ্কার, সহজ এবং পাঠযোগ্য করতে সাহায্য করে। এগুলি এমন ফাংশন যা কোডে সাধারণ কাজ দ্রুত এবং কার্যকরীভাবে করার জন্য ব্যবহার করা যায়। উদাহরণস্বরূপ:

• _.identity(): কোডের ভিতরে ডিফল্ট মান সেট করা অথবা ডাটা প্রক্রিয়াকরণের জন্য ফাংশন ব্যবহার করা।
• _.constant(): একক ভ্যালু ব্যবহারের জন্য যখন একটি নির্দিষ্ট ফলাফল প্রত্যাশিত থাকে।
• _.noop(): যেখানে কোনও কাজের প্রয়োজন নেই বা নির্দিষ্ট কাজটি না করলেও চলবে।
• _.random(): যখন র‍্যান্ডম সংখ্যা তৈরি করতে হয় যেমন গেমের জন্য বা পরীক্ষার জন্য।
• _.uniqueId(): যে ক্ষেত্রে ইউনিক আইডি প্রয়োজন, যেমন ডায়নামিক আইডি জেনারেশন।

সারাংশ

Underscore.js এর Utility Functions আপনাকে অনেক সাধারণ এবং প্রতিদিনের কাজগুলো দ্রুত, সহজ এবং কার্যকরভাবে করার সুযোগ প্রদান করে। এই ফাংশনগুলি ব্যবহার করে আপনি আপনার কোডকে আরো পরিষ্কার, সংক্ষিপ্ত এবং পুনঃব্যবহারযোগ্য করতে পারবেন। Underscore.js Functional Programming কৌশলগুলোকে সাপোর্ট করে এবং JavaScript-এ সাধারিত কাজগুলো দ্রুত সমাধান করতে সহায়তা করে।

_.identity ফাংশন

_.identity() একটি ফাংশনাল ফাংশন যা সরাসরি যে কোনো ইনপুট ভ্যালু রিটার্ন করে। এটি একেবারে সরল একটি ফাংশন এবং শুধুমাত্র একটি ভ্যালু আর্গুমেন্ট হিসেবে গ্রহণ করে এবং ঐ ভ্যালুকে ফিরিয়ে দেয়। এটি মূলত ফাংশনাল প্রোগ্রামিংয়ে কিছু জায়গায় ব্যবহৃত হয় যেখানে আপনি কোনো পরিবর্তন ছাড়াই মানটি রিটার্ন করতে চান।

উদাহরণ:

var value = _.identity(5);
console.log(value); // 5

এখানে, _.identity(5) সরাসরি 5 রিটার্ন করেছে, কারণ এটি ইনপুটের কোন পরিবর্তন করে না।

আরও উদাহরণ:

var result = _.identity('Hello, World!');
console.log(result); // 'Hello, World!'

এই ফাংশনটি একেবারে সহজ, তবে এর কার্যকারিতা অনেক জায়গায় বিশেষভাবে দরকারি হতে পারে, যেমন ডিফল্ট ভ্যালু অথবা ফাংশনাল প্রোগ্রামিং এ বিভিন্ন প্রসেসে এক্সপ্লিসিট রিটার্ন মান ব্যবহার করতে।

_.constant ফাংশন

_.constant() একটি ফাংশনাল ফাংশন যা একটি নির্দিষ্ট মান রিটার্ন করে। এই ফাংশনটির মাধ্যমে আপনি একটি নির্দিষ্ট মান রিটার্ন করতে সক্ষম হন, যা ফাংশন কল করার পরেও পরিবর্তন হয় না। এটি একটি ফাংশন রিটার্ন করে যা প্রতিবার কল করা হলে একটি নির্দিষ্ট মান প্রদান করে।

উদাহরণ:

var alwaysFive = _.constant(5);
console.log(alwaysFive()); // 5
console.log(alwaysFive()); // 5

এখানে, alwaysFive একটি ফাংশন, যা যে কোনো সময় কল করলেই 5 রিটার্ন করবে। এটি তার মধ্যে নির্দিষ্ট করা মানের মতোই কাজ করবে।

আরও উদাহরণ:

var greetMessage = _.constant('Hello, Underscore!');
console.log(greetMessage()); // 'Hello, Underscore!'
console.log(greetMessage()); // 'Hello, Underscore!'

এই ফাংশনটি ইউটিলিটি হিসেবে ব্যবহৃত হতে পারে যেখানে একটি নির্দিষ্ট মানের জন্য ফাংশন ব্যবহার করতে হয় এবং সেই মান বার বার দরকার।

_.identity এবং _.constant এর মধ্যে পার্থক্য

সারাংশ

• _.identity(): এটি যে কোন মান রিটার্ন করে যা আপনি ফাংশনের আর্গুমেন্ট হিসেবে প্রদান করেন।
• _.constant(): এটি একটি ফাংশন রিটার্ন করে যা শুধুমাত্র একটি নির্দিষ্ট মান রিটার্ন করে, অর্থাৎ সেই মানটি কখনোই পরিবর্তিত হয় না।

এ দুটি ফাংশনই সাধারণত ফাংশনাল প্রোগ্রামিংয়ের বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয় এবং কোডের কাজ সহজ ও কার্যকরী করতে সহায়তা করে। _.identity() সাধারণত কোনো মানের পরিবর্তন ছাড়াই রিটার্ন করার জন্য ব্যবহৃত হয়, এবং _.constant() একটি নির্দিষ্ট মান রিটার্ন করতে ব্যবহৃত হয়, যা একই মান প্রতিবার প্রদান করে।

Underscore.js - _.times ফাংশন

_.times ফাংশনটি Underscore.js লাইব্রেরির একটি গুরুত্বপূর্ণ ফাংশন, যা একটি নির্দিষ্ট সংখ্যক বার কোনো ফাংশন চালানোর জন্য ব্যবহৃত হয়। এই ফাংশনটি একটি নম্বর এবং একটি কন্ট্রোল ফাংশন নেয়, এবং এটি যতবার বলা হয় ততবার সেই ফাংশনটি কার্যকর করে। এর মাধ্যমে সহজে নির্দিষ্ট সংখ্যক বার একটি কাজ সম্পাদন করা যায়, যা সাধারণত লুপ ব্যবহার করে করা হয়।

_.times ফাংশনের সিনট্যাক্স

_.times(n, function(iteration) {
  // কোড যা প্রতি লুপে চলবে
});

• n: এটি একটি প্যারামিটার যা নির্ধারণ করে কতবার ফাংশনটি চালানো হবে।
• iteration: এটি ঐ পদ্ধতিতে দেওয়া একটি প্যারামিটার, যা প্রতিটি লুপের জন্য একটি সংখ্যা (ইটারেশন সংখ্যা) হিসেবে কাজ করে। এটি সাধারণত 0 থেকে n-1 পর্যন্ত মান থাকে।

উদাহরণ ১: _.times দিয়ে সিম্পল লুপ তৈরি

ধরা যাক, আপনি একটি কাজ করতে চান যা 5 বার চলবে এবং প্রতিবারই একটি মেসেজ কনসোল লগ করবে।

// Underscore.js এর _.times ফাংশন ব্যবহার করে 5 বার লুপ চালানো
_.times(5, function(i) {
  console.log('This is iteration number ' + (i + 1));
});

এখানে, _.times(5, ...) 5 বার লুপ চালাবে এবং প্রতি লুপে i মানে ইটারেশন নম্বর দেওয়া হবে (0 থেকে 4 পর্যন্ত)। কনসোলের আউটপুট হবে:

This is iteration number 1
This is iteration number 2
This is iteration number 3
This is iteration number 4
This is iteration number 5

উদাহরণ ২: _.times দিয়ে একটি অ্যারে তৈরি করা

ধরা যাক, আমরা একটি অ্যারে তৈরি করতে চাই যা 10টি এলিমেন্ট ধারণ করবে এবং প্রতিটি এলিমেন্টে এলোমেলো সংখ্যা থাকবে। এর জন্য _.times ফাংশন ব্যবহার করা যেতে পারে।

// 10টি এলোমেলো সংখ্যা সহ একটি অ্যারে তৈরি করা
var randomNumbers = [];
_.times(10, function() {
  randomNumbers.push(Math.floor(Math.random() * 100)); // 0 থেকে 99 পর্যন্ত এলোমেলো সংখ্যা
});

console.log(randomNumbers);

এখানে, _.times(10, ...) 10 বার লুপ চালায় এবং প্রতিবার একটি এলোমেলো সংখ্যা উৎপন্ন করে, যেটি অ্যারেতে পুশ করা হয়। আউটপুট একটি এলোমেলো সংখ্যার অ্যারে হবে:

[23, 67, 54, 89, 12, 34, 90, 56, 43, 75]

উদাহরণ ৩: _.times ব্যবহার করে টেবিলের সারি তৈরি

ধরা যাক, আমরা একটি টেবিলের জন্য কিছু সারি তৈরি করতে চাই। এর জন্য _.times ব্যবহার করে সারি তৈরি করা যেতে পারে:

// একটি টেবিল তৈরি করতে _.times ব্যবহার করা
var tableHTML = '<table border="1">';
_.times(5, function(i) {
  tableHTML += '<tr><td>Row ' + (i + 1) + '</td></tr>';
});
tableHTML += '</table>';

document.body.innerHTML = tableHTML;

এখানে, _.times(5, ...) 5 বার লুপ চালাবে এবং প্রতিবার একটি নতুন <tr> ট্যাগ তৈরি করবে, যেখানে সারির সংখ্যা প্রতিবার বাড়বে। এই কোডের আউটপুট হবে একটি টেবিল যার 5টি সারি থাকবে।

উদাহরণ ৪: _.times ব্যবহার করে ফাংশনালিটি পুনরাবৃত্তি করা

ধরা যাক, আপনি একটি ফাংশন ব্যবহার করে কিছু কাজ করতে চান এবং সেই কাজটি নির্দিষ্ট সংখ্যক বার চলবে। এর জন্য _.times ব্যবহার করা যেতে পারে।

// একটি কাজ (যেমন প্রিন্ট) 3 বার চালানো
function repeatAction() {
  console.log('Action performed!');
}

_.times(3, repeatAction);

এখানে, _.times(3, repeatAction) ফাংশনটি 3 বার চলবে এবং প্রতিবার কনসোলে "Action performed!" মেসেজটি প্রদর্শন করবে।

সারাংশ

_.times ফাংশনটি Underscore.js এর একটি শক্তিশালী টুল যা নির্দিষ্ট সংখ্যক বার একটি ফাংশন চালানোর জন্য ব্যবহৃত হয়। এটি আপনাকে সিম্পল লুপ বা রিপিটেড কার্যক্রম খুব সহজেই সম্পাদন করতে সহায়তা করে। অ্যারে তৈরি, অবজেক্ট প্রক্রিয়াকরণ, এবং বিভিন্ন ধরনের লুপ কন্ট্রোলের জন্য _.times ফাংশনটি একটি কার্যকরী সমাধান হতে পারে।

_.escape এবং _.unescape কি?

_.escape এবং _.unescape হল Underscore.js এর দুটি গুরুত্বপূর্ণ ফাংশন যা স্ট্রিং সিকিউরিটি নিশ্চিত করতে সাহায্য করে, বিশেষ করে HTML কনটেন্টের ক্ষেত্রে। এগুলি HTML ইনপুটগুলির সঠিকভাবে প্রক্রিয়া করা এবং সিকিউরিটি নিশ্চিত করার জন্য ব্যবহৃত হয়।

• _.escape: এটি স্ট্রিংয়ের স্পেশাল ক্যারেক্টারগুলো যেমন <, >, &, ", ' ইত্যাদি HTML entities হিসেবে কনভার্ট করে। এটি XSS (Cross-Site Scripting) আক্রমণ প্রতিরোধে সাহায্য করে, যেহেতু HTML স্পেশাল ক্যারেক্টারগুলো কনভার্ট করার মাধ্যমে ব্রাউজার তাদেরকে কোড হিসেবে এক্সিকিউট করতে পারে না।
• _.unescape: এটি _.escape দ্বারা কনভার্ট করা HTML entities গুলোকে তাদের আসল ক্যারেক্টারে পুনরায় কনভার্ট করে। এটি স্ট্রিংকে পুনরায় আগের অবস্থায় ফিরিয়ে আনে, যেখানে HTML entities প্রক্রিয়া করা হয়নি।

_.escape ব্যবহার

_.escape ফাংশনটি HTML কোডে ইনপুট ভ্যালিডেশন এবং সিকিউরিটি নিশ্চিত করার জন্য ব্যবহৃত হয়। এটি ইউজারের ইনপুটে যেকোনো HTML স্পেশাল ক্যারেক্টার কনভার্ট করে, যাতে এগুলি ওয়েবপেজে নিরাপদভাবে প্রদর্শিত হয় এবং কোনো স্ক্রিপ্ট এক্সিকিউট না হয়।

উদাহরণ:

let unsafeString = '<div class="alert">Hello, <strong>world!</strong></div>';
let safeString = _.escape(unsafeString);

console.log(safeString);
// Output: <div class="alert">Hello, <strong>world!</strong></div>

এখানে, unsafeString এ HTML ট্যাগ এবং স্পেশাল ক্যারেক্টারগুলো রয়েছে। _.escape() ফাংশনটি এসব ক্যারেক্টারগুলোকে HTML entities এ কনভার্ট করে, যেমন < কনভার্ট হয়ে < হয়ে যায় এবং " কনভার্ট হয়ে " হয়ে যায়। এর ফলে, এই স্ট্রিংটি ওয়েব পেজে নিরাপদভাবে প্রদর্শিত হয় এবং HTML বা JavaScript কোড হিসেবে এক্সিকিউট হয় না।

কেন ব্যবহার করবেন?

• XSS আক্রমণ প্রতিরোধ: ব্যবহারকারীদের ইনপুট থেকে যেকোনো স্ক্রিপ্ট কোড বা HTML এর মধ্যে ইনজেকশনের চেষ্টাকে প্রতিরোধ করা।
• সিকিউরিটি: ওয়েব পৃষ্ঠায় নিরাপদভাবে ইউজারের কন্টেন্ট প্রদর্শন করা, বিশেষ করে যেখানে ব্যবহারকারী HTML ইনপুট বা ট্যাগস প্রদান করে।

_.unescape ব্যবহার

_.unescape ফাংশনটি HTML entities কে তাদের আসল ক্যারেক্টারে রূপান্তরিত করে। যখন আপনি HTML entities escape করে শো করতে চান, তবে এই ফাংশনটি তাদের পুনরায় আসল রূপে ফিরিয়ে আনে।

উদাহরণ:

let escapedString = '<div class="alert">Hello, <strong>world!</strong></div>';
let originalString = _.unescape(escapedString);

console.log(originalString);
// Output: <div class="alert">Hello, <strong>world!</strong></div>

এখানে, escapedString এ HTML entities কনভার্ট করা স্ট্রিং রয়েছে। _.unescape() এই HTML entities গুলোকে তাদের আসল ক্যারেক্টারে পুনরায় কনভার্ট করে, যেমন < কনভার্ট হয়ে < এবং " কনভার্ট হয়ে " হয়ে যায়।

কেন ব্যবহার করবেন?

• HTML কনটেন্ট পুনঃপ্রক্রিয়া: যদি কোনো অ্যাপ্লিকেশন HTML entities কনভার্ট করে থাকে, তবে সেগুলোকে আসল ফর্মে ফেরত পাওয়ার জন্য _.unescape ব্যবহার করা হয়।
• সঠিক ডেটা রেন্ডারিং: ব্যবহারকারীর ইনপুট পুনরায় সম্পূর্ণরূপে HTML হিসেবে রেন্ডার করতে সাহায্য করে।

_.escape এবং _.unescape এর মধ্যে পার্থক্য

সারাংশ

_.escape এবং _.unescape হল Underscore.js এর দুটি শক্তিশালী ফাংশন, যা স্ট্রিং সিকিউরিটি এবং HTML ইনপুট প্রক্রিয়াকরণে ব্যবহৃত হয়। _.escape ব্যবহারকারীর ইনপুট থেকে HTML স্পেশাল ক্যারেক্টারগুলোকে নিরাপদ HTML entities-এ কনভার্ট করে, যা XSS আক্রমণ প্রতিরোধে সাহায্য করে। অন্যদিকে, _.unescape HTML entities-কে তাদের আসল ফর্মে ফিরিয়ে আনে, যাতে কনটেন্ট সঠিকভাবে প্রদর্শিত হয়। এই দুটি ফাংশন স্ট্রিং সিকিউরিটি এবং সঠিক ডেটা প্রক্রিয়াকরণ নিশ্চিত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

_.template কি?

_.template হল Underscore.js এর একটি ফাংশন যা ডাইনামিক HTML টেমপ্লেট তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি টেমপ্লেট স্ট্রিং নেয়ার মাধ্যমে ডেটা ইনজেক্ট করে একটি HTML ব্লক তৈরি করতে সাহায্য করে। _.template JavaScript-এর অবজেক্ট বা ভেরিয়েবলের মান টেমপ্লেটের মধ্যে ইনজেক্ট করে এবং এটি ডাইনামিকভাবে HTML উৎপন্ন করে।

এই ফাংশনটি খুবই শক্তিশালী, কারণ এটি একদিকে যেখানে সাধারণ HTML কন্টেন্ট তৈরি করতে ব্যবহৃত হয়, অন্যদিকে এটি ডাটা ম্যানিপুলেশন এবং কন্ডিশনাল রেন্ডারিংয়ের মতো জটিল কার্যক্রমগুলোও সমর্থন করে।

_.template এর মৌলিক কাঠামো

_.template ফাংশনটি একটি টেমপ্লেট স্ট্রিং এবং ডাটা অবজেক্ট নেয় এবং একটি ফাংশন রিটার্ন করে যা রেন্ডারিং প্রক্রিয়া পরিচালনা করে। এই রেন্ডারিং ফাংশনটি পরে ডেটা দিয়ে কল করলে এটি একটি সম্পূর্ণ HTML স্ট্রিং রিটার্ন করবে।

সিনট্যাক্স:

_.template(templateString, [settings]);

• templateString: এটি একটি স্ট্রিং যা HTML টেমপ্লেট ধারণ করে, এবং এর মধ্যে ডাইনামিক ডেটা যোগ করার জন্য প্লেসহোল্ডার থাকবে।
• settings: (ঐচ্ছিক) ডিফল্ট সেন্টিংস পরিবর্তন করার জন্য কনফিগারেশন অবজেক্ট।

_.template ব্যবহার করে টেমপ্লেট জেনারেট করা

Underscore.js-এর _.template ব্যবহার করে ডাইনামিক HTML টেমপ্লেট তৈরি করতে আপনি নিচের পদক্ষেপগুলো অনুসরণ করতে পারেন:

১. টেমপ্লেট স্ট্রিং তৈরি করা

প্রথমে একটি টেমপ্লেট স্ট্রিং তৈরি করতে হবে যা HTML এর সাথে ডাইনামিক ডেটা সন্নিবেশ করবে।

২. টেমপ্লেট কম্পাইল করা

_.template ফাংশন ব্যবহার করে টেমপ্লেট স্ট্রিংটি কম্পাইল করে একটি ফাংশনে পরিণত করতে হবে।

৩. ডেটা প্রদান করা

একটি অবজেক্ট বা ভেরিয়েবল দিয়ে কম্পাইল করা ফাংশনটি কল করুন এবং ডাইনামিক ডেটা ইনজেক্ট করুন।

উদাহরণ

ধরা যাক, আপনার কাছে একটি ওয়েবসাইটের জন্য টেমপ্লেট তৈরি করতে হবে যেখানে ব্যবহারকারীর নাম এবং বয়স দেখানো হবে।

টেমপ্লেট স্ট্রিং:

<script type="text/template" id="user-template">
  <h2>Hello, <%= name %>!</h2>
  <p>You are <%= age %> years old.</p>
</script>

JavaScript কোড:

// Underscore.js টেমপ্লেট স্ট্রিং নেয় এবং একটি ফাংশন রিটার্ন করে
var templateString = document.getElementById('user-template').innerHTML;

// টেমপ্লেট কম্পাইল করা
var template = _.template(templateString);

// ডেটা অবজেক্ট
var data = {
  name: 'Alice',
  age: 30
};

// টেমপ্লেট ফাংশন কল করে HTML রেন্ডার করা
var html = template(data);

// HTML যোগ করা
document.body.innerHTML = html;

আউটপুট:

<h2>Hello, Alice!</h2>
<p>You are 30 years old.</p>

এখানে, _.template ব্যবহার করে templateString নামক টেমপ্লেটটি কম্পাইল করা হয়েছে। এরপর, data অবজেক্টের মাধ্যমে ডেটা ইনজেক্ট করা হয়েছে এবং ফাইনাল HTML রেন্ডার করা হয়েছে।

_.template এ প্লেসহোল্ডার ব্যবহারের উদাহরণ

_.template এ প্লেসহোল্ডার হিসেবে <%= %> ব্যবহার করা হয়। প্লেসহোল্ডারে ডেটা ইনজেক্ট করার জন্য আপনি JavaScript অবজেক্ট থেকে ডেটা উল্লেখ করবেন।

উদাহরণ:

var templateString = "Hello, <%= name %>! You are <%= age %> years old.";
var template = _.template(templateString);

var data = {
  name: "Bob",
  age: 25
};

var result = template(data);
console.log(result); // "Hello, Bob! You are 25 years old."

এখানে, <%= name %> এবং <%= age %> হল প্লেসহোল্ডার, যেখানে data অবজেক্টের ডেটা ইনজেক্ট করা হয়েছে।

কন্ডিশনাল প্লেসহোল্ডার এবং লুপিং

Underscore.js টেমপ্লেটে কন্ডিশনাল স্টেটমেন্ট এবং লুপ ব্যবহারের সুবিধাও রয়েছে।

১. কন্ডিশনাল স্টেটমেন্ট

var templateString = "<% if (age >= 18) { %>You are an adult.<% } else { %>You are a minor.<% } %>";
var template = _.template(templateString);

var data = { age: 20 };

var result = template(data);
console.log(result); // "You are an adult."

২. লুপ

var templateString = "<ul><% _.each(names, function(name) { %><li><%= name %></li><% }); %></ul>";
var template = _.template(templateString);

var data = { names: ["Alice", "Bob", "Charlie"] };

var result = template(data);
console.log(result); // <ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

এখানে, আমরা _.each ব্যবহার করে একটি অ্যারে লুপ করছি এবং প্রতিটি নামকে HTML তালিকায় রেন্ডার করছি।

_.template এ কাস্টম ডেলিমিটার

By default, Underscore.js টেমপ্লেটে <%= %> ডেলিমিটার ব্যবহার করা হয়, তবে আপনি চাইলে কাস্টম ডেলিমিটারও ব্যবহার করতে পারেন।

উদাহরণ:

var templateString = "Hello, {{name}}!";
var customTemplate = _.template(templateString, { interpolate: /{{([\s\S]+?)}}/g });

var data = { name: "Alice" };

var result = customTemplate(data);
console.log(result); // "Hello, Alice!"

এখানে, আমরা কাস্টম ডেলিমিটার {{}} ব্যবহার করেছি এবং interpolate অপশন দিয়ে এটি সেট করেছি।

সারাংশ

Underscore.js এর _.template ফাংশনটি ডাইনামিক HTML টেমপ্লেট তৈরি করতে ব্যবহৃত হয়। এটি HTML স্ট্রিং এবং ডেটা ইনজেক্ট করার জন্য প্লেসহোল্ডার ব্যবহার করে, এবং ব্যবহারকারী-নির্দিষ্ট ডেটার উপর ভিত্তি করে একটি নতুন HTML স্ট্রিং রেন্ডার করে। _.template টেমপ্লেট স্ট্রিংয়ে কন্ডিশনাল স্টেটমেন্ট, লুপ, এবং কাস্টম ডেলিমিটারও সমর্থন করে, যা ডাইনামিক ওয়েব পেজ তৈরি করতে খুবই কার্যকরী।

_.template কি?

_.template হল Underscore.js এর একটি ফাংশন যা ডাইনামিক HTML টেমপ্লেট তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি টেমপ্লেট স্ট্রিং নেয়ার মাধ্যমে ডেটা ইনজেক্ট করে একটি HTML ব্লক তৈরি করতে সাহায্য করে। _.template JavaScript-এর অবজেক্ট বা ভেরিয়েবলের মান টেমপ্লেটের মধ্যে ইনজেক্ট করে এবং এটি ডাইনামিকভাবে HTML উৎপন্ন করে।

এই ফাংশনটি খুবই শক্তিশালী, কারণ এটি একদিকে যেখানে সাধারণ HTML কন্টেন্ট তৈরি করতে ব্যবহৃত হয়, অন্যদিকে এটি ডাটা ম্যানিপুলেশন এবং কন্ডিশনাল রেন্ডারিংয়ের মতো জটিল কার্যক্রমগুলোও সমর্থন করে।

_.template এর মৌলিক কাঠামো

_.template ফাংশনটি একটি টেমপ্লেট স্ট্রিং এবং ডাটা অবজেক্ট নেয় এবং একটি ফাংশন রিটার্ন করে যা রেন্ডারিং প্রক্রিয়া পরিচালনা করে। এই রেন্ডারিং ফাংশনটি পরে ডেটা দিয়ে কল করলে এটি একটি সম্পূর্ণ HTML স্ট্রিং রিটার্ন করবে।

সিনট্যাক্স:

_.template(templateString, [settings]);

• templateString: এটি একটি স্ট্রিং যা HTML টেমপ্লেট ধারণ করে, এবং এর মধ্যে ডাইনামিক ডেটা যোগ করার জন্য প্লেসহোল্ডার থাকবে।
• settings: (ঐচ্ছিক) ডিফল্ট সেন্টিংস পরিবর্তন করার জন্য কনফিগারেশন অবজেক্ট।

_.template ব্যবহার করে টেমপ্লেট জেনারেট করা

Underscore.js-এর _.template ব্যবহার করে ডাইনামিক HTML টেমপ্লেট তৈরি করতে আপনি নিচের পদক্ষেপগুলো অনুসরণ করতে পারেন:

১. টেমপ্লেট স্ট্রিং তৈরি করা

প্রথমে একটি টেমপ্লেট স্ট্রিং তৈরি করতে হবে যা HTML এর সাথে ডাইনামিক ডেটা সন্নিবেশ করবে।

২. টেমপ্লেট কম্পাইল করা

_.template ফাংশন ব্যবহার করে টেমপ্লেট স্ট্রিংটি কম্পাইল করে একটি ফাংশনে পরিণত করতে হবে।

৩. ডেটা প্রদান করা

একটি অবজেক্ট বা ভেরিয়েবল দিয়ে কম্পাইল করা ফাংশনটি কল করুন এবং ডাইনামিক ডেটা ইনজেক্ট করুন।

উদাহরণ

ধরা যাক, আপনার কাছে একটি ওয়েবসাইটের জন্য টেমপ্লেট তৈরি করতে হবে যেখানে ব্যবহারকারীর নাম এবং বয়স দেখানো হবে।

টেমপ্লেট স্ট্রিং:

<script type="text/template" id="user-template">
  <h2>Hello, <%= name %>!</h2>
  <p>You are <%= age %> years old.</p>
</script>

JavaScript কোড:

// Underscore.js টেমপ্লেট স্ট্রিং নেয় এবং একটি ফাংশন রিটার্ন করে
var templateString = document.getElementById('user-template').innerHTML;

// টেমপ্লেট কম্পাইল করা
var template = _.template(templateString);

// ডেটা অবজেক্ট
var data = {
  name: 'Alice',
  age: 30
};

// টেমপ্লেট ফাংশন কল করে HTML রেন্ডার করা
var html = template(data);

// HTML যোগ করা
document.body.innerHTML = html;

আউটপুট:

<h2>Hello, Alice!</h2>
<p>You are 30 years old.</p>

এখানে, _.template ব্যবহার করে templateString নামক টেমপ্লেটটি কম্পাইল করা হয়েছে। এরপর, data অবজেক্টের মাধ্যমে ডেটা ইনজেক্ট করা হয়েছে এবং ফাইনাল HTML রেন্ডার করা হয়েছে।

_.template এ প্লেসহোল্ডার ব্যবহারের উদাহরণ

_.template এ প্লেসহোল্ডার হিসেবে <%= %> ব্যবহার করা হয়। প্লেসহোল্ডারে ডেটা ইনজেক্ট করার জন্য আপনি JavaScript অবজেক্ট থেকে ডেটা উল্লেখ করবেন।

উদাহরণ:

var templateString = "Hello, <%= name %>! You are <%= age %> years old.";
var template = _.template(templateString);

var data = {
  name: "Bob",
  age: 25
};

var result = template(data);
console.log(result); // "Hello, Bob! You are 25 years old."

এখানে, <%= name %> এবং <%= age %> হল প্লেসহোল্ডার, যেখানে data অবজেক্টের ডেটা ইনজেক্ট করা হয়েছে।

কন্ডিশনাল প্লেসহোল্ডার এবং লুপিং

Underscore.js টেমপ্লেটে কন্ডিশনাল স্টেটমেন্ট এবং লুপ ব্যবহারের সুবিধাও রয়েছে।

১. কন্ডিশনাল স্টেটমেন্ট

var templateString = "<% if (age >= 18) { %>You are an adult.<% } else { %>You are a minor.<% } %>";
var template = _.template(templateString);

var data = { age: 20 };

var result = template(data);
console.log(result); // "You are an adult."

২. লুপ

var templateString = "<ul><% _.each(names, function(name) { %><li><%= name %></li><% }); %></ul>";
var template = _.template(templateString);

var data = { names: ["Alice", "Bob", "Charlie"] };

var result = template(data);
console.log(result); // <ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

এখানে, আমরা _.each ব্যবহার করে একটি অ্যারে লুপ করছি এবং প্রতিটি নামকে HTML তালিকায় রেন্ডার করছি।

_.template এ কাস্টম ডেলিমিটার

By default, Underscore.js টেমপ্লেটে <%= %> ডেলিমিটার ব্যবহার করা হয়, তবে আপনি চাইলে কাস্টম ডেলিমিটারও ব্যবহার করতে পারেন।

উদাহরণ:

var templateString = "Hello, {{name}}!";
var customTemplate = _.template(templateString, { interpolate: /{{([\s\S]+?)}}/g });

var data = { name: "Alice" };

var result = customTemplate(data);
console.log(result); // "Hello, Alice!"

এখানে, আমরা কাস্টম ডেলিমিটার {{}} ব্যবহার করেছি এবং interpolate অপশন দিয়ে এটি সেট করেছি।

সারাংশ

Underscore.js এর _.template ফাংশনটি ডাইনামিক HTML টেমপ্লেট তৈরি করতে ব্যবহৃত হয়। এটি HTML স্ট্রিং এবং ডেটা ইনজেক্ট করার জন্য প্লেসহোল্ডার ব্যবহার করে, এবং ব্যবহারকারী-নির্দিষ্ট ডেটার উপর ভিত্তি করে একটি নতুন HTML স্ট্রিং রেন্ডার করে। _.template টেমপ্লেট স্ট্রিংয়ে কন্ডিশনাল স্টেটমেন্ট, লুপ, এবং কাস্টম ডেলিমিটারও সমর্থন করে, যা ডাইনামিক ওয়েব পেজ তৈরি করতে খুবই কার্যকরী।