معرفی کتابخانه Underscore.js + ویژگی های آن

ابزار Undersocre.js یک کتابخانه جاوا اسکریپت به شمار می رود که توابع بسیار کاربردی برای پروژه های معمولی و برنامه نویسی در اختیار توسعه دهندگان قرار می دهد. امروز در داناپ به بررسی کتابخانه Underscore.js می پردازیم و برخی از ویژگی های آن را نیز با یکدیگر مرور خواهیم کرد پس تا انتهای مقاله با ما همراه باشید.

کتابخانه Underscore.js چیست؟

Underscore.js یک کتابخانه کم حجم و سبک برای زبان برنامه نویسی جاوا اسکریپت به شمار می رود که توسط جرمی اشکناس توسعه داده شده است و توابع بسیار سودمندی را برای انجام کارهای روزمره در اختیار برنامه نویسان قرار می دهد. این کتابخانه با حجمی کمتر از 6 کیلوبایت صدها تابع کاربردی ساده نظیر توابع Map و Filter را به برنامه نویسان ارائه می دهد.

کتابخانه Underscore.js همچنین امکانات پیشرفته تر دیگری نظیر قالب سازی جاوا اسکریپت، Function Binding، تست برابری (Equality Testing) عمیق، ساخت ایندکس های فوری و غیره را نیز در اختیار توسعه دهندگان قرار می دهد.

توابع موجود در کتابخانه Underscore.js اساسا به 4 دسته کلی تقسیم می شوند که عبارتند از:

توابع قابل استفاده برای دستکاری آرایه ها (Arrays)
توابع مورد استفاده برای دستکاری آبجکت ها (Objects)
توابع قابل استفاده برای دستکاری آرایه ها و آبجکت ها
توابع قابل استفاده برای دستکاری توابع دیگر

ویژگی های کتابخانه Underscore.js

انجام عملیات مشترک داده ها نظیر آرایه ها، آبجکت ها، فایل های JSON و غیره
سازگاری با کتابخانه های دیگر جاوا اسکریپت نظیر jQuery به منظور اجرای عملیات DOM
دارای توابع مشخص برای ایجاد تغییرات در داده (Data Manipulation)

عملیات داده (Data Operation) در کتابخانه Underscore.js

داده ها را از کالِکشن (Collection) واکشی (Fetch) می کند.
دیتا را به فرمت های مختلف تبدیل می کند
داده ها را دسته بندی، فیلتر و گروه بندی می کند.
با انجام عملیات مخصوص بر روی دیتا، آنها را به نتیجه مورد نظر تبدیل می کند.
برای انجام عملیات داده می توان از قالب ها (Templates) استفاده کرد.

بهترین توابع کتابخانه Underscore.js

تابع each

شما می توانید برای ساخت حلقه هایی (Loops) که به راحتی قابل خواندن هستند از تابع _.each استفاده کنید. تصویر زیر یک نمونه معمولی از لوپ در آرایه جاوا اسکریپت را نشان می دهد :

var list = [1 , 2 ,3];
for(var i = 0; i < list.length; i++ ) {
    console.log(list[i] * 2); //logs ‘2, 4, 6’
}

var list = [1 , 2 ,3];

for(var i = 0; i < list.length; i++ ) {

console.log(list[i] * 2); //logs ‘2, 4, 6’

}

پیشنهاد مطالعه: Jenkins چیست؟ + مزایا و معایب جنکینز

البته شما می توانید خوانایی کدهای بالا را با استفاده از تابع _.each بهبود بخشید :

_.each(list, function (item, index, list) {
    console.log(item * 2);//logs ‘2, 4, 6’
});

_.each(list, function (item, index, list) {

console.log(item * 2);//logs ‘2, 4, 6’

});

تابع _.map نیز به همین شکل است با این تفاوت که از خروجی تابع یک آرایه می سازد:

var result = _.map(list, function (list, function (item, index, list) {
    return item * 3;
})); 
console.log(result);//logs ‘[3, 6, 9]’

