نکته‌های طلایی در جاوا اسکریپت

مدتی قبل برای شماره صفر (اولین شماره) مجله سلام دنیا یه مقاله با عنوان «نکته‌های طلایی در جاوااسکریپت» نوشته بودم که البته به دلایل فنی مقاله رو کامل منتشر نکردند و یه جاهایی حذف شده بود. مقاله رو می‌تونید به صورت کامل از اینجا بخونید.

مقدمه

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

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

نکته‌های مطرح شده، کاملاً کاربردی در سطح‌های مختلف می‌باشد که برای مثال می‌توان به «عملگر تساوی»، «ابزار JS Lint» و یا «console.table» اشاره کرد.

عبارت‌های متنی در چند خط

جاوا اسکریپت در حالت معمولی اجازه نوشتن متن در چند خط را نمی‌دهد، در کد‌هایی که عبارت‌های متنی طولانی داشته باشیم، می‌توانیم از «\» در متن استفاده کنیم تا متن‌ها را در چند خط بنویسیم.

مانند متن طولانی در دستور document.write که نمونه‌ آن را در مثال زیر می‌بینید:

document.write ( "Lorem Ipsum is simply dummy text of the printing \
and typesetting industry. Lorem Ipsum has been the industry's standard \
dummy text ever since  the 1500s, when an unknown printer took a \
galley of type and scrambled it to make a type specimen book." ) ;

document.write ( "Lorem Ipsum is simply dummy text of the printing \

and typesetting industry. Lorem Ipsum has been the industry's standard \

dummy text ever since the 1500s, when an unknown printer took a \

galley of type and scrambled it to make a type specimen book." ) ;

رویداد بسته شدن پنجره (Leave Page)

در بعضی از صفحه‌ها نیاز هست تا قبل از بسته شدن صفحه رویدادی مانند نمایش پیغام رخ دهد. مانند صفحه‌هایی که شامل فرم‌ها هستند و قبل از بسته شدن صفحه لازم است در جهت از بین نرفتن اطلاعات کاربر، مقدار‌های فرم بررسی شود و در صورت نیاز پنجره confirmation برای تائید خروج به نمایش در آید.

onbeforeunload شی window قبل از بسته شدن صفحه اتفاق می‌افتد و می‌توانیم از این رویداد برای چنین مواردی استفاده کنیم.

window.onbeforeunload = function (e) {
var e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = 'Any string';
}
// For Safari
return 'Any string';
};

window.onbeforeunload = function (e) {

var e = e || window.event;

// For IE and Firefox

if (e) {

e.returnValue = 'Any string';

}

// For Safari

return 'Any string';

};

همچنین توسط onunload می‌توانیم بعد از بسته شدن پنجره، عملیات مورد نیاز را انجام دهیم.

در jQuery نیز می‌توانیم همانند مثال زیر از این نوع رویداد استفاده کنیم:

$( window ).unload(function() {
alert( "Bye now!" );
});

$( window ).unload(function() {

alert( "Bye now!" );

});

البته کتابخانه‌های زیادی برای Leave Page با قابلیت‌های بیشتر مانند بررسی محتوای تغییر کرده فرم نیز وجود دارد که در بسیاری از مواقع کار را راحت‌تر میکند.

غیرفعال کردن دکمه

بعضی از کاربرها ممکن هست به اشتباه چند بار روی دکمه‌ای در صفحه کلیک کنند، این اشتباه ممکن است باعث شود کدی دو یا چند بار ناخواسته اجرا و باعث خطاهایی شود، حتی اگر خطایی هم رخ ندهد به دلیل کیفیت و جلوگیری از پروسه‌های اضافی لازم نیست کدی دوباره اجرا شود و نیاز می‌شود دکمه مورد نظر را غیر فعال کنیم.

برای غیر فعال کردن postbackهای تکراری، می‌توانیم مانند مثال زیر بعد از کلیک کردن دکمه را غیر فعال کنیم.

<input type="submit" onclick="this.disabled = 'disabled';" value="Submit" />

1	<input type="submit" onclick="this.disabled = 'disabled';" value="Submit" />

در صورت نیاز برای تغییر مقدار هم می‌توانیم به این صورت استفاده کنیم:

