یکی از راه‌ها داشتن اسکریپت های کاربردی که بتوان بارها و بارها از آن استفاده کرد، انعطاف پذیر کردن توابع‌مان هست. در این صورت تمایل پیدا میکنید که به دفعات زیاد از اسکریپتی که قبلا نوشتید، در پروژه هایتان استفاده کنید.
منظور از انعطاف پذیری توابع چیست؟
به طور خلاصه میتوان گفت یکی از راه های انعطاف پذیری توابع کنترل پارامتر های ورودی به طوری است که با تغییر نوع پارامتر های ورودی و یا تعداد آنها اسکریپت ما دچار خطا نشود و کار خود را به درستی انجام دهد.
برای مثال به تابع زیر نگاه کنید.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<p id=“p”>Lorem ipsum</p>
<script>
function getText(selector){
var element = document.querySelector(selector);
return element.innerHTML;
}
// use function
getText(‘#p’); // -> “Lorem ipsum”
var el = document.querySelector(‘#p’)
getText(el); // -> Error
</script>
|
همانطور که دیدید به تابع بالا یک سلکتور(string) میدهیم و سپس متن درون المنت مورد نظر را برمیگرداند. اگر قبلا یک المنت داشته باشیم که بخواهیم متن درون المنت را برای ما برگرداند و نخواهیم به آن یک سلکتور بدهیم با خطا مواجه خواهیم شد.
خب برای جلوگیری از خطا باید تابعمان را کمی هوشمند یا منعطف کنیم.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<p id=“p”>Lorem ipsum</p>
<script>
function getText(selector){
var element;
if(typeof selector === “string”){
element = document.querySelector(selector);
} else{
element = selector;
}
return element.innerHTML;
}
// use function
getText(‘#p’); // -> “Lorem ipsum”
var el = document.querySelector(‘#p’)
getText(el); // -> “Lorem ipsum”
</script>
|
درکل در جاوا اسکریپت چند نوع داده داریم که عبارتند از:
- undefined: هر متغیر و تابع تعریف نشده
- boolean: مقدار های false و true
- string: رشته های داخل کوتیشن و یا دابل کوتیشن
- array: آرایه ها
- number: اعداد
- object: اشیاء
- function: توابع
با استفاده از دستور میتوان به نوع داده ها پی برد. همانطور که در کد بالا میبینید گفتیم اگر نوع پارامتر ورودی رشته(string) بود، با استفاده از متد querySelector المنت را بدست می‌آوریم و در غیر اینصورت باید پارامتر ورودی همان المنت باشد که دیگر نیازی به جستجوی المنت نیستیم.
برای تشخیص داده های فرستاده نشده به تابع هم از روش زیر استفاده میکنیم.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<a href=“#”>this is a link</a>
<script>
function getText(selector, callback){
var element, text;
if(typeof selector !== “string”){
element = selector;
} else{
element = document.querySelector(selector);
}
text = element.innerHTML;
if(typeof callback === “undefined”){
console.log(text);
} else{
callback(text);
}
}
// use
getText(‘a’); // logs -> this is a link
// or
getText(‘a’, function(text){
console.log(‘The text is: ‘+ text);
});
// logs -> The text is: this is a link
</script>
|
همونطور که دیدید ابتدا متن داخل المنت را درون یک متغیر ذخیره میکنیم. سپس تعیین میکنیم که اگر یک callback به تابع فرستاده شده بود، آن متن را به callback میفرستیم وگرنه آن متن را log میکنیم.
تا اینجا در با نوع داده ها کار میکردیم و طبق نوع داده ی ورودی میفهمیدیم باید چکار کنیم، اما اگر تعداد نامعلومی پارامتر قرار باشد به تابع وارد شود آنگاه چطور انها را کنترل کنیم؟
|
1
2
3
4
5
6
7
8
|
function doSomething () {
console.log(arguments);
}
// use
doSomething(‘ali’, 45, function(){}, true, undefined, {}, []);
// logs -> [“ali”, 45, function, true, undefined, Object, Array[0]]
|
متغیر arguments پارامتر های ورودی یک تابع را به صورت یک آرایه در بر دارد. و مثالی دیگر:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function doSomething () {
var typeofArguments = ”;
for(var i = 0; i < arguments.length; i++){
var param = arguments[i];
typeofArguments += ‘ ‘ + typeof param;
}
console.log(typeofArguments.trim());
}
// use
doSomething(‘ali’, 45, Math.PI, function(){}, true, undefined, {}, []);
// logs -> “string number number function boolean undefined object object”
|
و در اینجا این مطلب به پایان میرسد. امیدوارم برایتان مفید بوده باشد.
با سلام
ممنونم از این آموزش های عالی تون
برای من خیلی مفید بود
موفق و پیروز باشید