» مقالات تجارت الکترونیک » مقالات هایبرد » هفت گام برای داشتن طراحی سایت جاوا اسکریپت بهتر

هفت گام برای داشتن طراحی سایت جاوا اسکریپت بهتر

هفت گام برای داشتن طراحی سایت جاوا اسکریپت بهتر

4539  تعداد بازدید  |  شنبه 5 بهمن ماه 1392

با پیشرفت کارایی مرورگرها به همراه سازش پذیری ثابت APIهای جدید HTML حجم جاوا اسکریپت بر روی وب در حال رشد است.

با پیشرفت کارایی مرورگرها به همراه سازش پذیری ثابت APIهای جدید HTML حجم جاوا اسکریپت بر روی وب در حال رشد است.

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

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

گام اول:کد

کار را با فراخواندن script mode مربوط به ECMAScript در عملیاتتان با یک توضیح use strict شروع کنید و از الگوی طراحی ماژول استفاده کنید، استفاده از متغیرهای سراسری را با سندباکس کردن ماژول استفاده کنید ، استفاده از متغیرهای سراسری را با سندباکس کردن ماژولهای کد جداگانه در داخل محدوده های تابع خود اجرایی به حداقل رسانده، از هرگونه وابستگی خارجی برای ساده نگه داشتن ماژولها و اختصار عبور کنید.فقط از مجموعه برنامه های پابرجا و به خوبی آزمایش شده ی third-party و چارچوبها استفاده کنید و توابع خود را کوچک نگه دارید . هر منطق کسب کاری ، اطلاعات و داده را از دستکاری DOM  و سایر کدهای view-layer جدا کنید.

پروژه های بزرگتر با توسعه دهنگان متعدد باید یک مجومعه برقرار از دستورالعمل های برنامه نویسی از قبیل java script style Guide گوگل را دنبال کنند و به قوانین مدیریتی قوی کد، از جمله مدیریت وابستگی stricter  که از AMD از طریق مجموعه برنامه هایی مثلRequirejs استفاده می کند، نیاز خواهد داشت، بسته مدریتی از Bower یا jam برای رجوع به نسخه های خاص از فایلهای وابستگی استفاده می کندو و الگوهای طراحی ساختمانی از قبیل الگوی Observer برای تسهیل ارتباطات آزادانه بین ماژولهای مختلف کدهایتان استفاده می شود.همچنین این یک ایده عاقلانه است که از یک سیستم مخزن ذخیره سازی کد از قبیل Subversion از طریق سرویس هایی از قبیل  GitHub یا Beanstalk برای حفظ بک آپ کدتان بر روی ابر استفاده شود. این کار توانایی رجوع و بازگشت به نسخه های قبلی را فراهم آورده و برای پروژه های پیشرفته تر برای ایجاد شاخه هایی از کد به منظور پیاده سازیویژگی های مختلف قبل از برگرداندن ادغام آنها با هم یکبار به صورت کامل استفاده می شود.

گام دوم" سند

از یک فرمت توضیح ساختاری از قبیل YUIDoc یا JSDOc برای سند کردن توابع استفاده کنید بطوریکه هر توسعه دهنده ای بتواند بدون نیاز به مطالعه خود کد به هدف آن پی ببرد ، و به این طریق سوءتفاهمات کاهش یابد. از Markdown syntax برای توضیحات و تفسیرهای قوی تر و طولانی استفاده منید.از ابزار خط فرمان مرتبط برای تولید خودکار یک سند وب سایت برا اساس این توضیحات ساختاری که با هر تغییر ایجاد شده در کد بروز می مانند استفاده کنید.

گام سوم: آنالیز

