إنشاء مكونات مخصصة لـ Bootstrap 4

لقد ترجم الرأي العام Bootstrap إلى فئة الأطر الأسطورية في الماضي ، لكنه لا يزال يستحق المشاهدة. Bootstrap 4 هو متصفح ممتاز للتخطيط الآمن ، والأهم من ذلك ، عينة من HTML عبر نهج JS لإنشاء تطبيقات الويب ، تكشف تمامًا عن القدرات الحالية لـ HTML للوصف التعريفي لواجهة المستخدم.

ومن المفيد أيضًا الحصول على فكرة عن كيفية تطوير كود JavaScript Framework. لا تزال بنية مكونات jQuery قيد الاستخدام ، ولكن من الإصدار 4 يتم تغليفها بواسطة Rollup في فئات ES6 التي تم تحويلها باستخدام Babel6 . ربما لن يكون jQuery قريبًا على الإطلاق - المزيد عن ذلك لاحقًا - ولكن في الوقت الحالي ، باستخدام مثال إنشاء المكون الإضافي BsMultiSelect الخاص بك ، على نفس المكدس مثل Boostrap 4 ، سيتم الكشف عن ميزات تطوير الإطار.

لماذا " يجب على كل مبرمج أن يكتب له ... "

" تحسين الغنائم فقط ." كانت الحاجة إلى فهم ما حصل عليه Bootstrap الجديد هو نقل مكوناته إلى المكدس الجديد ، ومدى سهولة إنشاء مكونات عالية الترتيب الآن. بدا كل شيء بسيطًا: قم بدمج .form-control و .badge و. .dropdown-menu ويمكنك بسهولة الحصول على .dropdown-menu متعددة ...

صراع العمارة من المدخل

لا يستخدم المكون الإضافي BsMultiSelect الناتج رمز JS bootstrap.js مباشرةً ، ولكنه يستخدم تبعيته ، popper.js (إطار عمل منبثق بالفانيليا). وذلك لأن مكوّن القائمة المنسدلة من bootstrap.js يحتاج إلى العثور على ما يسمى بعنصر التبديل أثناء التهيئة في DOM (في الحالة الخاصة ، فهو زر يفتح القائمة) ، إذا لم يعثر عليه ، فإنه يتعطل مع وجود خطأ (حيث أقوم بإنشاء مباشرة من js ثم لدي "أزرار" بالطبع لا). الخلاصة: لا يمكن إنشاء المكونات المشحونة ضمن "HTML عبر JS" (أو بشكل غير مؤاتٍ) مباشرةً من JS. الاستنتاج الثاني: أنت بحاجة إلى برمجة مكونات مخصصة بحيث يكون هناك مكون أخف من "JS خالص" تحت مكون "HTML عبر JS". لقد قمت بمسح MulitSelect.js بالكامل ليس فقط من التعليمات البرمجية ولكن أيضًا من أنماط Bootstrap. يلعب MulitSelect.js نفس الدور لـ BsMulitSelect.js ، كما يفعل popper.js لـ dropdown.js.

كلمتين عن popper.js

مكتبة عظيمة - وظيفة واحدة. يكرر DropDown.js ولكنه يوفر واجهة محدودة تمامًا له (مرة أخرى ، لأنه في "HTML عبر JS" ، لا يلزم واجهة برمجة التطبيقات بالكامل). بوبر لديه مشكلة مفتوحة أكثر مما نود. شعرت بخيبة أمل لأنه في ظل IE11 ينشر أحداثًا ليست مثل Chrome .

حول الانتقال من IIFE إلى الفصول الدراسية

إن اللوح القياسي المساعد jQuery هو تحديد وظيفة المنشئ داخل IIFE . الآن هذه فئة داخل IIFE. الافتتاح: تتعارض الطرق الوظيفية القديمة للقيام بالطرق الخاصة مع ES6 lambda ، لذا تم "التخلي عنها" في Bootstrap. جميع الطرق عامة ، بينما تكون الطرق الخاصة الزائفة مسبوقة بـ _ على سبيل المثال سفلي. أفهم أنني مخطئ ، لكني أتبع اصطلاحي - "الأساليب العامة بحرف كبير". في كل شيء آخر ، أنشأت BsMultiSelect اعتماد اتفاقية DropDown.js "القياسية" ، أي أود أن أمثله كنوع من الغلايات مع اللحم.

 import $ from 'jquery' import AddToJQueryPrototype from './AddToJQueryPrototype' import MultiSelect from './MultiSelect' // ... ( (window, $) => { AddToJQueryPrototype('BsMultiSelect', (element, optionsObject, onDispose) => { // ... return new MultiSelect(element, optionsObject, onDispose, facade, window, $); }, $); } )(window, $) 

