طراحی سایت حرفه ای، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

قواعد کد نویسی در جاوا اسکریپت

قواعد کد نویسی در جاوا اسکریپت

دوستان عزیزم سلام. در آموزش JavaScript – بخش هشتم در خدمت شما دوستان هستم و در این جلسه می خواهم قواعدی که باید جهت خواناتر و قابل فهم بودن کدها رعایت شوند را خدمت شما دوستان عرض کنم.

قواعد کد نویسی در جاوا اسکریپت

قواعدی که در ادامه مطالعه خواهید کرد، قواعدی در مورد نام گذاری و تعریف متغیرها، فاصله گذاری، دندانه گذاری و نوشتن توضیحات در کدها می باشد. پس نکات گفته شده را به ذهن بسپارید.

اولین قاعده:

نام گذاری متغیرها

مهمترین نکته در مورد نام گذاری این است که نام گذاری باید با حروف آغاز شوند نه با عدد؛ و اگر از یک اسم چند بخشی استفاده می کنید، از خاصیت camelCase استفاده کنید.

مثلا نوشتن نام یک تابع به صورت my-function کاملا اشتباه می باشد. نام گذاری درست به صورت myFunction می باشد. و یا می توان از underscore استفاده کرد. مثلا my_function. اما چون underscore در SQL خیلی استفاده می شود، بهتر است که از آن نیز در نامگذاری استفاده نشود.

مدل دیگری در نامگذاری داریم به نام PascalCase. یعنی حرف اول هر بخش را با حرف بزرگ می نویسیم. این روش نیز در برنامه نویسی با زبان C به کار برده می شود.

  • بهترین گزینه برای نام گذاری در جاوا اسکریپت camelCase می باشد.
  • توجه داشته باشید که جاوا اسکریپت به حروف بزرگ و کوچک حساس می باشد.

نکته دیگری که باید در نامگذاری رعایت شود، نامگذاری فایلها و پوشه ها با حرف کوچک می باشد. بعضی از سرورها (مثل Apache و Unix) به بزرگ و کوچک بودن حروف حساس می باشند.

با نامگذاری فایلها با حروف کوچک، در انتقال سایت به سرورهای مختلف، به مشکل بر نخواهید خورد.

فاصله اطراف عملگرها

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

بهتر است که شما نیز این قاعده را رعایت کنید و همیشه قبل و بعد از عملگرها را فاصله گذاری کنید.

دندانه گذاری

در دندانه گذاری از دکمه Tab استفاده نکنید. چون ویرایشگرهای مختلف، تب را بگونه ای متفاوت تفسیر می کنند. یعنی فاصله ایجاد شده با دکمه تب در ویرایشگر های مختلف، متفاوت می باشد. پس بهتر است هنگامی که بلوک کدها را می نویسید، از 4 تا فاصله استفاده کنید:

در مثال بالا من قبل از دستور return  که در یک بلوک کد قرار دارد، چهار تا فاصله قرار داده ام.

دستورات

در مورد دستورات (statement) به نکات زیر توجه داشته باشید:

  • در انتهای دستورات نقطه ویرگول قرار دهید.
  • در بلوک های کد (مثلا توابع) کروشه آغازین را در انتهای خط اول بنویسید و قبل از آن یک فاصله قرا دهید.
  • کروشه پایانی را در خطی جدید بدون هیچ فاصله ای بنویسید.

آبجکت ها

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

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

توجه داشته باشید که بعد کروشه پایانی باید یک نقطه ویرگول قرار دهید.

و یا می توان آبجکت بالا را در یک خط و به صورت زیر تعریف کرد:

نوشتن حداکثر 80 کاراکتر در یک خط

برای خوانایی بیشتر از نوشتن بیش از 80 کاراکتر در یک خط بپرهیزید. می توانید خط ها را بعد از عملگرها بشکنید و ادامه کدها را در خطوط بعدی بنویسید.

بارگذاری فایل جاوا اسکریپت در HTML

همانطور که می دانید یک فایل جاوا اسکریپت را می توان با تگ <script>  به فایل HTML متصل کرد. توجه داشته باشید که خصیصه type در تگ <script>  ضروری نمی باشد و ما هم از آن استفاده نمی کنیم.

متغیر های سراسری

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

همچنین توجه داشته باشید که در تعریف متغیرهای محلی، از کلمه کلیدی var استفاده کنید تا به متغیر های سراسری تبدیل نشوند.

