ตัวอย่างทั่วไปของ yepnope.js :
yepnope ({ทดสอบ: Modernizr.geolocation, yep: 'normal.js', nope: ['polyfill.js', 'wrapper.js']});ตัวอย่างนี้หมายความว่าหาก modernizr.geolocation เป็นจริงจะมีการโหลด polyfill.js และ wrapper.js
Yepnope Full Full :
yepnope ([{test: /* boolean (ish) ป้อนเงื่อนไข* /, yep: /* array (ของสตริง) | สตริง - ทรัพยากรที่โหลดเมื่อเงื่อนไขเป็นจริง* /, ไม่: /* อาร์เรย์ (ของสตริง - สตริง - ทรัพยากรเมื่อเงื่อนไขเป็นเท็จ* /, ทั้งสอง โหลดเมื่อเงื่อนไขเป็นจริงและเท็จ*/, การเรียกกลับ:/*ฟังก์ชั่น (testResult, key) | วัตถุ {key: fn} ฟังก์ชั่นการเรียกกลับ*/, สมบูรณ์:/*ฟังก์ชั่นฟังก์ชั่นที่ดำเนินการหลังจากโหลด*/}, ... ]);ทำไมต้องใช้ Yepnope :
เพียง 1.6k หลังจาก GZIP มีขนาดเล็กกว่ารถตักทรัพยากรส่วนใหญ่
สามารถโหลด CSS และ JS ได้
Yepnope ผ่านการทดสอบสำหรับเบราว์เซอร์ทั้งหมดที่ผู้เขียนสามารถค้นหาได้
Yepnope แยกการโหลดทรัพยากรและการดำเนินการอย่างสมบูรณ์ดังนั้นคุณสามารถควบคุมลำดับของการดำเนินการทรัพยากรได้
ให้การผสมผสานอย่างมีเหตุผลของ API ที่เป็นมิตรและอำนวยความสะดวกด้านทรัพยากร
การออกแบบแบบแยกส่วนคุณสามารถขยายฟังก์ชั่นของคุณเอง (ดูคำนำหน้าและตัวกรองในภายหลัง)
ส่งเสริมการโหลดทรัพยากรตามความต้องการ
บูรณาการใน Modernizr
โดยค่าเริ่มต้นจะดำเนินการเสมอในลำดับของรายการทรัพยากร (ลำดับของรายการไฟล์ที่คุณมีให้)
มันสามารถจัดการกับการโทรกลับของทรัพยากรและยังคงให้ความสำคัญกับการดาวน์โหลดสคริปต์ที่พึ่งพาในแบบขนาน ง่ายต่อการเข้าใจหลังจากอ่านรหัส:
yepnope ([{load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' เสร็จสมบูรณ์: ฟังก์ชั่น () {ถ้า (! 'jQuery.plugin.js' เสร็จสมบูรณ์: ฟังก์ชั่น () {jQuery (function () {jQuery ('div') .plugin ();});รถตักอื่น ๆ อาจต้องจัดการกับสิ่งนี้:
someloader ('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' ฟังก์ชั่น () {ถ้า (! window.jquery) {someloader ('local/jQuery.min.js' Yepnope ล้มเหลวในการโหลดคุณจะต้องโหลดทรัพยากรสำรองใหม่เท่านั้นซึ่งจะไม่ส่งผลกระทบต่อการดำเนินการของไฟล์อื่น ๆ ที่ขึ้นอยู่กับทรัพยากรนี้*/} อื่น {someloader ('jQuery.plugin.js');ข้อบกพร่องของ Yepnope
ไม่เร็วที่สุดเช่น LabJs ฯลฯ อาจโหลดเร็วกว่า Yepnope หลังจากการเพิ่มประสิทธิภาพ แต่คุณต้องพิจารณาว่าตัวโหลดใดที่จะใช้ตามสถานการณ์จริงของคุณ
คุณต้องตั้งค่าส่วนหัวแคชบางอย่างสำหรับทรัพยากร (สิ่งนี้สำคัญมาก)
ซึ่งแตกต่างจาก RequireJS และไลบรารีคลาสอื่น ๆ ที่มีเครื่องมือสร้างของตัวเองและ API ที่หลากหลาย Yepnope ใช้ฟังก์ชันโหลดเดอร์พื้นฐานเท่านั้น
โดยค่าเริ่มต้นจะดำเนินการเสมอในลำดับของรายการทรัพยากรที่คุณมีให้ซึ่งอาจส่งผลกระทบต่อความเร็ว
ตัวอย่างการใช้งาน Yepnope :
ผ่านสตริงโดยตรง
yepnope ('/url/to/your/script.js');ส่งผ่านวัตถุวัตถุ
yepnope ({load: '/url/to/your/script.js'});อินสแตนซ์ฟังก์ชั่นการโทรกลับ (URL ในฟังก์ชั่นการโทรกลับแสดงถึงชื่อไฟล์ทรัพยากรที่โหลดได้ผลลัพธ์แสดงถึงผลลัพธ์ของพารามิเตอร์การทดสอบ; คีย์แสดงตัวย่อของชื่อไฟล์เมื่อใช้การแมปคีย์)
yepnope ({test: window.json, โหลด: '/url/to/your/script.js', การเรียกกลับ: ฟังก์ชั่น (url, ผลลัพธ์, คีย์) {// เมื่อใดก็ตามที่เรียกใช้สคริปต์ของคุณเพิ่งดำเนินการแจ้งเตือน ('script.js โหลด!');}});ตัวอย่างฟังก์ชั่นที่สมบูรณ์
yepnope ({test: window.json, nope: 'json2.js', เสร็จสมบูรณ์: function () {var data = window.json.parse ('{"json": "String"}');}});อินสแตนซ์การแมปคีย์
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'รูปแบบปกติ. css'}, ไม่: {'mstyles': 'modified-styles.css', 'geopoly': 'geolocation-polyfill.js' การแจ้งเตือน ('นี่คือ polyfill geolocation!');}}});แน่นอนคุณสามารถเขียน ฟังก์ชั่นการโทรกลับ เช่นนี้:
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'รูปแบบปกติ. css'}, ไม่: {'mstyles': 'modified-styles.css', 'geopoly': 'geolocation-polyfill.js' รูปแบบปกติ! '3 คำนำหน้าโดย Yepnope
CSS! คำนำหน้า: ไฟล์ใด ๆ ที่มีคำต่อท้ายสามารถโหลดเป็นไฟล์ CSS ได้
yepnope ('css! mystyles.php? เวอร์ชัน = 1532');โหลดล่วงหน้า! คำนำหน้า: โหลดทรัพยากรล่วงหน้าลงในแคช แต่ไม่ดำเนินการ (ดำเนินการในครั้งต่อไปที่คุณโหลด)
yepnope ({load: 'preload! jQuery.1.5.0.js', การโทรกลับ: ฟังก์ชั่น (url, ผลลัพธ์, key) {window.jQuery; // undefined yepnope (jQuery.1.5.0.js); window.jquery; // object}});เช่น! คำนำหน้า (es): ตรวจสอบว่าคือเบราว์เซอร์ (นอกเหนือจาก IE!, ยังรองรับ IE5, IE6, IE7, IE8, IE9, IEGT5, IEGT6, IEGT7, IEGT8, IELT7, IELT8 และ IELT9)
yepnope ({load: ['normal.js', 'ie6! ie7! ie-patch.js'] // ie6 หรือ ie7 เท่านั้น (บนแพทช์)});