اتفاقية جديدة: يجب أن ينشر البرنامج المساعد المُنشئ - حتى لا يفقد المُنشئ داخل IIFE. نعم ، يجب أن يبقى IIFE واحد - لم يقم أحد بإزالة مهمة تحديد النافذة ، والتبعيات $ و Popper (لأولئك الذين "لا يمكنهم الدخول إلى الوحدات النمطية") بطريقة قياسية.

تكوينات Eslint و Stylelint Linter

لم أشعر بالالتزام باتباع القواعد الصارمة لتصميم رمز Bootstrap. من المؤكد أنهم يكتبون في بيئة تساعدهم في تحديد المساحات وللتشدد في التحكم بالمصادر أمر جيد جدًا ، ولكن من الصعب بالنسبة لي أن أستمع كل ثانية إلى حزن الديدان في VS Code. عند كتابة المكوّن الإضافي الخاص بك ، يمكن ويجب تخفيف القواعد إلى حد كبير.

Eslint ، قد لا يظهر stylelint كثيرًا ، ولكن لا توجد رغبة في النظر إلى القواعد الجديدة. في جميع الجوانب ، يزعجني هذا الإنجاز أكثر.

رمز المنظمة ومجموعها

يتم تجميع كود Bootstrap ES6 القابل لإعادة التوزيع عن طريق مجموعة التحديثات في نسختين: bootstrap.js المستقلة و bundle bootstrap.bundle.js - يحتوي الأخير على popper.js.

مؤلف rollup.config.js لديه غرائز غريبة عني. كل هذا التحول في التكوين من خلال الضغط والبوب ​​، اعتمادًا على الإصدار المطلوب من الحزمة المستقلة أو الحزمة ، يبدو مفصلاً ومخيفًا ، لحسن الحظ لكتابة مكون إضافي ، فأنت بحاجة فقط إلى نوع واحد من الحزمة "مستقل" ولا يتعين علي إثبات أنه يمكنني القيام بعمل أفضل.

يشار أيضًا إلى الإصدار المستقل من Bootstrap في المجال الرئيسي للحزمة ، أي يتم حل تبعيات npm في نفس الملف الذي يقوم المستخدمون بتحميله عبر <script> . هذا ليس حلاً لا لبس فيه ، لكن المكون الإضافي BsMultiSelect قد اتبع نفس المسار. في هذه الحالة ، يمكن تضمين مساعدي بابل في المكون الإضافي ، على الرغم من حقيقة أنهم مدرجون أيضًا في bootsrap.js. الازدواجية ليست صحيحة بطريقة أو بأخرى ...

ما هو مثير للاهتمام هو أن Bootstrap يحتوي على تكوين متوازي تحت jspm - محمل وحدة ES للمتصفح الأصلي وحقله الرئيسي هو بالفعل رمز بعيد ، 12 مكونًا غير مجمعة ، ولكن يتم تخزينها بشكل منفصل في دليل js / dist. هنا ، يحتوي كل ملف على مساعد بابل. Jspm الآن في مفترق طرق ، لذلك من خلال إنشاء BsMultiselect تجاهلها.

ومع ذلك ، من المثير للاهتمام أن تسأل الخبراء ، هل ستقوم jspm برفع المساعد المساعد المكرر المكرر 12 مرة إلى المتصفح؟

تم اكتشاف مجموعة كبيرة من التراكمي - حزمها قابلة للقراءة ، على عكس حزم الويب.

يستخدم Bootsrap 4 Babel 6 والمكون الإضافي BsMultiSelect Babel 7

تم ترحيل BsMultiSelect بسهولة إلى الإصدار التجريبي من Babel 7 باستخدام مكون Rollup -babel-plugin المحدث (أيضًا في الإصدار التجريبي). يجدر الانتقال إلى Babel 7 الآن بسبب @babel/preset-env (تكوين المترجم "الذي سيتم تشغيل الكود على المتصفحات"). باستخدام الإنترنت وحده ، أصبح من الصعب جدًا فهم كيفية عمل الإعدادات المسبقة لـ ES6 ، وقد مروا بتطور طويل وتراكمت العديد من التكوينات القديمة. من الأفضل المراهنة على Babel 7 + @babel/preset-env الفور