<input type="submit" onclick="this.disabled = 'disabled'; this.value = 'Disable'" value="Submit" />

1	<input type="submit" onclick="this.disabled = 'disabled'; this.value = 'Disable'" value="Submit" />

جهت راحتی بیشتر می‌توانیم یک فانکشن برای دکمه‌ها ایجاد و از آن در همه جا استفاده کنیم:

<script>
function disableButton(buttonElem) {
buttonElem.value = 'Please Wait...';
buttonElem.disabled = true;
}
</script>
<input type="submit" onclick="disableButton(this);" value="Submit" />

function disableButton(buttonElem) {

buttonElem.value = 'Please Wait...';

buttonElem.disabled = true;

}

</script>

استفاده از === به جای ==

عکس‌العمل جاوااسکریپت در مقابل دو عملگر == و === متفاوت است و با سه مساوی می‌توانیم جنس متغیر را نیز بررسی کنیم. اگر دو عملگر دارای یک نوع و یک مقدار باشند،آنگاه === مقدار True و !== مقدار False بر می‌گردارند. با این حال وقتی با == و != کار می کنید، در استفاده از متغیرهای چند نوعی دچار مشکل خواهید شد، چون می خواهند مقادیر را مطابقت دهند ولی چون نوع متفاوت است این کار شدنی نیست.

[10] === 10 //is false

[10] == 10 //is true

'10' == 10 //is true

'10' === 10 //is false

[] == 0 //is true

[] === 0 //is false

'' == false //is true

"a" == true //is false

'' === false //is false

[10] === 10 //is false

[10] == 10 //is true

'10' == 10 //is true

'10' === 10 //is false

[] == 0 //is true

[] === 0 //is false

'' == false //is true

"a" == true //is false

'' === false //is false

Console log

جهت بررسی کد‌ها و خطایابی می‌توانیم از دستور console.log استفاده کنیم تا مقدار‌های مورد نظر خود را در کنسول مرورگر نمایش دهیم:

console.log("This is test");

console.log("This %s test", 'is');

console.log("This is test");

console.log("This %s test", 'is');

Console table

مشاهده آرایه‌ها توسط console log نیز امکان‌پذیر هست ولی برای آرایه‌ها بهتر است از console table استفاده کنیم تا خروجی بهتری ببینیم. Console table خروجی را به صورت یک جدول در کنسول نمایش می‌دهد. در مثال زیر هر دو مورد را بررسی می‌کنیم:

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];

console.log(languages);

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];

console.log(languages);

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];

console.table(languages);

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];

console.table(languages);

این جدول قابلیت مرتب‌سازی توسط ستون‌ها را نیز دارد.

Console trace

برای بررسی stack trace می‌توانیم از دستور console trace استفاده کنیم. به عبارتی می‌توانیم ببینیم که node برای رسیدن به یک نقطه خاص از برنامه چه مسیری رو طی می‌کند.

foo();

function foo() {

function bar() {

console.trace();

}

bar();

}

foo();

function foo() {

function bar() {

console.trace();

}

bar();

}

Console Timing

توسط دستورات console.time و console.timeEnd سرعت اجرای کدها رو می‌توانیم بررسی کنیم.

می‌توانیم از این دستورات برای بررسی سرعت استفاده کنیم:

var i, output = "";

// Start timing

console.time("concatenation");

for (i = 1; i <= 1e6; i++)

output += i;

// Stop timing

console.timeEnd("concatenation");

var i, output = "";

// Start timing

console.time("concatenation");

for (i = 1; i <= 1e6; i++)

output += i;

// Stop timing

console.timeEnd("concatenation");

خروجی آرایه توسط join

معمولاً برای گرفتن خروجی آرایه‌ها از for استفاده می‌شود در صورتی که join راه بهتری برای این کار هست.

var arr = ['item 1', 'item 2', 'item 3'];

var list = '
<ul>
<li>' + arr.join('</li>
<li>') + '</li>
</ul>
';

console.log(list);

//Result:

//
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

var arr = ['item 1', 'item 2', 'item 3'];

var list = '

<ul>

</ul>

console.log(list);

//Result:

<ul>

</ul>

محل قرار گیری اسکریپت‌ها

