بازگشت به دوره

وب را خراب نکنید

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

اما وظیفه‌ی شما به عنوان یک برنامه‌نویس این است که برنامه‌های خود را طوری بنویسید که تا حد امکان در مرورگرهای قدیمی نیز به خوبی اجرا شوند. کاملاً واضح است که اگر از ویژگی‌های موجود در نسخه‌های جدید استاندارد ECMAScript استفاده کنید، برنامه‌ی شما در مرورگرهای قدیمی‌تر که از این استانداردها پشتیبانی نمی‌کنند قابل اجرا نخواهد بود. اما در صورت استفاده نکردن از این ویژگی‌های جدید نیز، عملاً به وجود آمدن استانداردهای جدید، بی معنی خواهد بود. چرا که امکان استفاده از آنها برای برنامه‌نویسان فراهم نیست. پس چاره چیست؟!

این مشکل را می‌توان با استفاده از Transpiler ها حل کرد. Transpiler نوعی مترجم (یا کامپایلر) است که برنامه‌ی نوشته شده با استانداردهای جدید جاوا اسکریپت را دریافت کرده و معادل آن برنامه را در استاندارد قدیمی‌تر (ECMAScript 5) تولید می‌کند. به طوری که دقیقاً همان کارایی برنامه‌ی اولیه را داشته باشد. در این صورت شما می‌توانید کدهای خود را مطابق با آخرین استاندارهای ECMAScript بنویسید. سپس آن را با استفاده از یک Transpiler (مانند Babel) به معادل همان کدها در ECMAScript 5 تبدیل کنید. در این صورت برنامه‌ی شما تقریباً در تمام مرورگرها قابل اجرا خواهد بود. (تقریباً تمام مرورگرهای ارائه شده از سال ۲۰۱۱ به بعد، پشتیبانی کاملی از ECMAScript 5 دارند)

ساده‌ترین روش استفاده از Transpiler ها ضمیمه کردن فایل آن به سند HTML است. مثلاً برای استفاده از Babel می‌توانید کد زیر را به سند HTML خود اضافه کنید.


<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

دقت کنید که این تگ <script> باید قبل از تمام تگ‌های <script> موجود در سند HTML قرار گیرد. همچنین لازم است تا مقدار خاصیت type، برای سایر تگ‌های <script> برابر با "text/babel" قرار گیرد. مانند کد زیر :


<script type="text/babel" src="main.js"></script>

البته باید توجه کنید که این بهترین روش برای استفاده از Transpiler ها نیست. چرا که در این روش، در هر بار بارگذاری صفحه‌ی وب، باید مجدداً کدهای شما توسط Transpiler ترجمه شوند که این موجب کاهش سرعت اجرای برنامه‌ها خواهد شد. اما فعلاً برای اهداف آموزشی ما همین روش ساده، مناسب است. روش بهتر این است که فرایند ترجمه‌ی کدها را در پروسه‌ی ساخت (Build Process) قرار دهیم که این موضوع در فصل ۱۳ مورد بحث قرار خواهد گرفت.