ومع ذلك ، فإن أخطاء beta التجريبية لم تضطر إلى الانتظار طويلاً: [... nodeList] تم ترجمتها في nodeList.concat (). لم أكن أفهم لفترة طويلة ، ترجمة الرمز إلى مكالمات jquery (هذا لا يزال ضروريًا ، ولكن المزيد عن ذلك لاحقًا) حل المشكلة. اسأل: "لماذا إذاً بابل على الإطلاق إذا لم تتعامل معه؟" ، الجواب: "واردات ولامدا".

الجوانب العملية

يحتوي Bootstrap 4 والمكون الإضافي الخاص به (مثل أي كود js) على خيارين للتحميل في المتصفح: من خلال النص البرمجي / النمط (إنشاء "صفحة") ، ومن خلال عقدة التجميع / webpack (إنشاء "تطبيق" ، لذلك سأواصل هذين من حيث المبدأ ، حالات مختلفة للغاية وتشير إلى: "الصفحة" و "التطبيق").
بالنسبة للصفحة والتطبيق ، سيتم استخدام نفس "ملف التوزيع" الخاص بـ Bootstrap. هذا ليس حلاً واضحًا وليس الحل الوحيد (كمثال ، يتم استخدام رمز مختلف لـ jspm واختبارات mocha ) ، ولكن عند إنشاء المكون الإضافي الخاص بك ، لا يوجد شيء يمكنك فعله سوى اتباع هذه الاتفاقية ، على أمل أن تكون مثالية.

إن إيجاد توازن بين تلبية حاجتين باستخدام نفس الرمز لخيارين مختلفين للتنزيل: "الصفحات" و "التطبيقات" هي المهمة المعمارية الرئيسية التي تواجه مطور المكونات الإضافية.

بعد كل شيء ، يمكن أيضًا إنشاء المكون الإضافي Bootstrap مؤقتًا ، مباشرة في تطبيقك. في هذه الحالة ، يمكنك كتابة رمز المكون الإضافي مع جميع الملذات: polyphiles والوصول إلى متغيرات SASS للمخطط. ومع ذلك ، عند الاعتماد على إعادة الاستخدام ، سيكون من الضروري نقل المكون الإضافي إلى حزمة npm الخاصة به ، وتندرج الملذات المذكورة أعلاه إلى فئة المشاكل: تفقد الوصول إلى متغيرات SASS وتحتاج إلى مراعاة منشئي "الصفحات" التي تربط المكون الإضافي عبر برنامج نصي (أين هي الملفات المتعددة؟).

الوصول إلى متغيرات نمط SASS Bootstrap 4

أود أن أكتب فئات / محددات Bootstrap css لكتابة البرنامج المساعد. في هذه الحالة ، عند تخصيص سمة Bootstrap ، يمكنك توقع أن يتكيف البرنامج المساعد دون بذل جهد إضافي.

بالنسبة للمكون الإضافي المنشور ذاتيًا ، لا يوجد وصول إلى متغيرات SASS.

فئات / محددات css الحالية - لا تغطي جميع الأنماط اللازمة لـ BsMutliSelect ، على سبيل المثال ، أنت بحاجة min-height لـ ul.form-control ، عندما يكون في bootstrap.css محددًا فقط لـ css بارتفاع input.form-control - لا يمكنك تطبيقه ل ul . تجلب الفئات / المحددات الحالية الكثير من الأنماط غير الضرورية: ماذا لو كنت تريد تعيين اللون ، على سبيل المثال ، من .form-control إلى عنصر دون تعيين class .form-control ؟ لن يعمل هذا لأنه لا توجد فئة مثل .input-color فيها نشر المتغير $ color-color "بشكل منفصل" عن كل شيء.

علاوة على ذلك ، لا يمكن اتباع قرارات فريق Bootstrap: ليس لديهم مثل هذه المشكلة ، إذا احتاجوا إلى ذلك - ينشئون فئة / محدد CSS مع المتغير المطلوب ويعملون عليه. إذا كنت ترغب في النقاش ، فسيتعين عليك أن توضح مع مارك أوتو ، في فريق BS أن هناك مستوى عال غير طبيعي من صنع القرار ، حتى بالنسبة للتغييرات التجميلية في محددات CSS ، إذا كانت الطلبات تندرج في فئة "العرض".