var result = _.map(list, function (list, function (item, index, list) {

return item * 3;

}));

console.log(result);//logs ‘[3, 6, 9]’

تابع filter

این تابع همانطور که از نامش مشخص است، یک کالکشن را از طریق لوپ فیلتر می کند.

var result = _.filter(list, function (item) { return item % 2 == 1 }); 
console.log(result);// logs '[1,3]'

1 2	var result = _.filter(list, function (item) { return item % 2 == 1 }); console.log(result);// logs '[1,3]'

تابع times

این تابع بهترین روش برای تکرار تعداد مشخصی کد محسوب می شود.

_.times(5, function () {
    console.log('hello');// will log hello 5 times
});

_.times(5, function () {

console.log('hello');// will log hello 5 times

});

تابع pluck

این تابع یک روش مناسب برای بیرون کشیدن لیست Property Values از لیست آبجکت ها محسوب می شود. در مثال زیر تهیه لیست از یک کالکشن در زبان جاوا اسکریپت را نشان می هد:

var people = [{
    name: 'John',
    age: 30,
    state: 'KS'
}, {
    name: 'Phil',
    age: 25,
    state: 'KS'
}, {
    name: 'Bob',
    age: 50,
    state: 'NY'
}];
var names = people.map(function(person) {
    return person.name
});
console.log(names); // logs '["John", "Phil", "Bob"]'

var people = [{

age: 30,

state: 'KS'

}, {

age: 25,

state: 'KS'

}, {

age: 50,

state: 'NY'

}];

var names = people.map(function(person) {

return person.name

});

console.log(names); // logs '["John", "Phil", "Bob"]'

البته شما با استفاده از کتابخانه Underscore.js می توانید فرآیند بالا را به شکلی ساده تر بنویسید:

var names = _.pluck(people, 'name');
console.log(names);// logs '["John", "Phil", "Bob"]'

1 2	var names = _.pluck(people, 'name'); console.log(names);// logs '["John", "Phil", "Bob"]'

پیشنهاد مطالعه: امت Emmet چیست + نحوه استفاده از آن

تابع findWhere

از این تابع می توان برای پیدا کردن یک Single Object در کالکشن که با key-value تعیین شده مطابقت داشته باشد استفاده کرد:

var person;
for (var i = 0; i < people.length; i++) {
    if (people[i].name === 'Phil' && people[0].state == 'KS') {
        person = people[i];
    }
}
console.log(person); //logs '{name: "Phil", age: 25, state: "KS"}'

var person;

