ในฐานะที่เป็นห้องสมุด UI ฉันไม่ได้วางแผนที่จะให้ทุกคนเรียนรู้แกนชุดของฉันและจดจำ API ของฉัน วิธีการเรียนรู้ติดตามประเภทนี้ไม่มีความหมายเลย วันนี้ jQuery เป็นที่นิยมทุกคนเรียนรู้ JQ และพรุ่งนี้ Seajs จะกลายเป็นที่นิยมและทุกคนจะร้องเพลง Seajs ดังนั้นใน KitJS ฉันได้เตรียมน้ำตาลไวยากรณ์เป็นพิเศษ (suger.js) สำหรับผู้ใช้ JQ ซึ่งจำลอง JQ API อย่างสมบูรณ์ นอกเหนือจากการใช้งานอินเทอร์เฟซยังเหมือนกันซึ่งสะดวกสำหรับทุกคนในการแปลงส่วนประกอบชุดอุปกรณ์โดยตรง แน่นอนว่าในฐานะที่เป็นแฟนเทคนิคล้วน ๆ มันน่าสนใจยิ่งกว่าที่จะเข้าใจในเชิงลึกว่าเทคโนโลยีถูกนำไปใช้อย่างไรมากกว่าที่จะใช้เพื่ออุดมการณ์ แน่นอนถ้าคุณลอกเลียนแบบรหัสส่วนประกอบชุดอุปกรณ์โดยตรงสำหรับการพิจารณา KPI หรือโบนัสโครงการของเจ้านายเพื่อให้ KPI ของคุณเสร็จสมบูรณ์ฉันไม่สนใจพฤติกรรมดังกล่าว ตราบใดที่คุณดื่มน้ำและอย่าลืมขุดบ่อน้ำและสามารถโปรโมต kitjs เมื่อเป่าน้ำกับเพื่อนร่วมงานฉันรู้สึกขอบคุณคุณมาก ในเวลาเดียวกันคิทก็เป็นห้องสมุดที่เล็กมาก เนื่องจากการพัฒนาอย่างต่อเนื่องมีข้อบกพร่องบางอย่างและปัญหาความเข้ากันได้ของเบราว์เซอร์ซึ่งหลีกเลี่ยงไม่ได้ ฉันอยู่คนเดียวและมีพลังงาน จำกัด ในยุคของสงครามในส่วนหน้าเพื่อนที่มีใจเดียวกันมากขึ้นยินดีที่จะทำให้เขาใหญ่ขึ้นและก้าวหน้าไปด้วยกัน
ในเวลาเดียวกันส่วนประกอบกล่องโต้ตอบ KitJS ได้รับการเผยแพร่ในวันนี้โดยที่อยู่ตัวอย่างคือ http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(i) รูปแบบไดเรกทอรีคิท
กลับไปที่หัวข้อใน kitjs kit.js คือการมีอยู่ของไฟล์หลักหลัก มันมี DOM และวัตถุที่ใช้กันมากที่สุดบางส่วนการดำเนินการที่สืบทอดมาและชุดของสตริง. js, math.js ฯลฯ ได้รับการขยายตามการแบ่งฟังก์ชั่นในไดเรกทอรีระดับเดียวกัน ไฟล์ JS อิสระแต่ละไฟล์มีตัวสร้างคลาสและอินสแตนซ์ของวัตถุทั่วโลก
การใช้ kit.js เป็นตัวอย่างประกอบด้วยคลาส $ kit และชุด $ kit $ kit (เริ่มต้นด้วย $ คือเพื่อหลีกเลี่ยงความขัดแย้งกับตัวแปรที่ใช้กันทั่วไป)
ประเภทอื่น ๆ ทั้งหมดถูกแขวนอยู่บนอินสแตนซ์อินสแตนซ์ของ $ KIT และ $ KIT ในวิธีการเชื่อมโยงเช่น Math.js ซึ่งรวมถึง $ Kit.math class และ $ kit.math อินสแตนซ์เพื่อให้มีมลพิษเพียงสองแห่งในขอบเขตทั่วโลก ในเวลาเดียวกันใน kit.js เรากำหนดเนมสเปซที่เรียกว่า $ kit.ui ในไดเรกทอรีทางกายภาพเราใช้ไดเรกทอรีวิดเจ็ตในระดับเดียวกับ kit.js และไดเรกทอรีที่มีตัวอักษรเริ่มต้นหลายตัวจัดเรียงเป็นแถว
ไดเรกทอรีทั้งหมดภายใต้ไดเรกทอรีวิดเจ็ตคือไดเรกทอรีส่วนประกอบ KITJS ไฟล์ JS อิสระแต่ละไฟล์มีเพียงตัวสร้างคลาสสำหรับส่วนประกอบอิสระ (ไม่ใช่อินสแตนซ์) นอกจากนี้ยังสามารถเข้ากันได้กับโหมดโมดูลของ CommonJs (สามารถสอดคล้องกับโมดูล/1.1 สเปคของการแปลง CommonJs และ AMD วิธีการแปลงเฉพาะจะถูกกล่าวถึงในรายละเอียดในภายหลัง)
(ii) เทมเพลตรหัสเริ่มต้นของส่วนประกอบ KIT คำอธิบายประกอบเป็นไปตามข้อกำหนด JSDOC
ลองใช้ส่วนประกอบโต้ตอบเป็นตัวอย่างแต่ละองค์ประกอบจะคล้ายกับต่อไปนี้
ก่อนอื่นความคิดเห็นของ JSDOC คลาสคือการประกาศ @class, @require xxx.js, ส่วนประกอบใดที่ประกาศขึ้นอยู่กับ
(iii) ตัวสร้างและวิธีการเริ่มต้น
แต่ละคลาสกำหนดตัวสร้างในฟังก์ชั่นมาตรฐาน (config) {} วิธี ควรสังเกตที่นี่ว่าตัวสร้างของแต่ละส่วนประกอบ KitJS ขอสงวนพารามิเตอร์การกำหนดค่าโดยค่าเริ่มต้นเป็นอินพุตสำหรับการกำหนดค่าส่วนบุคคล
ในเวลาเดียวกันในตัวสร้างคลาสมีสมาชิกคงที่วัตถุ DEFAULTCONFIG ใช้เพื่อจัดเก็บการกำหนดค่าเริ่มต้นของส่วนประกอบ KITJS
เมื่อใช้ส่วนประกอบ KITJS สิ่งแรกที่คุณต้องทำคือเริ่มต้นวัตถุอินสแตนซ์ใหม่ผ่านอินสแตนซ์ใหม่ นี่เป็นเพียงการเริ่มต้นวัตถุองค์ประกอบ JS ยังไม่มี HTML คุณต้องดำเนินการวิธีการเริ่มต้นสร้าง html และเพิ่มลงในเอกสารซึ่งเทียบเท่ากับการเทเนื้อและเลือดลงบนวิญญาณ ^_ ^
นักเรียนบางคนอาจถามว่าทำไมไม่วางวิธีการเริ่มต้นโดยตรงในคอนสตรัคเตอร์และปล่อยมันแยกกัน?
1. เนื่องจากคลาสแม่จะต้องได้รับการสร้างอินสแตนซ์ในระหว่างการสืบทอด เมื่อคลาสเด็กสืบทอดมาจากคลาสหลักวัตถุต้นแบบของคลาสเด็กจะถูกตั้งค่าเป็นอินสแตนซ์ใหม่ของคลาสแม่ หากวิธีการเริ่มต้นของ init ถูกวางไว้ในตัวสร้าง HTML ของคลาสแม่จะถูกดำเนินการโดยตรงและรหัสขยะจะถูกสร้างขึ้น
2 เนื่องจากการโหลดขี้เกียจรหัส HTML จะต้องดำเนินการในเวลาที่เหมาะสมแทนที่จะเริ่มต้นเมื่อเริ่มต้น
ดังนั้นวิธีเริ่มต้นในการใช้ส่วนประกอบ KitJS คือ
หลังจากการสร้างอินสแตนซ์ให้ดำเนินการเมธอด init (เมธอด init จะส่งคืนวัตถุส่วนประกอบปัจจุบันด้วยรหัสส่งคืน 7)
ดังที่แสดงในรูปด้านบนวิธี API ทั้งหมดในกล่องโต้ตอบจะถูกแขวนไว้บนต้นแบบและการสืบทอดและส่งผ่านไปยังวัตถุอินสแตนซ์ผ่านส่วนขยายต้นแบบ
สังเกตรหัสตัวสร้างของส่วนประกอบ $ kit.ui.dialog.yesorno
(iv) มรดกของ kitjs
เขาประกาศความสัมพันธ์ในการสืบทอดกับวัตถุ $ kit.ui.dialog ด้วยวิธี $ kit.inherit ที่นี่จะมีเพื่อนร่วมชั้นที่ต้องการถามทำไมเขาควรสืบทอดมันในตัวสร้างแทนที่จะเขียนมันโดยตรงข้างนอก?
เหตุผลคือ:
1.Kitjs เป็นความสัมพันธ์ในการสืบทอดแบบต้นแบบ
2. ในการใช้ส่วนประกอบ KITJS คุณต้องยกตัวอย่างวัตถุส่วนประกอบ แต่ละองค์ประกอบถูกสร้างขึ้นผ่านตัวสร้างผ่านอินสแตนซ์ใหม่
ดังนั้นฉันจึงทำการดำเนินการของความสัมพันธ์การสืบทอดในตัวสร้างรหัสดังนั้นเมื่อสร้างอินสแตนซ์องค์ประกอบใหม่ฉันจะสืบทอดสมาชิกและวิธีการของชั้นเรียนพาเรนต์ทีละขั้นตอนตามวิธีการสืบทอดของตัวสร้างขององค์ประกอบปัจจุบัน
เมื่อคลาสเด็กจำเป็นต้องปรับเปลี่ยนวิธีการของคลาสแม่คุณจะต้องกำหนดวิธีการของชื่อเดียวกันในต้นแบบของคลาสเด็กเพื่อแทนที่วิธีการสืบทอดของคลาสแม่
ในแง่ของการตั้งชื่อ KITJS ติดตามและ subclass ยังคงชื่อคลาสแม่เป็นเนมสเปซและเก็บโซ่ดังที่แสดงในรูปด้านบน $ kit.ui.dialog, $ kit.ui.dialog.yesorno
การใช้งานมรดก KitJS นั้นง่ายมากเช่นกัน
อินสแตนซ์วัตถุคลาสแม่คัดลอกสมาชิกทั้งหมดของอินสแตนซ์คลาสแม่ไปยังต้นแบบ subclass จากนั้นรีเซ็ตตัวสร้างต้นแบบ subclass เป็นตัวสร้างคลาสย่อยแล้วแขวนลิงก์ไปยังคอนสตรัคเตอร์คลาสย่อยและชี้ไปที่คลาสแม่ ด้วยวิธี $ kit.inherit ในกระบวนการอินสแตนซ์ของ subclass $ kit.ui.dialog.yesorno คุณสามารถสืบทอดสมาชิกทั้งหมดของคลาสแม่ $ kit.ui.dialog ที่ไม่มีอยู่และตระหนักถึงการสืบทอดที่คล้ายกับภาษาคงที่
(v) พารามิเตอร์การกำหนดค่า การถอดประกอบการถอด/การกำจัดผิวหนังของ HTML และ CSS?
ตัวสร้างองค์ประกอบชุดคุ้นเคยกับการส่งผ่านในพารามิเตอร์ประเภทแผนที่และปรับแต่งส่วนประกอบให้เป็นส่วนตัวเสมอ เมื่อส่วนประกอบของชุดเริ่มต้นจะทำการเขียนทับค่าเริ่มต้นของ DefaultConfig โดยอัตโนมัติด้วยพารามิเตอร์การกำหนดค่าที่ผู้ใช้ส่งและเริ่มการเริ่มต้น
สำหรับองค์ประกอบใด ๆ มันเป็นไปไม่ได้ที่จะกำจัดการเปลี่ยนแปลงในโครงสร้าง HTML และการเปลี่ยนแปลงในสไตล์ CSS
คิทสลายตัวคัปปลิ้งนี้เป็นการกำหนดค่าพารามิเตอร์การกำหนดค่า
ก่อนอื่นใช้เทคโนโลยีเทมเพลต HTML KIT Advocates โดยใช้วิธี $ kit.newhtml เพื่อรูทสตริง HTML โดยตรงสร้าง HTML DOM และแทรกกระแสข้อมูลเอกสาร
ดังนั้นเราจึงแยกเนื้อหา HTML โดยประมาณของส่วนประกอบห่อหุ้มไว้ในเทมเพลตสตริง HTML และเก็บไว้ในส่วนประกอบของส่วนประกอบ หากผู้ใช้ต้องการแก้ไขเทมเพลต HTML ให้ใช้การกำหนดค่าที่กำหนดเองเมื่อเริ่มต้นและแทนที่ฟิลด์เทมเพลตใน DefaultConfig DefaultConfig
ในการมีเพศสัมพันธ์และการสลายตัวของเทมเพลต HTML และ CSS Kit ใช้เคล็ดลับในการย่อยสลายชื่อคลาสโดยใช้เทมเพลต JS
แทนที่ html ใน config ในรูปแบบของ $ {xxx} โดย $ kit.tpl ในเมธอด init
ในเวลาเดียวกันสไตล์ทั้งหมดถูกตั้งค่าใน CSS
หากมีสกินหลายชุดที่จำเป็นต้องเปลี่ยนคุณสามารถเลือกที่จะแก้ไขชื่อคลาสของเทมเพลตโดยการระบุชื่อคลาสจริงที่สอดคล้องกับ $ {cls} ในระหว่างการเริ่มต้นเพื่อให้ได้ผลของการเปลี่ยนผิวหนัง
(vi) สรุป
โดยทั่วไปผ่านการวิเคราะห์รหัสของส่วนประกอบ $ kit.ui.dialog.yesorno เรามีความเข้าใจคร่าวๆเกี่ยวกับโครงสร้างการใช้งานส่วนประกอบของ KitJs ในความเป็นจริงมันไม่ยากที่จะออกแบบส่วนประกอบหน้า แต่การออกแบบองค์ประกอบหน้าเว็บที่สามารถปรับให้เข้ากับข้อกำหนดต่าง ๆ และสามารถเปลี่ยนรูปและปรับให้เข้ากับการพัฒนาได้อย่างรวดเร็วในโอกาสต่าง ๆ KIT แยกเทมเพลต HTML และ CSS ปรับแต่งพารามิเตอร์การกำหนดค่าและ defaultConfig และ subclasses ได้รับคุณสมบัติและวิธีการของชั้นพาเรนต์ผ่านการสืบทอดและในเวลาเดียวกัน refactor รหัสที่เกี่ยวข้องตามความต้องการทางธุรกิจที่แตกต่างกัน
KITJS มีห้องสมุดพื้นฐานและห้องสมุด UI
ไลบรารีพื้นฐาน: ฟังก์ชั่นตัวเลือก, ฟังก์ชั่นการทำงานของ DOM, ฟังก์ชั่นภาพเคลื่อนไหว, ปรับปรุงเหตุการณ์ DOM, เพิ่มโครงสร้างข้อมูลแฮชทรี, ฟังก์ชั่น IO, ฟังก์ชั่นการจัดเก็บในท้องถิ่น, มัลติเธรด, ช่วง ฯลฯ
นอกจากนี้ยังมี suger.js ที่จำลองรูปแบบการทำงานของ jQuery
ห้องสมุด UI รวมถึง: องค์ประกอบฟอร์มที่ได้รับการปรับปรุง, เลเยอร์ป๊อปอัพ, เครื่องเล่นสื่อ, กรอบการตรวจสอบ, การไหลของน้ำตก, การเชื่อมโยง, สไลด์โชว์, ปฏิทิน, ส่วนประกอบอัปโหลด, เครื่องยนต์เทมเพลต ฯลฯ