Underscore.js টেমপ্লেটিং কি?
Underscore.js একটি জনপ্রিয় JavaScript লাইব্রেরি, যা ফাংশনাল প্রোগ্রামিং এবং ইউটিলিটি ফাংশন সরবরাহের পাশাপাশি একটি শক্তিশালী টেমপ্লেটিং সিস্টেমও প্রদান করে। এর টেমপ্লেট ফাংশন আপনাকে HTML টেমপ্লেটগুলি ডায়নামিকভাবে তৈরি এবং রেন্ডার করতে সাহায্য করে। এটি কোড এবং কন্টেন্টের মধ্যে একটি শক্তিশালী সংযোগ তৈরি করতে পারে, যাতে আপনার ওয়েব অ্যাপ্লিকেশনগুলি আরও কার্যকর এবং স্কেলেবল হয়।
Underscore.js টেমপ্লেটিং একটি সহজ এবং কার্যকরী উপায়, যা HTML এবং JavaScript ডেটার মধ্যে ডাইনামিক কনটেন্ট প্রয়োগ করতে ব্যবহৃত হয়।
Underscore.js এর টেমপ্লেটিং ফাংশন
Underscore.js টেমপ্লেটিং ফাংশনটি একটি string আর্গুমেন্ট হিসাবে HTML কোড নেয় এবং একটি data object পাঠানোর মাধ্যমে সেই HTML টেমপ্লেটের মধ্যে ডাইনামিক ডেটা ইনজেক্ট করে। এটি মূলত <%= %> সিনট্যাক্স ব্যবহার করে, যেখানে আপনি ভেরিয়েবল এবং এক্সপ্রেশন ইনজেক্ট করতে পারেন।
Underscore.js টেমপ্লেটিং এর মূল ফিচার
- ডায়নামিক ডেটা বেঁধে ফেলা: টেমপ্লেটের মধ্যে ডাইনামিক ডেটা প্রবাহিত করার জন্য Underscore.js এক্সপ্রেশন ব্যবহার করে, যেমন
model.property। - টেমপ্লেটের এক্সপ্রেশন: Underscore.js টেমপ্লেটিং
<%= %>ব্যবহার করে HTML কন্টেন্টের মধ্যে JavaScript এক্সপ্রেশন প্রয়োগ করতে সাহায্য করে। - অফসেট এক্সপ্রেশন:
<%- %>ব্যবহার করে কোডকে HTML-এর ভ্যালিড কনটেন্ট হিসেবে ইনজেক্ট করা যায়, এটি নিরাপদে অপ্রয়োজনীয় কোড স্ট্রিং এক্সপ্রেশনগুলো সরিয়ে দেয়।
Underscore.js টেমপ্লেটিং উদাহরণ
১. মৌলিক টেমপ্লেটিং:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var data = {
name: "John",
age: 30
};
var template = "<h1>Hello, <%= name %>!</h1><p>Your age is: <%= age %></p>";
// Underscore.js টেমপ্লেট কম্পাইল করা হচ্ছে
var compiledTemplate = _.template(template);
// টেমপ্লেট রেন্ডার করা হচ্ছে
document.getElementById('content').innerHTML = compiledTemplate(data);
</script>
</body>
</html>
এখানে, _.template() ব্যবহার করে একটি HTML টেমপ্লেট তৈরি করা হয়েছে, যেখানে <%= %> সিনট্যাক্সের মাধ্যমে ডেটা ইনজেক্ট করা হচ্ছে। এই টেমপ্লেটটি name এবং age প্রপার্টি সহ data অবজেক্টটি ব্যবহার করে রেন্ডার করা হচ্ছে।
২. নিরাপদ HTML ইনজেকশন (Escaping HTML):
Underscore.js এর <%- %> সিনট্যাক্স ব্যবহার করে আপনি HTML ইনজেকশন থেকে রক্ষা পেতে পারেন, যা কিছু HTML স্পেশাল ক্যারেক্টারকে এনকোড করে।
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var data = {
userInput: "<script>alert('XSS Attack');</script>"
};
var template = "<h1>User Input: <%- userInput %></h1>";
var compiledTemplate = _.template(template);
document.getElementById('content').innerHTML = compiledTemplate(data);
</script>
</body>
</html>
এখানে, <%- %> ব্যবহার করা হয়েছে যাতে HTML ইনজেকশন থেকে রক্ষা পায় এবং স্ক্রিপ্ট ট্যাগ সঠিকভাবে এনকোড হয়ে যায়।
৩. অ্যারে রেন্ডারিং:
Underscore.js টেমপ্লেটিং সহজেই অ্যারে এবং লিস্ট রেন্ডার করতে সহায়তা করে।
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var data = {
users: [
{name: "John", age: 30},
{name: "Jane", age: 25},
{name: "Mike", age: 35}
]
};
var template = "<ul><% _.each(users, function(user) { %><li><%= user.name %> is <%= user.age %> years old</li><% }); %></ul>";
var compiledTemplate = _.template(template);
document.getElementById('content').innerHTML = compiledTemplate(data);
</script>
</body>
</html>
এখানে, _.each() ব্যবহার করে users অ্যারে এর প্রতিটি উপাদানকে টেমপ্লেটে রেন্ডার করা হয়েছে, যা একটি লিস্টে পরিণত হয়।
৪. কন্ডিশনাল লজিক (Conditional Logic):
Underscore.js টেমপ্লেটিংয়ের মধ্যে কন্ডিশনাল লজিক প্রয়োগ করা সম্ভব। যেমন, আপনি যদি কোনও শর্ত পূর্ণ না হলে একটি নির্দিষ্ট HTML উপাদান প্রদর্শন না করতে চান।
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var data = {
isAuthenticated: true,
userName: "John"
};
var template = "<% if (isAuthenticated) { %><h1>Welcome, <%= userName %>!</h1><% } else { %><h1>Please log in</h1><% } %>";
var compiledTemplate = _.template(template);
document.getElementById('content').innerHTML = compiledTemplate(data);
</script>
</body>
</html>
এখানে, কন্ডিশনাল লজিক ব্যবহার করে যদি isAuthenticated true হয়, তবে ব্যবহারকারীর নাম এবং ওয়েলকাম মেসেজ প্রদর্শিত হবে, আর যদি false হয়, তবে "Please log in" মেসেজ দেখানো হবে।
Underscore.js এর টেমপ্লেটিং এর সুবিধা
- সহজ এবং দ্রুত: Underscore.js এর টেমপ্লেটিং সিস্টেম HTML এবং JavaScript কোডের মধ্যে দ্রুত সংযোগ তৈরি করতে সাহায্য করে, যা সময় সাশ্রয়ী।
- সহজ শর্ত এবং লুপ:
_.each()এবং কন্ডিশনাল স্টেটমেন্টের মাধ্যমে টেমপ্লেটিং খুব সহজভাবে করতে পারা যায়। - নিরাপত্তা:
<%- %>সিনট্যাক্স ব্যবহারের মাধ্যমে HTML ইনজেকশন থেকে রক্ষা পাওয়া যায়, যা নিরাপত্তার জন্য গুরুত্বপূর্ণ। - এবং আরও অনেক ফাংশন: Underscore.js এর টেমপ্লেটিং আরও অনেক শক্তিশালী ফিচার প্রদান করে, যেমন এক্সপ্রেশন, ডেটা ম্যানিপুলেশন এবং ফাংশনাল প্রোগ্রামিং।
সারাংশ
Underscore.js এর টেমপ্লেটিং সিস্টেম খুবই শক্তিশালী এবং সহজ। এটি HTML টেমপ্লেটের মধ্যে ডাইনামিক ডেটা ইনজেক্ট করতে সহায়তা করে এবং কোডের মাঝে কার্যকরী সংযোগ তৈরি করতে সাহায্য করে। এতে _.each(), _.template(), এবং <%- %> এর মতো ফাংশনাল ফিচার রয়েছে যা আপনার ওয়েব অ্যাপ্লিকেশনগুলিকে আরও ডায়নামিক এবং কার্যকরী করে তোলে।
Read more