یک ابزار آنالیز کد استاتیک مثل JSHint یا JSLint را در برابر کدتان بصورت منظم اجرا کنید.اینها دامهای برنامه نویسی شناخته شده و خطاهای بالقوه از قبیل فراموش کردن استفاده از Strict mode یا رجوع دادن  به متغیر های اعلام نشده را بررسی کرده و پرانتز ها یا سمی کالن های جا افتاده را تشخیص می دهد.هر گونه اشتباه و مشکلی را که ابزار نشان می دهد برای ارتقاء کیفیت کدتان تصحیح کنید.سعی کنید گزینه های پیش فرض را برای تیم پروژه و برای اجرای برنامه نویسی استاندارد تنظیم کنید مثل تعداد فواصلی که با آن تورفتگی در متن در هر بار انجام می شود، جاهایی که باید آکولاد قرار گیرد و استفاده از کوتیشن های تکی یا دوتایی در سراسر فایل کدهایتان.

گام چهارم: تست

تست واحد یک تابع مستقل کوچک است که یکی از توابع را از codebase  اصلی تان با ورودی های مشخص برای تایید خروجی های یک مقدار مورد انتظار اجرا می کند.برای بهبود اعتماد شما آن کد همانطور که انتظار می رود رفتار می کند، تست های واحد را با استفاده از یک چاچوب مثلjasmine یا  QUnit برای هر یک از توابعتان می نویسد ، از هر دو پارامتر مورد انتظار و غیره منتظره استفاده می کند.

این تست ها را در مرورگرهای متعدد بر روی سیستم عامل های متعدد اجرا کنید با در نظر گرفتن مزایای سرویس هایی از قبیل Browser Stack که به شما اجازه می دهد تا ماشین های مجازی را در ابر در تقابل برای تست کردن به کار گیرد.هر دو سرویس یک API فراهم می کند که به تست های واحد شما اجازه می دهد تا به صورت خودکار در سراسر مرورگرها بطور همزمان با فیدبک نتایج به شما ، هنگامی تکمیل شدند ، اجرا شود.

به عنوان پاداش اگر کدتان در GitHub ذخیره شود می توانید از مزایای Brower Swarm استفاده کنید ابزاری که به صورت خودکار تست های واحدتان را در زمانی که کدتان را به کار می گیرید، بهره مند شوید.

گام پنجم: اندازه گیری

ابزارهای code-covering  مثل  Istanbul وقتی آزمون های واحدتان در برابر توابع تان اجرا شد هر خطی از کد را اندازه می گیرد، و آن را به عنوان درصدی از کل تعداد خطوط کد گزارش می دهد.Code coverage را در برابر آزمونهای واحدتان اجرا کرده و آزمون های اضافی را برای افزایش رتبه پوشش دهی تان تا صد در صد اضافه کنید. به کدهایتان اطمینان بیشتری بدهید.

پیچیدگی تابع می تواند با استفاده از اندازه گیری پیچیدگی Halstead  اندازه گیری شود.معادلات توسط دانشمند علوم کامپیوتر Maurice Halstead در دهه 1970  اختراع شد که کمیت پیچیدگی یک تابع را بر اساس تعداد حلقه ها ، شاخه ها و فراخوانهای تابع را که شامل می شود تعیین می گردد.هنگامی که رتبه پیچیدگی کاهش یافت راحتر قابل درک شده و عملکردها حفظ می شود، خطاهای احتمالی کاهش می یابد. ابزار خط فرمان Plato تجسم های پیچیدگی کد جاوا اسکریپتی را اندازه گرفته و تولید می کند ، به شناسایی توابعی که می توانند ارتقاء یافته کمک کند، در حالی که نتایج قبلی را ذخیره می کند اجازه می دهد پیشرفت کیفیت در طول مدت ردیابی شود.

گام ششم:بصورت خودکار عمل کردن

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

اغلب ابزارها و آزمایش چارچوب ها که در این مقاله به آن پرداخته شده با وظایف موجود Grunt برای کمک به شما در ارتقاء روند کار و کیفیت کدها همراه هستند.بدون اینکه شما مجبور باشید حتی یک کار کوچک انجام دهید.

گام هفتم:رسیدگی به موارد استثناء

همواره در بسیاری از مواقع کد شما هنگامی که اجرا می شود خطایی را ایجاد می کند . از دستورtry…..catch برای رسیدگی و رفع خطاهای  runtime به طور منظم استفاده کرده و تاثیر آنها را بر روی رفتار سایتتان محدود کنید.

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

گامها برای رسیدن به موفقیت

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