for (var i = 0; i < people.length; i++) {

if (people[i].name === 'Phil' && people[0].state == 'KS') {

person = people[i];

}

console.log(person); //logs '{name: "Phil", age: 25, state: "KS"}'

برای مثال نمونه کد بالا که در جاوا اسکریپت نوشته شده است را می توان با استفاده از کتابخانه Underscore.js به صورت زیر خلاصه نویسی کرد:

var person = _.findWhere(people, { name: 'Phil', state: 'KS' });
console.log(person);//logs '{name: "Phil", age: 25, state: "KS"}'

1 2	var person = _.findWhere(people, { name: 'Phil', state: 'KS' }); console.log(person);//logs '{name: "Phil", age: 25, state: "KS"}'

کدنویسی از طریق این تابع نه تنها ساده تر است بلکه خوانندگان به راحتی می توانند محتوای کدها را درک کنند.

تابع where

این تابع تقریبا مشابه _.findWhere است با این تفاوت که به جای اولین ورودی پیدا شده، آرایه ای از تمام ورودی های منطبق بر می گرداند.

var kansasPeople = _.where(people, { state: 'KS' });

1	var kansasPeople = _.where(people, { state: 'KS' });

تابع sortBye

مرتب سازی کالکشن ها بر اساس Property Name از طریق این تابع به راحتی انجام می پذیرد.

var sortedPeople = _.sortBy(people, 'age');
console.log(_.pluck(sortedPeople, 'name'));//logs '["Phil", "John", "Bob"]'

1 2	var sortedPeople = _.sortBy(people, 'age'); console.log(_.pluck(sortedPeople, 'name'));//logs '["Phil", "John", "Bob"]'

کتابخانه Backbone.js نیز از Dependency خود در Underscore.js استفاده می کند بنابراین می توانند از توابع بالا در کالکشن های Backbone.js نیز استفاده کرد. این ویژگی در زمان کار با کالکشن داده های بزرگ بسیار مفید است.

علاوه بر این متدهای ساده و خوانای بیشماری برای بررسی نوع (Type Checking) در این کتابخانه وجود دارند که مزایای زیادی را برای برنامه نویسان به ارمغان می آورند:

_.isString(object);
_.isNumber(object);
_.isBoolean(object);
_.isDate(object);
_.isNan(object);
_.isNull(object);
_.isUndefined(object);

_.isString(object);

_.isNumber(object);

_.isBoolean(object);

_.isDate(object);

_.isNan(object);

_.isNull(object);

_.isUndefined(object);

برنامه نویسان همچنین می توانند از کتابخانه Underscore.js برای ایجاد Template Strings استفاده کنند که در ساخت قالب های HTML با آبجکت بسیار کمک کننده است.

پیشنهاد مطالعه: سینتکس چیست؟ - تعریف Syntax یا نحو در برنامه نویسی

var helloTemplate = _.template(
    '<h1>Hello <%= name %></h1>');
var htmlString = helloTemplate(people[2]);
console.log(htmlString); //'<h1>Hello Bob</h1>'

var helloTemplate = _.template(

'<h1>Hello <%= name %></h1>');

var htmlString = helloTemplate(people[2]);

console.log(htmlString); //'<h1>Hello Bob</h1>'

علاوه بر این برنامه نویسان می توانند منطق جاوا اسکریپت را نیز در قالب های مربوطه بنویسند:

var listTemplate = _.template(
    '<ul><% _.each(people, function (person) { %>' +
    '<li><%= person.name %></li>' +
    '<% }) %></ul>
 
');
var htmlListString = listTemplate({
    people: people
});

var listTemplate = _.template(

'<ul><% _.each(people, function (person) { %>' +

'<li><%= person.name %></li>' +

'<% }) %></ul>

');

var htmlListString = listTemplate({

people: people

});

کلام آخر

مطالبی که در این مقاله به آن پرداختیم تنها گوشه ای از مزایای کتابخانه Underscore.js به شمار می رود. البته به خاطر داشته باشید که برخی از ویژگی های این کتابخانه در تکه کدهای کوچک قابل مشاهده نیستند و عیار کتابخانه Undersocre.js به عنوان یک ابزار بسیار مفید در زمان کار با کدهای پیچیده مشخص می شود.

5/5 - (5 امتیاز)

معرفی کتابخانه Underscore.js + ویژگی های آن

کتابخانه Underscore.js چیست؟

ویژگی های کتابخانه Underscore.js

عملیات داده (Data Operation) در کتابخانه Underscore.js

بهترین توابع کتابخانه Underscore.js

تابع each

تابع filter

تابع times

تابع findWhere

کلام آخر

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

کتابخانه Underscore.js چیست؟

ویژگی های کتابخانه Underscore.js

عملیات داده (Data Operation) در کتابخانه Underscore.js

بهترین توابع کتابخانه Underscore.js

تابع each

تابع filter

تابع times

تابع findWhere

کلام آخر

مطالب زیر را حتما مطالعه کنید

Vite.js چیست؟ + کاربردها و مزایای آن (معرفی جامع)

Tailwind CSS چیست؟ + مزایا و کاربردهای تیلویند

5 مهم ترین پیش نیازهای یادگیری برنامه نویسی (راهنمای جامع)

PHP چیست؟ + کاربردها و مزایای آن (معرفی جامع)

بهترین مسیر یادگیری برنامه نویسی (راهنمای جامع)

Nest.JS چیست؟ + مزایا و کاربردهای آن

دیدگاهتان را بنویسید لغو پاسخ