أقترح الحل التالي.

بالنسبة للصفحة (رفع مكون إضافي من خلال برنامج script ) ، يجب عليك تحمل عدم إمكانية الوصول إلى المتغيرات. ولكن ليس من الضروري عرض التعامل مع CSS - يمكن عرض المتغيرات التي يتعذر الوصول إليها لتخصيصها من خلال معلمات js ، حيث لا يوجد الكثير منها (ولا يتم تغييرها جميعًا بأي مخطط). بالنسبة لـ BsMultiSelect ، كانت المشاكل هي: اللون المعطل ، لون الإدخال ، ظل التحكم المركّز (إلخ. 10 أنماط فقط ، نادرًا ما يغير معظمها المخططات) ...

 $("select[multiple='multiple']").bsMultiSelect({ selectedPanelDefMinHeight: 'calc(2.25rem + 2px)', // default size selectedPanelLgMinHeight: 'calc(2.875rem + 2px)', // LG size selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)', // SM size selectedPanelDisabledBackgroundColor: '#e9ecef', // disabled background selectedPanelFocusBorderColor: '#80bdff', // focus border selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)', // foxus shadow selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)', // valid foxus shadow selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)', // invalid foxus shadow inputColor: '#495057', // color of keyboard entered text selectedItemContentDisabledOpacity: '.65' // btn disabled opacity used }); 

ولكن بالنسبة للتطبيق الذي يستخدم SASS والمجمع ، يمكنك عرض نسخ BsMultiSelect.scss إلى نفسك وتصحيح المسار إلى _variables.scss به. وبالتالي ، فإن "البرنامج المساعد" سيستقبل المتغيرات المتغيرة.

  $("select[multiple='multiple']").bsMultiSelect({ useCss: true }); 

تتم كتابة هاتين الطريقتين بشكل صريح في شفرة JS الخاصة بي ، من خلال "محولين". BsMultiSelect هو في الواقع مكونان إضافيان في واحد. واحد يعمل مع الأنماط من خلال متغيرات js ، يقوم المفوضون الآخرون بعمل css هذا.

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

ولكن مع المثال المبتكر ، آمل أن تتمكن من رؤية كيف يتكيف المكون الإضافي مع الدائرة الثقيلة بسهولة نسبيًا (كان من الضروري زيادة قيم ثلاثة أنماط فقط من خلال معلمات js).

 $("select[multiple='multiple']").bsMultiSelect({ selectedPanelFocusBoxShadow:"0px 0px 0px 0.2rem rgba(51,51,51,0.25)", selectedPanelFocusBorderColor:"#333", selectedPanelDisabledBackgroundColor: "#f7f7f9" }); 

هذا هو الحد الأقصى الذي يمكن تحقيقه باستخدام فئات CSS "القياسية" .bage ، .form-control ، و. تم تكييف كل شيء تقريبًا مع المخطط ، ولكن ليس كل شيء.

من المؤسف ، بالطبع ، أنه لا يمكنك الابتعاد عن هذه المعلمات الثلاث ، لا يمكن الوصول إلى جميع متغيرات نمط المخطط من خلال محددات / فئات css (أنا أكذب ، يمكنك المغادرة إذا كان بإمكانك نسخ BsMultiSelect.scss إلى نفسك وإحضار متغيرات الدائرة إليها ، ولكن هذا لا يرضي تمامًا ، مثل جميع القرارات التي تبدأ بكلمات "نسخ إلى نفسك").

انقر هنا: https://dashboardcode.imtqy.com/BsMultiSelect/indexsketchy.html

بوليفيل

في السيناريو "أنا أكتب مكوّنًا مؤقتًا مخصصًا داخل التطبيق" - ستستخدم @babel/polyfill دون أي مشاكل ، وتقوم بتصحيح ملف polyfill.io DOM لأنه موجود بالفعل داخل تطبيقك.

عند نقل المكوّن الإضافي إلى وحدة npm خارجية ، يختفي كل الفرح لأن مستخدمي Bootstrap لم يقرروا إرضاء القوائم الطويلة للملفات المتعددة المطلوبة في الوثائق.

الحل: كل ما لن يغيره بابل لكنه سيتركه إلى بوليفيلس ، يمنعه من القيام بذلك ، طحن أسنانه ، للتحويل إلى مكالمات jQuery (على سبيل المثال ، Node.closest في $ .closest). تم اعتماد هذا النهج في Bootstrap 4 نفسه ومن الواضح أنه معركة ضد التورم. مفاجأة jQuery هو ملف متعدد.

أوافق على أن البرمجة مع Babel مع التركيز على CanIUse.com و MDN.com ليست ممتعة. والرمز محرج (بالنسبة لي).

هنا من الضروري تسليط الضوء على الوضع من فوق مرة أخرى. يستخدم Bootstrap مكتبتين jQuery و popper.js. Popper.js هو إطار عمل مزدوج من الفانيليا ، ولا يحتوي على بابل أو jQuery أو عبوات خارجية متعددة ، من تلقاء نفسه. يتم تعبئة JQuery من خلال النخر الذي يستخدم بالفعل بابل ، ولكن بطريقة سحرية بطريقة ما دون الملءات المتعددة والمساعدات. يستخدم المكوّن الإضافي Bootstrap التابع لجهة خارجية (مثل BsMultiSelct) Babel 7. قد يستمر استخدام المنتج لشيء آخر. لا يوجد نظام متعدد متعدد واحد ، ومن المتوقع تكرار رمز متعدد ، وهناك أربعة تطبيقات من نفس الأقرب التي تم تحميلها في المتصفح. ولكن لا يمكن فعل شيء حيال ذلك.

إذا كنت مع ذلك تستخدم ملفات متعددة عند إنشاء المكون الإضافي الخاص بك ، فعليك أن تتذكر أنه إذا كان التطبيق يحتوي على نصوص مضمنة (أي <script>$( function() {/*..*/}) </script> ) ، سيكون عليك فقط تنزيل ملفات متعددة بشكل متزامن (وإلا قد يبدأ تنفيذ التعليمات البرمجية في وقت أبكر من لحظة تحميل البرنامج المساعد). على سبيل المثال على سبيل المثال webpack-polyfill-injector (أغنى حاقن polyphil معروف لي) أحتاج إلى التحكم فيه حتى لا يقرر تحميل polyphiles بشكل غير متزامن (السلوك الافتراضي).

لا مسج

يبدو jQuery سامًا إلى حد ما ، ويتنافس مع Babel / ES6 ويحجبه ، لكنه ليس إلى الأبد. يوجد الفرع v4-whithout-jquery ، إنه موجود بالفعل في طلب التجمع ، ويخطط لإصدار bootstrap-nojquery c الإصدار 4.3 . في السابق ، كانت مساحة اسم الأحداث تسمى أكبر مشكلة لرفض jquery ، على الرغم من أنه من الواضح أنه يمكنك الكتابة بدونها (لم يفعل BsMultiSelect بدون). قررت على ما يبدو.

وأعلن أيضًا أنه من الإصدار 4.3 سيكون من الممكن تحميل المكونات الأصلية في المتصفح بشكل منفصل (فقط لسيناريو "التطبيق"). هل ستصبح المكونات الأصلية "مثل BsMultiSelect "؟ لا. إذا كان فريق BS بحاجة إلى بعض متغيرات SASS ، فسوف يصنعون فئات / محددات CSS لأنفسهم وسيعملون عليها من JS ("CSS الوظيفية"). لا يتوفر منشئو الميزات المخصصة.

إن الانتقال المحتمل من sass إلى post-css https://github.com/twbs/bootstrap/projects/11 في الإصدار الخامس لا يغير أي شيء بشكل أساسي. أو يغير كل شيء: "JS عبر HTML".

سيتعين على Bootstrap 5 إعداد توصيات حول كيفية الاندماج في ملفات Babel المتعددة ، وكيفية تصحيح DOM. هنا التوقعات أكثر أو أقل وضوحًا: سيتم تقديم تجميعات مختلفة تمامًا لمنشئي الصفحات ومنشئي التطبيقات.

الملخص

أثناء كتابة مكونات Bootstrap 4 على Babel باستخدام الطريقة المخصصة دون التفكير في إعادة الاستخدام ، وهو ما يعني تعدد الأشكال ، ومكان الحصول على متغيرات النمط ، لا تعرف عن الحزن.

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