استخدام polyfills عند كتابة التطبيقات عبر المستعرض

في الآونة الأخيرة ، حدث قصة مضحكة بالنسبة لي. لقد صنعت مشروع ويب ووسعت قدرات تطبيق موجود ، يستخدمه الموظفون في مؤسستي. بدا كل شيء على ما يرام ، كنت سعيدًا لإطلاق المشروع ، ونتطلع إلى رسائل شكر.

بعد أيام قليلة من الإصدار الأول ، بدأت بالفعل في تلقي الرسائل. ولكن شكرا لم يلاحظ فيها. كتب لي المديرون والعاملون في مجال الموارد البشرية وجميع الذين حاولوا استخدام برنامجي. وقال كل منهم أن تطبيقها لا يعمل بشكل صحيح.



ما هو الموضوع؟ ولكن الحقيقة هي أنه عندما أنشأت المشروع ، قمت باختباره في Chrome. لكن مستخدمي هذا المشروع يستخدمون باستمرار Firefox و IE. العمل مع طلبي لم يكن استثناء. في النهاية ، كنت مستاءً تمامًا من أن المشروع ، الذي تم إطلاقه قبل يومين ، كان لا بد من الانتهاء منه.

كما واقع الأمر ، هنا polyfills جاء لمساعدتي.

Polifilly

إن polyfill (polyfill أو polyfiller) هي جزء من الكود (أو مكون إضافي معين) يقوم بتنفيذ ما يتوقعه المطور بين إمكانيات المتصفح القياسية. تسمح Polyfills ، إذا جاز التعبير ، بـ "تخفيف" مخالفات واجهات برمجة التطبيقات للمستعرض.

في بيئة الويب ، يتم تمثيل polyfills عادةً بواسطة كود JavaScript. يستخدم هذا الرمز لتزويد المتصفحات القديمة بالميزات الحديثة التي لا تدعمها هذه المتصفحات.

على سبيل المثال ، باستخدام polyfill ، يمكنك محاكاة وظيفة عنصر Canvas HTML في Microsoft Internet Explorer 7. لهذا ، يتم استخدام البرنامج الإضافي Silverlight. يمكن استخدام Polyfill لدعم وحدات القياس rem في CSS ، أو سمة text-shadow ، أو أي شيء آخر. الأسباب التي تجعل المطورين لا يستخدمون polyfills على وجه الحصر ، دون الاهتمام بالقدرات المضمنة للمتصفحات ، هي أن الإمكانات القياسية للمتصفحات توفر وظائف أفضل وأداء أعلى. تمتلك تطبيقات المستعرض الخاصة بواجهات برمجة التطبيقات المتعددة ميزات أكثر من ملفات polyfills ، وتعمل بشكل أسرع.

أحيانًا يتم استخدام polyfills لحل المشكلات المرتبطة بحقيقة أن المستعرضات المختلفة تقوم بتنفيذ نفس الميزات بطرق مختلفة. تتفاعل polyfill مع بعض المتصفحات ، باستخدام ميزاتها غير القياسية ، وتمنح برامج JavaScript الأخرى الوصول إلى آليات معينة تتوافق مع المعايير. تجدر الإشارة إلى أن هذه الأسباب لاستخدام polyfills اليوم لم تعد ذات صلة كما كان من قبل. كانت Polyfills سائدة بشكل خاص في أيام IE6 و Netscape و NNav ، عندما قام كل متصفح بتطبيق إمكانيات JavaScript بطريقة مختلفة عن الأخرى.

مثال

لقد نشرت مؤخرًا دليل تطوير لتطبيق يحول ملفات CSV و Excel إلى JSON باستخدام JavaScript. هنا يمكنك رؤية التطبيق النهائي.

للتعامل مع ما سنتحدث عنه لاحقًا ، يمكنك إما القيام بكل ما تمت مناقشته في الدليل ، أو استنساخ مستودع التخزين الخاص بي باستخدام الأمر التالي:

 git clone https://github.com/YannMjl/jsdemo-read-cvs-xls-json cd jsdemo-read-cvs-xls-json 

أوصي باستخدام رمز VS في هذه العملية. يمكنك تشغيل تطبيق الويب محليًا باستخدام ملحق VS Code Live Server .

دعنا نعدل تطبيق الويب هذا وننظر إلى المشاكل التي تنشأ عند العمل باستخدام متصفحات مختلفة.

قم بإنشاء فرع polyfill في المستودع وقم بالتبديل إليه:

 git checkout -b polyfill 

سأبحث عن الموقف الذي نحصل عليه من ملفين أو أكثر من ملفات CSV ، وبعد معالجة نتائج الطلبات إلى واجهات برمجة التطبيقات المطابقة ، نخرج هذه البيانات إلى جدول HTML.

▍ الانتهاء من المشروع

قم بإنشاء ملف CSV جديد ( team2.csv ) في الدليل الجذر للمشروع ، ونتيجة لذلك يجب أن يكون هناك ملفان. هنا هو الملف الذي أضفته إلى المشروع.

