ฉันเชื่อว่าวิศวกรส่วนหน้าทุกคนมีเฟรมเวิร์ก JavaScript ที่เขาชื่นชอบ ไม่ว่าจะเป็นอารมณ์หรือความเชื่อ เฟรมเวิร์ ก JavaScript ไม่เพียงแต่นำมาซึ่งการพัฒนาที่สะดวกสบายเท่านั้น แต่ยังรวมถึงความงดงามเชิงตรรกะที่บริสุทธิ์อีกด้วย ไม่ว่าจะเป็นความเรียบง่ายที่สง่างามของ jquery หรือความมหัศจรรย์ของ Yui แซนด์บ็อกซ์ ล้วนให้จินตนาการอันไม่มีที่สิ้นสุดแก่เรา อย่างไรก็ตาม กรอบงาน js นั้นไม่สามารถบรรลุความสมบูรณ์แบบรอบด้านได้ ตัวอย่างเช่น การเสียสละของ jquery ใน OO และการเสียสละในการแสดงของ yui ล้วนถ่ายทอดความงามที่ไม่สมบูรณ์และความสมจริงในอุดมคติให้กับผู้คน วันนี้ เรามาดูการเสียสละและสัมปทานที่ทำโดย yui3 ในการออกแบบเฟรมเวิร์ก เพื่อที่เราจะได้มีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับภาพรวมของ yui3 และเพิ่มข้อได้เปรียบของมันให้สูงสุด
1. เมล็ดหนึ่งขั้นตอนหรือเป็นเม็ด
สิ่งที่เรียกว่าการเริ่มขั้นตอนเดียวหมายความว่าคุณเพียงแค่ต้องแนะนำแท็กสคริปต์ของไฟล์ seed บนเพจ เช่น ต้นแบบและ jquery และเพียงแค่แนะนำต้นแบบ.js หรือ jquery.js สิ่งเหล่านี้จะสรุปการดำเนินการ DOM และ ฯลฯ ลงในไฟล์และพยายามทำให้ไฟล์มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ ประโยชน์ของการทำเช่นนี้นั้นชัดเจนมาก อย่างไรก็ตาม Yui ได้แบ่งฟังก์ชันเหล่านี้ออกเป็นระดับและการออกแบบแบบละเอียด โดยแยกแนวคิดออกเป็น "แกนกลาง" "เครื่องมือ" และ "ส่วนประกอบ" แต่ละฟังก์ชันเล็กๆ น้อยๆ จะถูกวางไว้ในไฟล์ เมื่อจำเป็น คุณจะต้องอ้างอิงด้วยตนเองจำนวนมาก ของการสาธิตที่ให้ไว้ในเอกสาร yui ใช้วิธีนี้อย่างเห็นได้ชัด การออกแบบนี้ไม่เป็นมิตรกับผู้เริ่มต้นเหมือนกับ jquery และไม่โง่พอที่จะใช้ฟังก์ชันขนาดเล็ก จำเป็นต้องแนะนำ js สามหรือสี่ตัวด้วยซ้ำ ไฟล์. มีเหตุผลสองประการที่ yui ทำเช่นนี้ ประการแรก yui ใหญ่เกินไป และไม่น่าเชื่อถือเล็กน้อยที่จะรวมฟังก์ชันทั้งหมดไว้ในไฟล์เดียว ประการที่สอง มันปูทางสำหรับการออกแบบเฟรมเวิร์กที่โหลดแบบไดนามิก
2. การแนะนำด้วยตนเองหรือการโหลดแบบไดนามิก
วิธีการดั้งเดิมในการเขียน js ลงในเพจคือการเขียนไฟล์ js ในเพจโดยตรงเป็นพาธแท็กสคริปต์ คุณยังสามารถแนะนำเพจด้วยวิธีนี้โดยใช้ yui แต่ yui แนะนำให้ใช้ตัวโหลดสำหรับการโหลดแบบไดนามิก ต้นกำเนิดของสคริปต์ที่โหลดแบบไดนามิกนั้นซับซ้อนมาก ในปัจจุบัน มีเหตุผลสามประการประการแรก แท็ก js ที่เขียนด้วยลายมือในหน้าเว็บจะยังคงใช้คำขอ http แม้ว่าคำขอจะเป็น 304 ก็ไม่จำเป็นต้องเริ่มต้น คำขอ http จริงหลังจากที่ไฟล์ที่โหลดแบบไดนามิกถูกแคชไว้ ประการที่สอง การโหลดแบบไดนามิกสามารถรับรู้ถึงการโหลดตามความต้องการ และสามารถขึ้นอยู่กับไฟล์ js การขจัดความซ้ำซ้อนและการเรียงลำดับการพึ่งพาซึ่งกันและกัน การโหลดไฟล์ js ด้วยแท็กที่เขียนด้วยลายมือ นักพัฒนาจำเป็นต้องให้ความสนใจเป็นพิเศษกับการเรียงลำดับ การทำซ้ำ ฯลฯ ของไฟล์ ประการที่สาม การโหลดแบบไดนามิกเอื้อต่อความหมายของโค้ดเพจ ซึ่งทำให้นักพัฒนาสนใจเฉพาะ "อะไร" คุณต้องการ" มากกว่า "ทำอย่างไรจึงจะได้มันมา" เมื่อโครงการมีจำนวนมากขึ้นและค่าบำรุงรักษาสูงขึ้นเรื่อยๆ เทคนิคขนาดเล็กและขนาดกลางเหล่านี้จะเป็นประโยชน์อย่างมาก
3. ทางเข้าเดียวหรือแซนด์บ็อกซ์สำหรับการเริ่มต้นแบบลอจิคัล
เมื่อเราเริ่มตรรกะ js ในเพจ เรามักจะใส่มันไว้ในวิธีเช่น onDomReady จะเป็นอย่างไรหากมีหลายตรรกะในเพจ ตัวอย่างเช่นการใช้ตรรกะ A และรหัสหน้าเป็นเช่นนี้
<script src="logicA.js" />
<สคริปต์>
$.onDomReady(ฟังก์ชั่น(){
___LogicA.เริ่มต้น();
-
</สคริปต์>
โดยปกติโค้ดนี้จะถูกเขียนไว้ที่ส่วนท้ายของหน้า โค้ด html ที่มาพร้อมกับตรรกะนี้จะถูกฝังไว้ที่ใดที่หนึ่งบนเพจ ในขณะนี้ b จำเป็นต้องเพิ่มตรรกะ B ลงในเพจ สิ่งที่ b ทำคือต้องหาโค้ดนี้ที่หน้าก่อน จบแล้วจึงเปลี่ยนให้มีลักษณะดังนี้
<script src="logicA.js" />
<script src="logicB.js" />
<สคริปต์>
$.onDomReady(ฟังก์ชั่น(){
___LogicA.เริ่มต้น();
___ลอจิกบี.สตาร์ท();
-
</สคริปต์>
ในทำนองเดียวกัน รหัส html ที่มาพร้อมกับตรรกะ B จะถูกฝังไว้ที่ใดที่หนึ่งบนเพจด้วย ดูเหมือนว่าตรรกะ js และโค้ด html ที่มาพร้อมกันจะถูกแยกออกจากกันมาก เมื่อถึงเวลาลบฟังก์ชัน html มักจะถูกลบ แต่ js จะถูกลืม . หรือการลบ js แล้วลืมลบ html จะเป็นปัญหาเมื่อนำโค้ดกลับมาใช้ใหม่ ในทำนองเดียวกัน เมื่อทำการดีบัก วิศวกรจะต้องเปิดสองหน้าต่างเพื่อเน้นไปที่ js และ html ตามลำดับ แม้ว่าโค้ดทั้งสองจะอยู่ในไฟล์เดียวกันก็ตาม ในกรณีนี้ ควรเขียนโค้ดดังนี้:
วิธีการเข้ารหัสนี้เป็นสิ่งที่ Yui สนับสนุน ซึ่งเรียกว่าแซนด์บ็อกซ์ แต่ละตรรกะมีอยู่ในแซนด์บ็อกซ์ และแต่ละตรรกะก็ทำหน้าที่ของตัวเองโดยไม่รบกวนซึ่งกันและกัน เมื่อบุคคลที่สามเรียกดูโค้ด พวกเขาจะเข้าใจทันทีว่านี่คือบล็อกการทำงานอิสระ รวมถึงโครงสร้าง HTML ทั่วไปและตรรกะการเริ่มต้น js หากพวกเขาต้องการใช้ซ้ำ พวกเขาสามารถคัดลอกทั้งบล็อกได้
<!–ส่วนของโค้ด html แบบลอจิคัล–>
<script src="logicA.js" />
<สคริปต์>
$.onDomReady(ฟังก์ชั่น(){
___LogicA.เริ่มต้น();
-
</สคริปต์>
&เฮลลิป;
<!–B ส่วนโค้ด html แบบลอจิคัล–>
<script src="logicB.js" />
<สคริปต์>
$.onDomReady(ฟังก์ชั่น(){
___ลอจิกบี.สตาร์ท();
-
</สคริปต์>