ناقش الأفكار الجديدة لبناء مكونات واجهة المستخدم الأمامية

قرأت مؤخرًا مقالة "أفكار جديدة لبناء مكونات واجهة المستخدم الأمامية" التي كتبها العم يو، والتي ذكّرتني بمقال قمت بمشاركته العام الماضي ، "نمط تصميم JS للتطوير التعاوني مع المشاعر" ، والذي لقي صدى قليلاً.. .

يُقال أنه في الإصدار الجديد من مشروع أمين الصندوق الخاص بـ Alipay العام الماضي، قمت بتجربة نموذج ترميز المكونات هذا لفترة من الوقت، وإليك القليل من الخبرة لمشاركتها معك:

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

من خلال هذه الفئة المجردة، أقوم بربط كائن اتصال بكائن حاوية وتنفيذ أبسط تفاعل بينهما من خلال طريقة الإجراء. "الأبسط" لا يعني أكثر من عمليات العرض أو الإخفاء، لذلك قمت بتحديد طرق العرض والإخفاء. من الواضح أن سلوك التفاعل "الأبسط" لا يمكن أن يرضي سلوك المستخدم بنسبة 100%، لذلك يجب علي تعيين طريقة setInterface وإضافة فئات التأثير إلى الفئات التي تتطلب تأثيرات تفاعل خاصة. أخيرًا، تجنب إنشاء مثيل لهذه الفئة المجردة مباشرةً عند استخدامها، وذكّر الجميع في طريقة الإجراء أنه إذا كنت تريد إنشاء عملية ما، فيرجى الانتقال إلى فئة وراثة محددة لتجاوز طريقة العمل.

من خلال هذه الفئة المجردة، يمكننا أن نرث أبسط المكونات aPop وdropDown وxbox وxTab وغيرها من المكونات... وقد تم ذكرها بالفعل في المقالة السابقة، ولن أخوض في التفاصيل هنا، وسأركز على شرح ذلك عندما لا تتمكن الفصول الأساسية المكتوبة هنا من تلبية الاحتياجات الخاصة، فكيف يمكننا تطوير مكونات مخصصة بسرعة.

لنأخذ xTab كمثال، يمكننا استخدام هذا المكون لإكمال تأثير التبديل الأساسي بين نقاط اللمس المتعددة والحاويات المتعددة، ولكن ماذا لو كنا بحاجة إلى إضافة بعض تأثيرات الرسوم المتحركة فوق ذلك؟ دعونا نلقي نظرة أولاً على كود التنفيذ الخاص بعلامة تبويب الفئة الموروثة:

يمكن العثور على أنني قمت بتنفيذ طريقة setInterface بعد طريقة العرض. سيتم استدعاء الطريقة التي تحمل الاسم نفسه في الفئة المجردة بشكل افتراضي. تم تصميم طريقة الواجهة هذه لإضافة فئات تأثير تفاعلية إضافية لخطوط تفاعلية مماثلة. على سبيل المثال: الآن نريد التعامل مع تأثير SlideTab، ثم نحتاج فقط إلى وراثة فئة تطبيق تعتمد على xTab، وتجاوز طريقة setInterface، وإضافة فئة رسوم متحركة لتحقيق تأثير الشريحة وهذا كل شيء!

AP.widget.animTab = AP.widget.xTab.extend({
setInterface:وظيفة(الهدف,السفينة){
this.parent(target,vessel);
this.anim(vessel);
},
الرسوم المتحركة: وظيفة (سفينة) {
...
}
});
لأكون صادقًا، هذه فكرة تصميم بسيطة للغاية، ولكنها تتيح لنا التفكير في وضع ترميز المكونات من زاوية مختلفة. ما ورد أعلاه مجرد بعض محاولات التطبيق السطحية، وستستمر الإثارة...في انتظارك!

إعادة طبع: http://ued.alipay.com/2010/06/propose-front-end-ui-components-and-then-build-a-new-train-of-ought/

AP.widget.xTab = AP.widget.basic.extend({
BindEvents:function(target,vessel){
E.on(target,this.options.eventType,this.action,target,this);
E.on(window,'load',this.oXtab,target,this);
},
الإجراء: الوظيفة (ه، الهدف) {
this.switchTab(e,target);
},
التبديلTab:وظيفة(ه،الهدف){
...
for(i=0,len=tabs.length;i<len;i++){
var hash = tabs[i].href.split("#")[1];
فار السفينة = D.get(hash + 'توسيع');
إذا (السفينة) {
this.hide(vessel);
}
D.removeClass(tabs[i].parentNode,'current');
إذا (target.href == علامات التبويب[i].href){
D.addClass(target.parentNode,'current');
إذا (السفينة) {
this.show(vessel);
}
// قم بتعيين واجهات التطبيق المختلفة
this.setInterface(target,vessel);
}
E.preventDefault(e);
}
},
شوتاب: وظيفة (الفهرس) {
...
},
// تهيئة علامة تبويب تحديد المواقع
أوإكستاب: وظيفة (الهدف، ه) {
...
}
});

AP.widget.basic = AP.Class جديد({
مجموعة الخيارات: وظيفة (خيارات) {
// إعدادات الواجهة
},
التهيئة: الوظيفة (الأهداف، الخيارات) {
// طريقة التهيئة، والغرض من ذلك هو إنشاء ارتباط بين عناصر المجموعة الفرعية المستهدفة والطريقة
},
getVessel:وظيفة(الهدف){
// احصل على الحاوية التي تلبي علاقة التعيين المستهدفة
},
BindEvents:function(target,vessel){
// ربط إجراء الزناد للهدف هنا
},
العمل:وظيفة (){
// تحتوي وظيفة التنفيذ التي يتم تشغيلها بواسطة الحدث المرتبط بالهدف على المنطق الذي تريد تنفيذه.
},
عرض:وظيفة(){
// عرض الحاوية
},
إخفاء: وظيفة () {
// إخفاء الحاوية
},
واجهة المجموعة: الوظيفة () {
// قم بتعيين الواجهة المشتركة لكل مكون
}
})