تور آشنایی با پلتفرم خودکار قسمت چهارم

در این قسمت بخش کد نویسی سمت Client (کلاینت ) را توضیح بدهم.

اولین بخش که می‌خواهم توضیح بدهم در قسمت توسعه مدیریت کدها،کدهای تحت مرورگر ، مدیریت کدهای تحت مرورگر، اولین قسمت نوع کد است ما دو نوع کد داریم:

اسکریپت ها و استایل ها. اسکریپت ها مثل جاوا اسکریپت و CoffeeScript و TypeScript و غیره

کدهای استایل ها مثل CSS و  SASS و LESS

اول اسکریپت ها را انتخاب می کنم همانطور که می بینید یکسری اسکریپت های پیش فرض داریم مثل اسکریپت تقویم , اسکریپت اعتبار سنجی , اسکریپت Modal , یک اسکریپت هم هست اسکریپت مرکزی خودکار , این در اصل منبع کد FrameWork پیشفرض پلتفورم است.

انتخاب فایل را بزنم یک فایل است به نام As.core.js که این همان FrameWork پیش فرض پلتفرم ،فریم ورک خودکار است , این کلمه ی کلیدی  As پیشوند تمامی کدها و توابع و فایل هایی است که مربور به FrameWork است.  as  مخفف Automate System و خودکارسیستم است , شما با این as میتوانید تشخیص بدهید که کدام  توابع برای خود فریم ورک خودکار هستند.

همانطور که مشاهده میکنید ما الان انتخاب ویرایشگرمون روی جاوااسکریپت است چونکه فریم ورک خودکار با جاوااسکریپ نوشته شده است اما سایر زبان هایی که اینجا پشتیبانی میشوند مثل TypeScript  ،SASS،CoffeeScript، CSS ، SCSS، LESS، Html، Handlebars، Velocity و Text .

همانطور که مشاهده میکنید ما اینجا یکسری دکمه داریم که همه را توضیح نمیدهم دکمه ی مهمی که اینجا هست مدیریت باندل ها , من وقتی این رومیزنم modale مدیریت باندل ها باز می شود و شما می روید در منبع کد اسکریپت مرکزی خودکار ,  یکسری bundle داریم از جمله خود ascore.js که فایل اصلی فریم ورک خودکار است , من اگر این را انتخاب کنم و مدیریت منابع را بزنم میبینید که این bundle دقیقا از  source اصلی فریم ورک تشکیل شده ما اینجا یک دکمه کامپایل داریم و یک Radio Button انتشار bundle ها , کاری که انجام می دهند می آیند چند تا منبع رو , میتوانند چند تا فایل js یا CSS را فرقی نمیکند می تواند با هم bundle کنند و Minify کنند و یا اینکه حتی آنها را کامپال کنند یعنی حتی اگر TypeScript و CoffeeScript هست js و اگر SASS و LESS باشد, CSS اش را برای شما می سازد.

با این دکمه ی کامپایل و این دکمه انتشار همانطور که در ویدیو های قبلی گفتم ما دوتامحیط ، دوتا حالت دیباگ و Release داریم اگر این دکمه Radio Button روشن نباشد وقتی شما کامپایل رو میزنید فقط در حالت دیباگ Source کامپایل میشه مثل اون جاوااسکریپت یا اون CSS ای که هست اما Minify نمیشه ما وقتی که این Radio Button روشن باشد علاوه بر اینکه در فولدر debug میرود در فولدر dist هم اون Minify bundle شده تون هم میره.

خب حالا برای اینکه نشان بدهم دقیقا منظورم از فایل کامپایل شده چی هست همین ascore.js را من میروم در قسمت مدیریت فایل ها و دایرکتوری ها مسیر ریشه سایت فولدر اسکریپت همانطور که مشاهده میکنید در فولدر اسکریپت دوتا فولدر داریم یکی dist و دیگری debug , فولدر dist همون Release است , دیباگ هم که همان حالت دیباگ است.