متغیر های تعریف نشده به طور خودکار توسط جاوا اسکریپت به متغیرهای سراسری تبدیل می شوند. حالت محض اجازه استفاده از متغیر های تعریف نشده را نمی دهد.

و اما توجه داشته باشید که بهتر است که متغیر ها را در ابتدای محدوده ها تعریف کنید. این کار باعث می شود کدهای بهتری داشته باشید و همیشه در یک مکان به دنبال متغیر ها باشید نه اینکه برای یافتن یک متغیر کل اسکریپت ها را بررسی کنید.

همچنین توجه داشته باشید که می توان چند متغیر را با استفاده از یک کلمه کلیدی var تعریف کرد:

و بهتر است که مقدار اولیه متغیر ها را همزمان با تعریف آنها تعیین کنید. مثلا:

اشتباهات متداول

دوستان؛ در ادامه با هم اشتباهات متداولی که هنگام نوشتن کدهای جاوا اسکریپت ممکن است رخ دهد را بررسی می کنیم. همیشه مراقب باشید که شما نیز دچار این اشتباهات نشوید.

عملگر تخصیص و مقایسه

در استفاده از عملگر تخصیص یعنی (=) و عملگر مقایسه (==) دقت لازم را به خرج دهید!

در مثال بالا مقدار false در مرورگر برگردانده می شود و این چیزیست که انتظار داریم. اما به مثال زیر دقت کنید:

در این حالت مقدار false در مرورگر نمایش داده می شود..

در برنامه نویسی عدد صفر، false و عدد یک، true ارزیابی می شود.

همچنین توجه داشته باشید که در عبارات باقاعده، نوع داده مهم نیست. به مثال زیر توجه کنید:

شرط دستور if، صحیح یعنی true اما در مثال زیر false ارزیابی می شود:

عملگر جمع

هنگام کار با اعداد، این عملگر عملیات جمع و در کار با رشته ها، عمل اتصال رشته ها به هم را انجام می دهد.

به همین دلیل در جمع اعداد باید مواظب باشید که اعداد را به صورت رشته ای در عملیات ریاضی استفاده نکنید:

حاصل x برابر با 15 و حاصل y همانطور که میداند 105 خواهد بود.

اعداد اعشاری

قبلا دیدیم که در جمع اعداد اعشاری مقدار دقیقی نخواهیم داشت. مثلا:

حاصل z مقدار دقیق 0.3 نیست. برای حل این مشکل ترفند زیر را استفاده می کنیم:

در این حالت مقدار z دقیقا 0.3 می باشد.

برش مقادیر رشته ای

گفتیم که بهتر است که در یک خط بیشتر از 80 کاراکتر ننویسید. اگر مقدار رشته ای داشتیم که تعداد کاراکتر آن بیشتر از این مقدار بود به دو روش زیر، خط را می شکنیم:

و یا

اما هیچ گاه به صورت زیر داده های رشته را به خط بعد منتقل نکنید:

دستورات در جاوا اسکریپت

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

دوستان عزیز، با توجه به مطلب گفته شده می توان کدهایی به صورت زیر داشت:

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

همچنین می توان کدها را به صورت زیر نوشت:

یعنی خط دستورات را می توان شکست، چون جاوا اسکریپت سعی می کند با خواندن خط بعدی، دستور var را تکمیل کند. اما دستور return را نمی توان شکست:

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

اما چطور سرعت اجرای کدها را بالا ببریم؟

افزایش کارایی کدها

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

کاهش فعالیت حلقه ها

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

یکی از روش های بهینه سازی حلقه، نوشتن دستورات و مقدار دهی ها بیرون از حلقه می باشد. مثلا:

که کدهای مناسبی نمی باشد. چون مقدار دهی به متغیر i و محاسبه تعداد اعضای حلقه در دستور for صورت می گیرد که بهتر است این کار خارج از for صورت پذیرد:

کاهش دسترسی به المان های HTML

در مثال های مختلف دیدید که با استفاده از دستور زیر مقداری را در المان ها می نوشتیم:

در واقع در این دستور، document.getElementById("id")  المان را انتخاب می کند. این دستور به شدت سرعت اجرای اسکریپت ها را کاهش می دهد. بنابراین اگر بخواهیم به تعداد زیاد از آن استفاده کنیم و مقادیر مختلفی را در یک المان HTML بنویسیم، بهتر است که به صورت زیر عمل کنیم:

