السنة الجديدة IMaskjs 6 - رد فعل الأصلي ، أنابيب ، ESM

مرحبا بالجميع!

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

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

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

نحن تسلق الأنبوب على React Native

بقدر ما أعرف ، React Native هو مشروع واسع النطاق يعيش منذ فترة طويلة جدًا ، ويستخدم حتى الأشخاص الجادين في المشروع. منذ عامين ، حاولت استخدام RN في مشروع اختبار صغير واحد ، وكانت تلك هي نهاية ممارستي - ذهبت إلى الويب. في الوقت نفسه تقريبًا ، قمت بعمل مكون إضافي للقناع على RN وحاولت بجد وبجدية جعله يعمل كما أريد ، لكن لم أستطع. لقد وجدت العديد من الأخطاء في مستودع RN على معالجة المدخلات وتحديد المواقع المؤشر ، هدأت وقررت الانتظار قليلا.

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

إحدى الصعوبات هي أن تسلسل أحداث الإدخال في RN يختلف عن المستعرض. على سبيل المثال ، في متصفح حدث الإدخال ، يكون المؤشر بالفعل في الموضع الجديد ، ولكن في RN يوجد حدث onSelectionChange منفصل يحدث بعد تغيير القيمة ، وفقط على iOS ، على Android ، والعكس بالعكس. والنقطة الثانية - لا يمكنك تغيير القيمة في الحقل في الحقل في معالج الأحداث لحدث تغيير القيمة على RN ، وهو نفس الشيء مع موضع المؤشر. لذلك ، فإن التأخير في التغيير أمر لا مفر منه ، ونتيجة لذلك ، فإن ارتعاش النص والنص. تبلغ هذه الأخطاء من العمر ثلاث سنوات تقريبًا ، لذلك لا أرى أي سبب للانتظار لفترة أطول - لقد قمت بطرح المكون الإضافي كما هو ، لكنني لا أوصي باستخدامه. بدلاً من ذلك ، لقد فعلت ذلك لجذب انتباه الجمهور: ربما سيتم إصلاح الخلل في RN ، أو ربما شخص ما سيقوم بتوصيل معالجة الأحداث في IMask إلى الكود الأصلي ، حيث يمكن تجنب هذه المشاكل.

الأنابيب الخاصة

الآن قليلا عن الخير. يمكن الآن استخدام القناع للتنسيق والتحويل:

const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); // `numberPipe` -    numberPipe('1'); // "1,00" 

يمكنك إعادة استخدام قناع واحد للعمل مع الإدخال والتنسيق ، على سبيل المثال في نموذج:

 //     const mask = IMask(el, { mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); //   pipe    , //     IMask.pipe( 1, //  mask.masked, //     IMask.PIPE_TYPE.TYPED, //     IMask.PIPE_TYPE.UNMASKED //     ) // 1.00 

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

وحدات ESM

قبل عامين ، عندما كان القناع حوالي 30 كيلو بايت ، أخبرت الجميع أن هذا القناع ليس كثيرًا. الآن ما يقرب من 60 كيلو بايت وحتى بدا لي الكثير. هناك حل بسيط واحد - غزيب خذ فقط ما تحتاجه. من الناحية المثالية ، يجب على المجمع أن يحلل التبعيات تلقائيًا ويرمي كل شيء غير مستخدم. على الرغم من أن وحدات ESM كانت موجودة في القناع لفترة طويلة ، إلا أن تهتز الأشجار لم ينجح تقريبًا بسبب ذلك كانت الإشارات إلى الكيانات الداخلية في كائن IMask الجذر. تم ذلك بسبب وجود تبعيات دورية داخل القناع ، وأيضًا لأنني أردت أن يكون القناع قادرًا على استيراد كل كائن جذري واحد أو بشكل منفصل في أجزاء. على سبيل المثال ، يتم ذلك في React:

 import { Component } from 'react'; import React from 'react'; React.Component === Component; // true 

في IMask 6.0 ، تم قطع الارتباط الثابت بين الوحدات النمطية وأصبح من الممكن استيراد الوحدات النمطية الفردية:

 //    // import IMask from 'imask'; //      import IMask from 'imask/esm/imask'; //   ,   //    import 'imask/esm/masked/number'; //      ,       const numberMask = IMask(element, { mask: Number }); 

في هذه الحالة ، يمكنك الاستمرار في استخدام النهج القديم ولن ينكسر أي شيء ، ولكن لن ينجح تهتز الأشجار أيضًا.

حسنًا ، بالنسبة للمبتدئين: يحتوي الإصدار الجديد على دعم لمكونات المحتوى والرضا ! شكرا للمجتمع على ردود الفعل وتجمع الطلبات.

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

كل النجاح والإلهام في العام الجديد ، مع القادمة!