یک polyfill چیست؟

پولی‌فیل چیست؟ راهی برای سازگاری مرورگرها

سلام دوستان. حتماً براتون پیش اومده که یک وب‌سایت رو روی کامپیوتر خودتون خیلی خوب ببینید، اما وقتی همون سایت رو روی گوشی موبایل دوستتون باز می‌کنید، یه قسمت‌هایی درست کار نمی‌کنه یا اصلاً نشون داده نمیشه. دلیلش چیه؟ دلیلش اینه که مرورگرهای مختلف (مثل کروم، فایرفاکس، سافاری و غیره) ممکنه از همه ویژگی‌های جدید یکسان پشتیبانی نکنن.

اینجاست که پای "پولی‌فیل" (Polyfill) به میون میاد. پولی‌فیل مثل یه مترجم یا یه آداپتور عمل می‌کنه. اگه یه مرورگری یه ویژگی جدید رو نفهمه، پولی‌فیل میاد و اون ویژگی رو شبیه‌سازی می‌کنه تا سایتتون درست کار کنه. به زبان ساده، پولی‌فیل یه تیکه کده که کاری رو انجام میده که مرورگر باید به صورت پیش‌فرض انجام بده، ولی نمیده!

فرض کنید یه ماشین حساب جدید خریدید، اما این ماشین حساب دکمه‌ی جذر (√) نداره. یه برنامه‌نویس میتونه یه برنامه بنویسه که کار جذر رو انجام بده و شما اون برنامه رو به ماشین حساب وصل کنید. این برنامه مثل یه پولی‌فیل عمل میکنه و کمبود ماشین حساب رو جبران میکنه. فقط بجای ماشین حساب، اینجا پای مرورگر و کدهای وب درمیونه.

چرا به پولی‌فیل نیاز داریم؟

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

چطور پولی‌فیل کار می‌کنه؟

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

برای مثال، فرض کنید شما میخواید از یه ویژگی جدید به نام fetch برای دریافت اطلاعات از یه سرور استفاده کنید. بعضی از مرورگرهای قدیمی این ویژگی رو پشتیبانی نمیکنن. شما میتونید یه پولی‌فیل برای fetch اضافه کنید. این پولی‌فیل بررسی میکنه که آیا مرورگر شما fetch رو پشتیبانی میکنه یا نه. اگه نه، اون پولی‌فیل میاد و با استفاده از روش‌های قدیمی‌تر (مثل XMLHttpRequest) همون کار رو انجام میده.

مثالی از پولی‌فیل

فرض کنید مرورگر شما از ویژگی Array.prototype.includes که برای چک کردن وجود یک عنصر در یک آرایه استفاده میشه، پشتیبانی نمیکنه. کد پولی‌فیل به شکل زیر می‌تونه باشه:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.includes called on null or undefined');
    }

    var O = Object(this);
    var len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1], 10) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) { // NaN-matching
        return true;
      }
      k++;
    }
    return false;
  };
}

    

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

مزایای استفاده از پولی‌فیل

• سازگاری با مرورگرهای مختلف: مهمترین مزیت پولی‌فیل اینه که به شما کمک میکنه تا سایت خودتون رو با مرورگرهای مختلف سازگار کنید.
• استفاده از ویژگی‌های جدید: شما میتونید با استفاده از پولی‌فیل، از ویژگی‌های جدید جاوااسکریپت استفاده کنید، حتی اگه مرورگرهای قدیمی اون ویژگی‌ها رو پشتیبانی نکنن.
• بهبود تجربه کاربری: با استفاده از پولی‌فیل، مطمئن میشید که همه کاربران، فارغ از نوع مرورگرشون، یه تجربه کاربری یکسان و خوب داشته باشن.

نحوه استفاده از پولی‌فیل

برای استفاده از پولی‌فیل، معمولاً باید اون رو به صفحه HTML خودتون اضافه کنید. شما میتونید پولی‌فیل‌ها رو از منابع مختلف دانلود کنید یا اینکه خودتون بنویسید. بعد از دانلود، پولی‌فیل رو قبل از کدهای اصلی سایتتون توی تگ <script> قرار بدید. مهمه که پولی‌فیل قبل از کدهای اصلی اجرا بشه تا مرورگر فرصت داشته باشه ویژگی‌های جدید رو بشناسه.

جدول: مرورگرها و پشتیبانی از ویژگی‌ها

مرورگر	نسخه	پشتیبانی از ES6 (مثال)	نیاز به پولی‌فیل (تقریبی)
Chrome	آخرین نسخه	بله	کم
Firefox	آخرین نسخه	بله	کم
Safari	آخرین نسخه	تقریباً بله	متوٍسط
Internet Explorer	11	خیر	زیاد
Edge	آخرین نسخه	بله	کم

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

خلاصه

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

امیدوارم این توضیحات براتون مفید بوده باشه. موفق باشید!

کلمات کلیدی

پولی‌فیل, سازگاری مرورگر, جاوااسکریپت, ویژگی‌های جدید, مرورگرهای قدیمی, وب, توسعه وب

پولی‌فیل دقیقا چیکار میکنه؟

پولی‌فیل کدیه که یه ویژگی جدید جاوااسکریپت رو در مرورگرهایی که اون ویژگی رو به صورت پیش‌فرض ندارن، شبیه‌سازی میکنه.

آیا استفاده از پولی‌فیل همیشه ضروریه؟

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

پولی‌فیل‌ها رو از کجا میتونم پیدا کنم؟

پولی‌فیل‌ها رو میتونید از منابع مختلف پیدا کنید. بعضی از کتابخانه‌ها و فریم‌ورک‌های جاوااسکریپت، پولی‌فیل‌های خودشون رو دارن. همچنین میتونید از سایت‌هایی مثل cdnjs.com پولی‌فیل‌های مورد نیازتون رو دانلود کنید. یه موقع هایی هم میشه خودتون بنویسید!

آیا پولی‌فیل‌ها سرعت سایت رو کم میکنن؟

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

به جای پولی‌فیل چه راه های دیگری وجود دارد؟

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