نقوم script.js ملف script.js بحيث يقرأ البيانات من ملفين ويعرض جميع البيانات في جدول HTML. هنا هو script.js بي:

 // ******************************************************************** //                         * //   ,      * // ******************************************************************** var csv_file_API_1 = "./UsersSample.csv"; var csv_file_API_2 = "./team2.csv"; var APIs_array = [csv_file_API_1, csv_file_API_2]; //       $(document).ready(function () {    $("#headerTitle").hide(300).show(1500);    makeAPICalls(); }); // end: document.ready() function makeAPICalls() {    // ,      API    var calls = [];    //  API  CSV-     APIs_array.forEach(function (csv_file_API) {        //             calls.push(new Promise(function (resolve, reject) {            //   API   AJAX            $.ajax({                type: "GET",                url: csv_file_API,                dataType: "text",                cache: false,                error: function (e) {                    alert("An error occurred while processing API calls");                    console.log("API call Failed: ", e);                    reject(e);                },                success: function (data) {                    var jsonData = $.csv.toObjects(data);                    console.log(jsonData);                    resolve(jsonData);                } // end:       API            }); // end: AJAX-        })); // end:         }); // end:   API    //      API    Promise.all(calls).then(function (data) {        //           var flatData = data.map(function (item) {            return item;        }).flat();        console.log(flatData);        dislayData(flatData);    }); } function dislayData(data) {       $.each(data, function (index, value) {        $('#showCSV').append(            '<li class="list-group-item d-flex justify-content-between align-items-center">' +                '<span style="width: 15%; font-size: 1rem; font-weight: bold; color: #37474F">' +                    value['FIRST NAME'] +                '</span>' +                '<span style="width: 15%; font-size: 1rem; color: #37474F">' +                    value['LAST NAME'] +                '</span>' +                '<span class="badge warning-color-dark badge-pill">' +                    value['PHONE NUMBER'] +                '</span>' +                '<span class="badge success-color-dark badge-pill">' +                    value['EMAIL ADDRESS'] +                '</span>' +                '<span class="badge badge-primary badge-pill">' +                    value.CITY +                '</span>' +                '<span class="badge badge-primary badge-pill">' +                    value.STATE +                '</span>' +            '</li>'        );    }); } 

الآن ، بعد نسخ عنوان الصفحة ، افتح المشروع في جميع المتصفحات التي لديك. في حالتي ، كانت هذه هي Internet Explorer و Firefox Mozilla و Microsoft Edge و Google Chrome. اتضح أن التطبيق توقف عن العمل بشكل طبيعي في Internet Explorer و Microsoft Edge. تم عرض الرؤوس فقط هناك.


صفحة مشروع كروم


صفحة Microsoft Edge Project

لا توجد بيانات على الصفحة تعرضها بعض المتصفحات لسببين:

1. لقد استخدمت الوعود وعمليات الاسترجاع التي لا تدعمها جميع المتصفحات. على سبيل المثال ، من بين هذه المتصفحات IE و Edge.
2. استخدمت طريقة المصفوفة flat() أجل إنشاء مصفوفة "مسطحة" جديدة من مصفوفة موجودة. هذه الطريقة غير مدعومة من قبل بعض المتصفحات. من بينها ، كما في الحالة السابقة ، IE و Edge.

poly تطبيق polyfills

نصلح مشكلة الوعود وعمليات الاسترجاعات باستخدام مكتبة Bluebird . هذا هو تنفيذ JS الكامل للآليات المتعلقة بالوعود. الميزة الأكثر إثارة للاهتمام في مكتبة Bluebird هي أنها تسمح لك "بتجاوز الطبقة" وحدات Node الأخرى ، ومعالجتها بحيث يمكنك التعامل معها بشكل غير متزامن. يمكن تطبيق هذا النوع من المعالجة على الكود الذي يستخدم عمليات الاسترجاعات.

قم بتنزيل مكتبة Bluebird إلى الصفحة باستخدام مورد CDN المناسب. للقيام بذلك ، ضع ما يلي في رأس ملف index.html (في عنصر head ):

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.0/bluebird.min.js"></script> 

لحل المشكلة المتعلقة بطريقة صفيف flat() ، أضف التعليمات البرمجية التالية إلى أعلى ملف script.js :

 Object.defineProperty(Array.prototype, 'flat',    {        value: function (depth) {            depth = 1;            return this.reduce(                function (flat, toFlatten) {                    return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);                }, []            );        },        configurable: true }); 

الآن يجب أن يعمل التطبيق في جميع المتصفحات كما هو متوقع. هنا ، على سبيل المثال ، هو كيف يبدو الآن في Microsoft Edge.


صفحة المشروع المكررة في Microsoft Edge

لقد نشرت هذا المشروع هنا . يمكنك تجربة ذلك.

إذا لم تنجح في تشغيل المشروع ، فراجع مستودع التخزين الخاص بي.

وهنا - على سبيل المثال - زوجين polyfills أكثر.

 //   String.prototype.startsWith() if (!String.prototype.startsWith) {    Object.defineProperty(String.prototype, 'startsWith', {        value: function (search, rawPos) {            pos = rawPos > 0 ? rawPos | 0 : 0;            return this.substring(pos, pos + search.length) === search;        }    }); } //   String.prototype.includes() if (!String.prototype.includes) {    String.prototype.includes = function (search, start) {        'use strict';        if (typeof start !== 'number') {            start = 0;        }        if (start + search.length > this.length) {            return false;        } else {            return this.indexOf(search, start) !== -1;        }    }; } 

النتائج

كانت Polyfills ذات صلة بشكل خاص من قبل ، ولكن حتى اليوم يمكنهم المساعدة في تطوير مشاريع الويب عبر المستعرضات. نأمل أن يكون المثال الوارد هنا قد سمح لأولئك الذين لم يعرفوا عن polyfill بإلقاء نظرة جديدة على مشكلة إنشاء مواقع مصممة لمتصفحات مختلفة.

أعزائي القراء! هل تستخدم polyfill؟