Kitjs, (http://xueduany.github.com/kitjs) เป็นชุดของห้องสมุดวิดเจ็ต Front-end HTML5 ที่ฉันสร้างขึ้นเมื่อปลายปี 2011 หลังจากออกจาก Taobao Ued วัตถุประสงค์ดั้งเดิมคือการมุ่งเน้นไปที่การใช้ส่วนประกอบอินเทอร์แอคทีฟหน้า HTML บนโทรศัพท์มือถือ เช่นเดียวกับคิทอย่างแท้จริงวิสัยทัศน์คือการเป็นเล็กและใช้งานได้จริงซึ่งสามารถนำมาใช้โดยตรงและมันก็สะดวกมากที่จะทำส่วนประกอบสองแบบที่พัฒนาขึ้น ต่อมาเมื่อโครงการขยายตัวใหญ่ขึ้นเรื่อย ๆ และจำนวนส่วนประกอบที่ขยายตัวการสนับสนุนของเบราว์เซอร์พีซี (IE6+, FF, ซีรี่ส์ CORE CORE ฯลฯ ) ก็ถูกเพิ่มเข้ามาและมันก็ไม่ได้ จำกัด อยู่ที่ฟิลด์การพัฒนาโทรศัพท์มือถือดั้งเดิมอีกต่อไปและเริ่มย้ายไปยังแพลตฟอร์มเต็มอย่างเป็นทางการ เมื่อเร็ว ๆ นี้โมดูลดั้งเดิมทั้งหมดได้รับการปรับปรุงตามข้อกำหนดของ JSDOC และค่อยๆโอเพ่นซอร์สสำหรับทุกคนที่จะใช้
มาวางลำดับวงศ์ตระกูล kitjs ก่อนเพื่อให้ทุกคนมีความเข้าใจพื้นฐานเกี่ยวกับชุด
แล้วล่ะ? คุณรู้สึกเวียนหัวเล็กน้อยเมื่อมองดูหรือไม่? ที่จริงฉันรู้สึกเวียนหัวเมื่อเห็นมัน^_^ เพียงแค่ใส่ kitjs และ dojo คล้ายกันและแบ่งออกเป็น
1. โมดูลเครื่องมือ JS ที่มี kit.js เป็นแกนซึ่งขยายไปรอบ ๆ Kit คล้ายกับ Dojo
2. โมดูลส่วนประกอบภายใต้ kit.ui เนมสเปซคล้ายกับ dijit
3. นอกจากนี้ยังมีโครงการห้องปฏิบัติการเช่น Dojox ซึ่งไม่ได้ระบุไว้ที่นี่
ในส่วนประกอบ KitJS มีองค์ประกอบที่ยอดเยี่ยมบางอย่างที่ฉันได้โพสต์ไว้ในบล็อกของฉันมาก่อนเช่น
เครื่องเล่นเสียง
แท็บสำหรับเอฟเฟกต์ iPhone
Combobox
อัลบั้มภาพ 3 มิติ
ปฏิทิน
กล่องไฟ
เป็นต้น
นอกจากนี้ยังมีองค์ประกอบที่ดีกว่าที่ยังคงใช้งานอยู่หรือค่อยๆปล่อยออกมาเพื่อให้ทุกคนใช้ ส่วนประกอบ KITJS ทั้งหมดตรงตามวิสัยทัศน์ต่อไปนี้
1. ใกล้ชิดกับประสบการณ์ผู้ใช้ของผู้ใช้ภาษาจีนมากขึ้น
2. ใกล้ชิดกับความคิดเห็นและเอกสารของนักพัฒนาจีน
3. ตรวจสอบให้แน่ใจว่าได้จัดเตรียมส่วนประกอบที่มีอยู่ในตลาดที่ไม่ได้ให้ แต่ทุกคนต้องการ
4. โมดูลที่ละเอียดเพียงพอเพื่ออำนวยความสะดวกในการประกอบและรวมเข้ากับวิดเจ็ตขนาดใหญ่
ในโมดูลเครื่องมือ KITJS รหัสทั้งหมดจะขึ้นอยู่กับส่วนขยายของคลาสต้นแบบและวัตถุระดับโลกที่สร้างอินสแตนซ์นั้นมีไว้สำหรับนักพัฒนาที่จะใช้ ชื่อชั้นเรียนทั้งหมดเป็นตัวพิมพ์ใหญ่ในตัวอักษรแรกและวัตถุอินสแตนซ์ทั้งหมดเป็นตัวพิมพ์เล็กในตัวอักษรแรก KIT เริ่มต้นด้วยอักขระ $ เพื่ออำนวยความสะดวกความแตกต่างจากห้องสมุดชั้นเรียนอื่น ๆ ในเวลาเดียวกันในโมดูลเครื่องมือวิธีการทั้งหมดจะถูกเขียนในรูปแบบการเขียนโปรแกรมฟังก์ชั่นซึ่งเหมือนกับ Kissy ในเวลาเดียวกัน KIT มอบให้กับนักเรียนที่คุ้นเคยกับการพัฒนากับ jQuery การโหลด suger.js สามารถใช้ kitjs เพื่อเขียนรหัสเช่นใช้ jQuery ชื่อวิธีการและวิธีการใช้งานเหมือนกับ jQuery นี่คือตัวอย่างของเหตุการณ์พร้อม DOM
การคัดลอกรหัสมีดังนี้:
$ kit. $ (ฟังก์ชั่น ($) {
$ ('. item', $ ('#gallery')) แต่ละ (ฟังก์ชั่น () {
$ (นี่) .css ({
ด้านบน: $ kit.math.rand ($ ('#แกลเลอรี่'). innerHeight ()) + 'px',
ซ้าย: $ kit.math.rand ($ ('#แกลเลอรี่'). innerWidth ()) + 'px',
'-webkit-transform': 'rotate (' + $ kit.math.rand (-40, 40) + 'deg)'
-
}). pushstack ('a.kitlightbox'). แต่ละ (ฟังก์ชั่น () {
ใหม่ $ kit.ui.lightbox ({
EL: นี่
}). init ();
-
-
$ KIT. $ เป็นเหตุการณ์ DOM Ready ของ KITJS พารามิเตอร์ $ ของวิธีที่ไม่ระบุชื่อจะถูกส่งผ่านไปยังการปิดภายใน ด้วยวิธีนี้ $ สามารถใช้โดยตรงในการปิดภายในแทน $ kit $ $ (เทียบเท่ากับ $ selector ของ jQuery) ด้วยวิธีนี้รหัสทั้งหมดในการปิดจะไม่แตกต่างจาก jQuery นอกจากนี้ยังอำนวยความสะดวกในการพอร์ตของรหัส jQuery และรหัส KITJS
บทความนี้เป็นบทความแรกในชุดคู่มือการใช้งาน KITJS Framework มันแนะนำ kitjs สั้น ๆ เราจะเรียนรู้เพิ่มเติมเกี่ยวกับกรอบ UI ส่วนหน้ายอดเยี่ยมนี้ในอนาคต