یعنی انتخاب المان را با یک متغیر انجام می دهیم و هر بار که خواستیم مقداری را در المان بنویسیم، از نام متغیر استفاده می کنیم.

تعداد المان های HTML

از عوامل تاثیر گذار در سرعت بارگذاری صفحه، تعداد المان های موجود در آن می باشد.

طبیعتا هرچه تعداد المان ها کمتر باشد سرعت بارگذاری و نمایش آن خصوصا در دستگاه های کوچک، بهبود میابد.

تعداد متغیر ها

از تعریف متغیر های اضافی بپرهیزید. انجام کارهای بیشتر با متغیر های کمتر، سرعت اجرای اسکریپت را افزایش می دهد.

مکان تگ های اسکریپت

گفتیم که مرورگر اسکریپت ها را جمع آوری و سپس تفسیر می کند. بنابراین بهتر است که تگ های اسکریپت را در انتهای body قرار دهید تا ابتدا صفحه بارگذاری شود و سپس جمع آوری و پردازش اسکریپت ها صورت گیرد. این کار باعث افزایش بارگذاری صفحه می شود.

ویژگی defer= "true"  در تگ <script>  تعیین می کند که اسکریپت های نوشته شده در فایل خارجی، بعد از بارگذاری صفحه اجرا شوند.

و اما آخرین مطلب:

کلمات رزرو شده

گفتیم که در نام گذاری توابع، متغیر ها و … از کلمات رزرو شده جاوا اسکریپت استفاده نکنید. درجدول زیر مهم ترین کلمات کلیدی را می بینید:

abstractargumentsawait*boolean
breakbytecasecatch
charclass*constcontinue
debuggerdefaultdeletedo
doubleelseenum*eval
export*extends*FALSEfinal
finallyfloatforfunction
gotoifimplementsimport*
ininstanceofintinterface
let*longnativenew
nullpackageprivateprotected
publicreturnshortstatic
super*switchsynchronizedthis
throwthrowstransientTRUE
trytypeofvarvoid
volatilewhilewithyield

کلمات کلیدی  حذف شده

کلمات جدول زیر از لیست بالا حذف شده اند. اما همچنان نباید از آنها در نامگذاری استفاده شود:

abstractbooleanbytechar
doublefinalfloatgoto
intlongnativeshort
synchronizedthrowstransientvolatile

 

درون جاوا اسکریپت آبجکت ها، ویژگی ها و متد هایی وجد دارد که از نام آنها نباید برای نام گذاری استفاده کرد:

ArrayDateevalfunction
hasOwnPropertyInfinityisFiniteisNaN
isPrototypeOflengthMathNaN
nameNumberObjectprototype
StringtoStringundefinedvalueOf

از آنجایی که از جاوا اسکریپت و جاوا در خیلی از برنامه ها استفاده می شود بهتر است که از کلمات رزرو شده در جاوا نیز برای نام گذاری در جاوا اسکریپت بپرهیزید. در جدول زیر مهمترین کلمات رزرو شده در جاوا را می بینید:

getClassjavaJavaArray
JavaObjectJavaPackagejavaClass

 

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

alertallanchoranchors
areaassignblurbutton
checkboxclearIntervalclearTimeoutclientInformation
closeclosedconfirmconstructor
cryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembed
embedsencodeURIencodeURIComponentescape
eventfileUploadfocusform
formsframeinnerHeightinnerWidth
layerlayerslinklocation
mimeTypesnavigatenavigatorframes
frameRatehiddenhistoryimage
imagesoffscreenBufferingopenopener
optionouterHeightouterWidthpackages
pageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11plugin
promptpropertyIsEnumradioreset
screenXscreenYscrollsecure
selectselfsetIntervalsetTimeout
statussubmittainttext
textareatopunescapeuntaint
window

 

از لغات زیر نیز که انواع رویدادها در جاوا اسکریپت هستند، نباید در نامگذاری استفاده کرد:

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

 

در اینجا این بخش از آموزش جاوا اسکریپت را به پایان می رسانم. حال نوبت شماست که به بحث و تبادل نظر در مورد مطالب این بخش بپردازید. آیا نکته خاصی مد نظر دارید دارید که در مطالب بالا به آن اشاره نشده است؟ در بخش دیدگاه ها نکات و نظرات مد نظر خود را با ما در میان بگذارید.

دیدگاه ‏خود را بنویسید