من الان وارد فولدر dist میشوم و اینجا همانطور که مشاهده میکنید یک فایل ascore.js است اگر داخل فایل را نگاه کنید میبینید که در محیط dist داخل این فایل ascore.js به صورت Minify شده , حالا برمیگردم به فولدر دیباگ و این دفعه ascore.js را اگر نگاه کنیم از فولدر دیباگ همانطور که مشاهده میکنید ایندفعه این فایل Minify نشده یعنی در حالت دیباگ شما کاملا میتوانید ، Break Point بذارید و Trace کنید.

خب من بر میگردم به همین صفحه مدیریت کد ها ایندفعه میروم در قسمت استایل ها و استایل مرکزی خودکار ،انتخاب فایل core.scss , همانطور که مشاهده میکنید فریم ورک خودکار در سمت استایل فایل SASS است و حالا برای اینکه کامپایل بشه باز در قسمت مدیریت bundle ها , همانطور که مشاهده میکنید  ascore.css  داریم که استایل مرکزی خودکار روی فریم ورک خودکار است من اگر این را مدیریت منابع اش را به شما نشان بدهم , میبینید که باز bootstrap است که Customize شده و حالا 3rd Party که اینجا استفاده شده و خود core.scss  برمیگردیم به مدیریت فایل ها تا آنجا به شما نشان بدهم که در اصل این محتوایی که الان اینجا می بینید که SASS است از core.scss آنطرف کامپایل شده به CSS .

باز میرویم به ریشه سایت فولدر content و باز می بینید تو فولدر برای استایل ها  هم دو فولدر است فولدر dist و debug وارد فولدر و فایل ascore.css اگر داخلش را نگاه کنیم می بینید که یک فایل CSS به حالت Minify شده است یعنی فایل SASS را آمده کامپایل و Minify کرده به CSS در حالت dist .

تو حالت دیباگ اگر برویم ascore.css با اینکه کامپایل شده به CSS ولی دیگه Minify نیست و شما در حالت دیباگ کامل می توانید این استایل ها را ببیتید و از طریق ویرایشگر Chrom تغیراتی که نیاز دارید را تست کنید.

مدیریت کدهای تحت مرورگر و از قسمت اسکریپت ها ، اسکریپت modal را انتخاب می کنیم , در اسکریپت modal , انتخاب فایل را انتخاب می کنیم , as.modal.js یک پلاگین Jquery است برای همین modal هایی که باز می شود.

تو این قسمت مدیریت منابع و کامپایل را توضیح دادیم. اما یک دکمه ای دیگر است به اسم ویرایش. Asmodal.js را انتخاب می کنیم و دکمه ویرایش را می زنیم که یک modal جدید باز می شود (ایجاد و ویرایش bundle) خب یک نام دلخواه دارد مثلا modal آدرس کامل /asModal.js و این در اصل داخل همان فولدر dist و دیباگ می رود ودر قسمت پایین قسمت وابستگی ها را داریم.

شما هر فایل اسکریپت یا استایل داشته باشید , ممکنه برای صحیح اجرا شدن نیاز داشته باشیم فایل های اسکریپ و استایل خارجی دیگه ای هم داشته باشد یعنی به صفحه رفرنس جدا داشته باشد حالا مثل bootstrap که نیاز به فایل جاوااسکریپت خودش هم دارد , برای همین منظور یک سری سیستمهای تزریق وابستگی تو دنیا هست که معروف ترین آن RequireJS است.

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

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

به طور مثال اینجا چون هر کسی که بخواهد از این پلاگین استفاده کند , حتما"  ‌asmodal را باید call  کند و asmodal را به عنوان کلید واسبتگی تعریف کرده و شما در این قسمت هم می توانید از اسکریپت ها و استایل ها برای bundle تون وابستگی تعریف کنید , که حالا این asmodal  ما واسبتگی دارد به asmodal.css یعنی یه فایل js است که یک فایل CSS هم دارد,  آن موقع سیستم تزریق وابستگی هرکجا به asmodal برخورد بصورت اتوماتیک asmodal.js و asmodal.css برای شما لود می کند .