رمزگشایی JS: Polyfills و Transpilers

پلی پرها

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

گاهی اوقات، آنها همچنین برای حل مشکل مرورگرهای مختلف استفاده می‌شوند که یک ویژگی را به روش‌های مختلف پیاده‌سازی می‌کنند و به جاوا اسکریپت راهی مطابق با استاندارد برای دسترسی به ویژگی می‌دهند – این دلیل برای poly-filling در روزهای قدیمی IE6 و Netscape رایج بود، جایی که هر مرورگر برای پیاده سازی ویژگی های مختلف به طور متفاوت استفاده می شود.

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

چند نمونه

ویژگی های زبان مدرن، نه تنها شامل عملگرها یا ساختارهای نحوی، بلکه توابع یا روش ها نیز می شود. در نظر بگیرید String.prototype.startsWith() روش – برای تعیین اینکه آیا یک رشته با کاراکترهای یک رشته مشخص شروع می شود یا خیر استفاده می شود true یا false به عنوان مناسب. مثال –

// startsWith(searchString)
// startsWith(searchString, position)
const myString = 'I am learning polyfill';

console.log(myString.startsWith('I am'));
// Expected output: true
console.log(myString.startsWith('hello', 3));
// Expected output: false

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

// If the method doesn't exist - 
if (!String.prototype.startsWith) {

 // Use a function that takes the same params, with position defaulting to 0 if not supplied and perform the same functionality as the original method, using the substr method.

 String.prototype.startsWith = function (searchString, position) {
    position = position || 0;
    return this.substr(position, searchString.length) === searchString;
  };
}

بیایید مثال دیگری بزنیم –

Math.trunc(n) تابعی است که بخش اعشاری یک عدد را “قطع” می کند، به عنوان مثال Math.trunc(1.11) برمی گرداند 1.

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

یک پلی پر برای آن ممکن است شبیه به این باشد –

if (!Math.trunc) { // if no such function implement it
    Math.trunc = function(number) {
    // Use the Math.ceil and Math.floor methods supported in legacy browsers to implement it
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
} 

این Number.isNaN ویژگی قبلی در چندین مرورگر پشتیبانی محدودی داشت. یک پلی پر محبوب برای آن به نظر می رسد –

// NaN !== NaN returns a true, and hence this logic and exception :) 
if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

همچنین، به یاد داشته باشید – همه ویژگی های جدید به طور کامل قابل چندپر کردن نیستند. گاهی اوقات بیشتر رفتارها می توانند چند پر شوند، اما هنوز انحرافات کوچکی وجود دارد. شما باید واقعاً در اجرای پلی فیل خود دقت کنید، مطمئن شوید که تا حد امکان به مشخصات دقیق پایبند هستید. یا بهتر از آن، از مجموعه پلی‌فیل‌هایی که قبلاً بررسی شده‌اند استفاده کنید، مانند مواردی که توسط آن‌ها ارائه شده است ES5-Shim و ES6-Shim.

بسته هایی مانند Core-js می توانند در اینجا کمک کنند.

ترانسپایلرها

ترانسپایلر نرم افزاری است که یک کد را به دیگری ترجمه می کند.

می تواند کد منبع مدرن را بخواند و آن را برای موتورهای مرورگر قدیمی با استفاده از ساختارهای نحوی قدیمی بازنویسی کند.

یک مثال محبوب است nullish coalescing operator (??)، جاوا اسکریپت قبل از سال 2020 این اپراتور را نداشت، بنابراین موتورهای مرورگر قدیمی تر چیزی شبیه به name = name ?? "No name" .

یک ترانسپایلر این را می فهمد و آن را بازنویسی می کند –

// before transpiling
name = name ?? "No name";

// after transpiling
name = (name !== undefined && name !== null) ? name : "No Name";

این کد توسط مرورگرهای قدیمی قابل درک است.

توسعه دهندگان ترانسپایلر را روی رایانه خود اجرا می کنند و این کد را در سرورها مستقر می کنند. برخی از ترانسپایلرهای محبوب عبارتند از – Babel.

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

TL: DR;

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

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