Kitjs ، (http://xueduany.github.com/kitjs) ، هي مجموعة من مكتبات واجهة المستخدم HTML5 الأمامية التي قمت بإنشائها في نهاية عام 2011 بعد مغادرة Taobao ued. كان الغرض الأصلي هو التركيز على استخدام المكونات التفاعلية لـ HTML صفحة على الهواتف المحمولة. تمامًا مثل Kit حرفيًا ، تكون الرؤية هي أن تكون صغيرة وعملية ، والتي يمكن استخدامها مباشرة ، ويمكن أيضًا أن تكون مريحة للغاية للقيام بالمكونات التي تم تطويرها. في وقت لاحق ، مع نمو المشروع أكبر وأكبر وتم توسيع عدد المكونات ، تمت إضافة دعم متصفحات الكمبيوتر (IE6+، FF ، Chrome Core ، وما إلى ذلك) ، ولم يعد يقتصر على مجال تطوير الهاتف المحمول الأصلي ، وبدأ يتحرك رسميًا نحو المنصة الكاملة. في الآونة الأخيرة ، تم تحديث جميع الوحدات الأصلية وفقًا لمواصفات JSDOC ومصدر مفتوح تدريجياً للجميع لاستخدامه.
دعونا نضع علم الأنساب kitjs أولاً حتى يتمكن الجميع من الحصول على فهم أساسي للمجموعة
ماذا عن ذلك؟ هل تشعر بالدوار قليلاً عندما تنظر إليه؟ في الواقع ، أشعر بالدوار عندما أراه^_^. ببساطة ، تشبه Kitjs و Dojo بعضهما البعض ، ويتم تقسيمهم إلى
1. وحدة أداة JS مع Kit.js كأنها جوهر ، والتي يتم توسيعها حول مجموعة ، على غرار Dojo
2. وحدات مكونة تحت مساحة الاسم kit.ui ، على غرار ديجيت
3. هناك أيضًا مشروع مختبر مثل Dojox ، والذي لم يتم تحديده هنا.
في مكونات KitJS ، هناك بعض المكونات الممتازة التي نشرتها في مدونتي من قبل ، مثل
مشغل الصوت
علامات التبويب لتأثيرات iPhone
comboBox
ألبوم صور ثلاثي الأبعاد
تقويم
Lightbox
إلخ.
هناك أيضًا بعض المكونات الأفضل التي لا تزال قيد الاستخدام أو يتم إصدارها تدريجياً للجميع لاستخدامها. تلبي جميع مكونات Kitjs الرؤية التالية
1. كن أقرب إلى تجربة المستخدم للمستخدمين الصينيين
2. كن أقرب إلى تعليقات ووثائق المطورين الصينيين
3. تأكد من توفير المكونات الحالية في السوق التي لم يتم توفيرها ، ولكن الجميع يحتاج.
4. وحدة حبيبات دقيقة بما فيه الكفاية لتسهيل التجميع ودمجها في عنصر واجهة مستخدم أكبر
في وحدة أدوات KITJS ، تعتمد جميع التعليمات البرمجية على تمديد النموذج الأولي للفئة ، ويتم توفير الكائنات العالمية التي تم تأسيسها للمطورين لاستخدامها. يتم رسملة جميع أسماء الفصول الدراسية في الحرف الأول ، وجميع كائنات المثيلات صغيرة في الحرف الأول. تبدأ Kit مع شخصية $ لتسهيل التمييز من مكتبات الفصل الأخرى. في الوقت نفسه ، في وحدة الأدوات ، تتم كتابة جميع الطرق بأسلوب برمجة الوظائف ، وهو نفس القبل. في الوقت نفسه ، يتم توفير مجموعة للطلاب الذين اعتادوا على التطور مع jQuery. يمكن تحميل suger.js استخدام kitjs لكتابة رمز مثل استخدام jQuery. اسم الطريقة وطريقة الاستخدام هي بالضبط نفس jQuery. فيما يلي مثال على حدث Ready
نسخة الكود كما يلي:
$ kit. $ (وظيفة ($) {
$ ('. item' ، $ ('#Gallery')). كل (function () {
$ (هذا) .css ({
TOP: $ kit.math.rand ($ ('#Gallery'). Innerheight ()) + 'PX' ،
اليسار: $ kit.math.rand ($ ('#Gallery'). Innerwidth ()) + 'px' ،
"-webkit-transform": "تدوير (' + $ kit.math.rand (-40 ، 40) +' deg) '
}) ؛
}). pushstack ('a.kitlightbox'). كل (function () {
$ $ kit.ui.lightbox ({
EL: هذا
}). init () ؛
}) ؛
}) ؛
$ kit. $ هو حدث DOM Ready of Kitjs. يتم تمرير المعلمة $ من الطريقة المجهولة إلى الإغلاق الداخلي. وبهذه الطريقة ، يمكن استخدام $ مباشرة في الإغلاق الداخلي بدلاً من مجموعة $. $ (أي ما يعادل محدد $ jQuery). وبهذه الطريقة ، لا تختلف جميع الكود في الإغلاق عن jQuery. كما أنه يسهل نقل رمز jQuery ورمز KITJS.
هذه المقالة هي المقالة الأولى في سلسلة دليل استخدام KITJS. انها فقط يقدم بإيجاز kitjs. سوف نتعلم المزيد عن إطار واجهة المستخدم الأمامية الممتازة في المستقبل.