بصفتي مكتبة واجهة المستخدم ، لا أخطط للسماح للجميع بتعلم طقمتي الأساسية وحفظ واجهة برمجة التطبيقات الخاصة بي. هذا النوع من طريقة التعلم للمتابعة ليس له معنى على الإطلاق. اليوم ، تحظى JQuery بشعبية ، ويتعلم الجميع JQ ، وسيصبح Seajs غدًا شائعًا ، وسيغني الجميع Seajs. لذلك في Kitjs ، قمت بإعداد Sycer Sugar (Suger.js) لمستخدمي JQ ، الذي يحاكي API JQ تمامًا. بالإضافة إلى التنفيذ ، تكون الواجهة هي نفسها ، وهي أيضًا مريحة للجميع لتحويل مكونات مجموعة مباشرة. بالطبع ، بصفته مروحة تقنية بحتة ، من المثير للاهتمام أن نفهم متعمقًا كيف يتم تنفيذ التكنولوجيا من استخدامها للأيديولوجية. بالطبع ، إذا قمت بسرور كود مكون مجموعة لاعتبارات KPI أو مكافأة مشروع BOSS لإكمال KPI ، فأنا لا أمانع في هذا السلوك. طالما أنك تشرب الماء ولا تنسَ حفر البئر ، ويمكنك الترويج لـ Kitjs عند تفجير الماء مع الزملاء ، فأنا ممتن جدًا لك. في الوقت نفسه ، تعد Kit أيضًا مكتبة صغيرة جدًا. نظرًا للتطوير المستمر ، هناك بعض المشكلات في توافق الحشرات والمتصفح ، وهو أمر لا مفر منه. أنا وحدي ولدي طاقة محدودة. في عصر الحرب هذا في الواجهة الأمامية ، نرحب بالأصدقاء الأكثر تشابهًا في التفكير لجعله أكبر ويحققون تقدمًا معًا.
في الوقت نفسه ، تم إصدار مكون حوار KITJS اليوم ، مع عنوان العرض التوضيحي هو http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(ط) تنسيق دليل مجموعة
العودة إلى الموضوع ، في kitjs ، kit.js هو وجود الملف الأساسي الأساسي. أنه يحتوي على بعض من DOM والكائنات الأكثر استخدامًا ، والعمليات الموروثة ، ومجموعة من String.js ، Math.js ، وما إلى ذلك يتم توسيعها وفقًا لتقسيم الوظائف في نفس الدليل. يحتوي كل ملف JS مستقل على مُنشئ فئة ومثيل لكائن عالمي.
أخذ kit.js كمثال ، ويشمل فئة $ kit ومجموعة $ $ $ (بدءًا من $ $ لتجنب النزاعات مع المتغيرات الشائعة الاستخدام).
يتم تعليق جميع الأنواع الأخرى على مثيل $ kit و $ kit في طريقة الارتباط ، مثل Math.js ، والتي تشمل $ kit.math class و $ kit.math actions ، بحيث لا يوجد سوى ملوثين في النطاق العالمي. في الوقت نفسه ، في kit.js ، نحدد مساحة اسم تسمى $ kit.ui. في الدليل المادي ، نستخدم دليل عنصر واجهة المستخدم بنفس مستوى Kit.js ، ويتم ترتيب الدليل ذو الأحرف الأولية المتعددة على التوالي.
جميع الدلائل تحت دليل القطعة هي أدلة مكون KitJS. يحتوي كل ملف JS المستقل فقط على مُنشئ فئة للمكونات المستقلة (غير الثمانية). يمكن أن تكون متوافقة أيضًا مع وضع الوحدة النمطية لـ CommonJs (يمكن أن يتوافق مع الوحدات النمطية/1.1 مواصفات CommonJs وتحول AMD. سيتم ذكر طريقة التحول المحددة بالتفصيل لاحقًا)
(2) قالب الرمز الافتراضي لمكون مجموعة ، يتوافق التعليق التوضيحي مع مواصفات JSDOC
دعنا نأخذ مكونات الحوار كمثال ، كل مكون يشبه ما يلي
بادئ ذي بدء ، تعليق JSDOC ، ما هو الفصل @class إعلان ، require xxx.js ، ما هي المكونات التي تعتمد عليها
(3) طريقة المنشأة وطريقة التهيئة
يحدد كل فئة مُنشئًا بطريقة قياسية (config) {}. تجدر الإشارة هنا إلى أن مُنشئ كل مكون KITJS يحتفظ بمعلمة تكوين افتراضيًا كمدخل للتكوين المخصص.
في الوقت نفسه ، في مُنشئ الفئة ، يوجد عضو ثابت ، DefaultConfig ، يستخدم لتخزين التكوين الافتراضي لمكون KITJS
عند استخدام مكونات KITJS ، فإن أول شيء عليك القيام به هو تهيئة كائن مثيل جديد من خلال مثيل جديد. هذا فقط لتهيئة كائن مكون JS. لا يوجد HTML حتى الآن. تحتاج إلى تنفيذ طريقة init ، وإنشاء HTML ، وإضافتها إلى DOC ، والتي تعادل صب الجسد والدم على الروح ^_ ^.
قد يسأل بعض الطلاب ، لماذا لا يضع طريقة init مباشرة في المنشئ ويطلقونها بشكل منفصل؟
1. لأن فئة الوالدين تحتاج إلى إنشاء مثيل لها أثناء الميراث. عندما ترث فئة الطفل من فئة الأصل ، سيتم تعيين كائن النموذج الأولي لفئة الطفل على المثيل الجديد لفئة الأصل. إذا تم وضع طريقة التهيئة لـ init في المُنشئ ، فسيتم تنفيذ HTML للفئة الأصل مباشرة وسيتم إنشاء رمز القمامة.
2 بسبب التحميل كسول ، يجب تنفيذ رمز HTML في الوقت المناسب ، بدلاً من تهيئة التهيئة على الفور عند تهيئة التهيئة
لذا فإن الطريقة الافتراضية لاستخدام مكونات KitJS
بعد الاستئصال ، قم بتنفيذ طريقة init (ستعيد طريقة init كائن المكون الحالي ، باستخدام رمز الإرجاع 7)
كما هو موضح في الشكل أعلاه ، يتم تعليق جميع أساليب API في مربع الحوار على النموذج الأولي ، والميراث وينتقل إلى كائن المثيل من خلال تمديد النموذج الأولي.
راقب رمز المنشئ لمكون $ kit.ui.dialog.yesorno ،
(4) ميراث kitjs
أعلن علاقة الميراث مع كائن $ kit.ui.dialog من خلال طريقة $ kit.inherit. هنا ، سيكون هناك زميل في الفصل يريد أن يسأل ، لماذا يجب أن يرثها في المُنشئ بدلاً من كتابتها مباشرةً في الخارج؟
السبب هو:
1. Kitjs هي علاقة ميراث قائمة على النموذج الأولي
2. لاستخدام مكونات KitJS ، يجب عليك إنشاء مثيل للكائن المكون. يتم إنشاء كل مكون من خلال المنشئ من خلال مثيل جديد.
لذلك وضعت تنفيذ علاقة الميراث في مُنشئ الكود ، بحيث عند إنشاء مكون جديد ، سأرث أعضاء وطرق فئة الأصل خطوة بخطوة وفقًا لطريقة الميراث لمؤسس المكون الحالي.
عندما تحتاج فئة الطفل إلى تعديل طريقة فئة الأصل ، تحتاج فقط إلى تحديد طريقة تحمل نفس الاسم في النموذج الأولي لفئة الطفل لتجاوز طريقة الميراث للفئة الأصل.
فيما يتعلق بالتسمية ، تتبع kitjs ، وتواصل الفئة الفرعية اسم الفئة الأم كمساحة اسم وتحتفظ بالسلسلة ، كما هو موضح في الشكل أعلاه $ kit.ui.dialog ، $ kit.ui.dialog.yesorno
تنفيذ الميراث KitJS بسيط للغاية
إنشاء كائن فئة الأصل ، نسخ جميع أعضاء مثيل الفئة الأصل على النموذج الأولي للفئة الفرعية ، ثم إعادة تعيين مُنشئ النموذج الفرعي للفئة الفرعية كمؤسس فئة فرعية ، ثم تعليق رابط إلى مُنشئ الفئة الفرعية والإشارة إلى الفئة الأم. من خلال طريقة $ kit.inherit ، في عملية تثبيت $ $ kit.ui.dialog.yesorno ، يمكنك أن ترث جميع أعضاء الطبقة الأصلية $ kit.ui.dialog التي لا توجد ، وتحقق الميراث المشابه لللغات الثابتة.
(V) معلمات التكوين ، اقتران التفكيك/إزالة الجلد من HTML و CSS؟
يعتاد مُنشئ مكون المجموعة على تمرير المعلمة من نوع الخريطة ، ويقوم دائمًا بتخصيص المكون. عند تهيئة مكون المجموعة ، سيتم تلقائيًا الكتابة فوق الافتراضية الافتراضية مع معلمة التكوين المقدمة من المستخدم وبدء التهيئة.
لأي مكون ، من المستحيل التخلص من التغييرات في بنية HTML والتغييرات في نمط CSS
مجموعة تحلل هذا الاقتران في تكوين معلمة التكوين.
بادئ ذي بدء ، استخدم تقنية قالب HTML. يدعو KIT باستخدام طريقة $ kit.newhtml لتوصيل سلسلة HTML مباشرة ، وإنشاء تدفقات المستندات HTML وإدراجها ،
لذلك نقوم باستخراج محتوى HTML التقريبي للمكون ، ونغلفه في قالب سلسلة HTML ، وتخزينه في DefaultConfig للمكون. إذا احتاج المستخدم إلى تعديل قالب HTML ، فاستخدم تكوينًا مخصصًا عند تهيئته ، وتجاوز حقل القالب في DefaultConfig الافتراضي.
في اقتران وتحلل قوالب HTML و CSS ، تستخدم Kit خدعة لتحلل اسم الفصل باستخدام قوالب JS.
استبدل HTML في التكوين في شكل $ {xxx} بواسطة $ kit.tpl في طريقة init
في الوقت نفسه ، يتم تعيين جميع الأنماط في CSS.
إذا كانت هناك مجموعات متعددة من الجلود التي تحتاج إلى تبديل ، فيمكنك اختيار تعديل اسم الفئة من القالب من خلال تحديد اسم الفئة الفعلي المقابل لـ $ {CLS} أثناء التهيئة لتحقيق تأثير استبدال الجلد.
(السادس) ملخص
في الأساس ، من خلال تحليل الكود لمكون $ kit.ui.dialog.yesorno ، لدينا فهم تقريبي لهيكل تنفيذ المكون لـ KitJs. في الواقع ، ليس من الصعب تصميم مكون صفحة ، ولكن تصميم مكون صفحة يمكنه التكيف مع المتطلبات المختلفة ويمكن أن يتشوه بسرعة والتكيف مع التطوير في مناسبات مختلفة. تقوم Kit بتقسيم قوالب HTML و CSS ، وتخصيص معلمات التكوين و DefaultConfig ، والفئات الفرعية تحصل على خصائص وطرق الفئة الأصل من خلال الميراث ، وفي الوقت نفسه Refactor الرمز ذي الصلة وفقًا لاحتياجات العمل المختلفة ، والتي يمكن أن تلبي بشكل أساسي احتياجات مكونات UI للأعمال من مختلف المستويات والبيئات.
تشمل Kitjs المكتبة الأساسية ومكتبة واجهة المستخدم.
المكتبة الأساسية: وظيفة المحدد ، وظيفة تشغيل DOM ، وظيفة الرسوم المتحركة ، تعزيز أحداث DOM ، زيادة بنية بيانات Hashtree ، وظيفة IO ، وظيفة التخزين المحلية ، Multithreading ، النطاق ، إلخ.
هناك أيضًا suger.js يحاكي تنسيق تشغيل jQuery
تتضمن مكتبة واجهة المستخدم: عناصر النماذج المحسّنة ، والطبقات المنبثقة ، ومشغلات الوسائط ، وأطر التحقق ، وتدفق الشلال ، والربط ، وعرض الشرائح ، والتقويمات ، ومكونات التحميل ، ومحركات القالب ، إلخ.