ฉันเชื่อว่าวิศวกรส่วนหน้าทุกคนมีเฟรมเวิร์ก 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(ฟังก์ชั่น(){
___ลอจิกบี.สตาร์ท();
-
</สคริปต์>