جهت افزایش سرعت بارگذاری صفحه‌ها بهتر است اسکریپت‌ها در انتهای صفحه قرار گیرند، در صورتی که اسکریپت‌ها اول صفحه قرار داده شوند مرورگر تا زمانی که کاملا آنها را لود نکرده باشد، منتظر می‌ماند و این برای کاربرها مناسب نیست، پس بهتر است همه اسکریپت‌ها در بخش انتهایی صفحه، یعنی قبل از تگقرار گیرد.

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

<p>And now you know my favorite kinds of corn. </p>

</body>

</html>

دسته‌بندی متغییر‌های Global

در اسکریپت‌ها و پروژه‌های بزرگ احتمال تداخل کد‌ها و متغییر‌ها بیشتر است، می‌توانیم با دسته بندی کد‌ها می‌توانیم از تداخل کدها‌ جلوگیری کنیم.

var DudeNameSpace = {

name: 'Jeffrey',

lastname: 'Way',

doSometing: function() {...}

}

console.log(DudeNameSpace.name); // Jeffrey

var DudeNameSpace = {

name: 'Jeffrey',

lastname: 'Way',

doSometing: function() {...}

}

console.log(DudeNameSpace.name); // Jeffrey

خطایاب JSLint

JSLint جهت خطایابی کد‌های جاوااسکریپت استفاده می‌شود که قبل از انتشار اسکریپت‌های جاوااسکریپت پیشنهاد می‌شود.

به طور کلی این ابزار کدهارا بازبینی می‌کند و در صورت وجود خطا، آن را به همراه توضیحات کامل و محل وقوع خطا گزارش می دهد. این ابزار جهت نمایان کردن اشکالات استفاده می‌شود.

از JSLint به حالت‌های مختلفی می‌توانیم استفاده کنیم که در اینجا به برخی از این راه‌ها اشاره می‌شود.

سایت http://jslint.com و http://javascriptlint.com این ابزار را به صورت آنلاین ارائه میدهد.

جهت استفاده از JSLint در فایرفاکس نیز می‌توانیم از پلاگین‌های lintbrushjs و JSLinter استفاده کنیم:

همچنین از JSLint می‌توانیم در IDEها هم استفاده کنیم، به طور مثال این ابزار در WebStorm وPHPStorm به صورت پیشفرض وجود دارد و فقط لازم است از قسمت تنظیمات، آن را فعال کنیم:

راه‌های دیگری مانند استفاده داخل کد و یا از طریق کنسول هم وجود دارد که با توجه به نیاز می‌توانیم از آن‌ها نیز استفاده کنیم.

خطایاب JSHint

JSHint توسط خود اعضا طراح JavaScript نوشته شده است. JSHint هم مانند JSLint کد‌های جاوا اسکریپت را با قابلیت بیشتر و محدوده عملیاتی گسترده‌تر بررسی می‌کند.

توسط سایت http://www.jshint.com می‌توان به بررسی کد‌ها پرداخت.

فشرده سازی اسکریپت‌ها

فشرده‌سازی یا Minification کردن اسکریپت‌ها، بدون ایجاد تغییرات در عمل‌کرد آن، با روش‌هایی مثل حذف کامنت‌ها و فضاهای انجام می‌شود.

در چند سال اخیر برنامه‌ها و روش‌های زیادی برای چنین عملی ایجاد شده است که موتور اسکریپت (JavaScript Engine) را تفسیر و به بهینه‌ترین نحو فشرده‌سازی را انجام می‌دهد.

Yuicompressor: ابزار فشرده‌سازی یاهو که توسط خط فرمان قابل اجراست، البته به صورت آنلاین هم با امکانات کمتری می‌توان از این ابزار استفاده کرد.

Closure Compile: این ابزار فشرده‌سازی هم توسط گوگل ایجاد گردیده و حالت‌های خط فرمان، وب‌اپلیکیشن (آنلاین) و API قابل استفاده است.

در لیست زیر سایت‌هایی که به صورت آنلاین این کار را انجام می‌دهند را مشاهده می‌کنید:

زیبا سازی کد‌ها

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

توسط سایت‌های زیر می‌توانیم اسکریپت‌ها را به صورت آنلاین زیبا سازی کنیم:

وبلاگــــــــ مصطفی میرموسوی