1. บทนำ
เมื่อเร็ว ๆ นี้ฉันกำลังเพิ่มประสิทธิภาพส่วนหน้าของโครงการธนาคารออนไลน์ขนาดใหญ่ ฉันต้องใช้การเพิ่มประสิทธิภาพไคลเอนต์ไขมัน แนวคิดทั่วไปคือ Front-End ใช้คำขอ AJAX เพื่อรับข้อมูลจาก back-end ส่งคืนในรูปแบบ Jason จากนั้นแสดงบนหน้า เนื่องจากระบบนี้มีขนาดใหญ่มากโซลูชันไคลเอ็นต์ FAT ย่อมต้องมีการเขียนโค้ด JS จำนวนมากบนไคลเอนต์ ฉันคิดว่ามันไม่สะดวกมากสำหรับทีมใด ๆ ที่จะรักษารหัสที่ไม่มีโครงสร้างจำนวนมาก กระดูกสันหลังเข้ามาในสายตาของฉัน
มันมีวิธีในการจัดโครงสร้างรหัส JS ของคุณช่วยให้คุณสามารถจัดระเบียบรหัส JS front-end ของคุณในวิธีที่มุ่งเน้นวัตถุ นี่ก็เหมือนกับว่าเราใช้การออกแบบที่ขับเคลื่อนด้วยโดเมนที่ส่วนหน้า เราสามารถแยกโครงการขนาดใหญ่มากโดยโมดูล แต่ละโมดูลสามารถแบ่งออกเป็นมุมมองรูปแบบและเราเตอร์ตามข้อกำหนดของกระดูกสันหลัง
ด้วย Backbone คุณสามารถปฏิบัติต่อข้อมูลของคุณเป็นแบบจำลอง ด้วยโมเดลคุณสามารถสร้างข้อมูลตรวจสอบข้อมูลทำลายหรือบันทึกลงในเซิร์ฟเวอร์ เมื่อการดำเนินการบนอินเทอร์เฟซทำให้เกิดการเปลี่ยนแปลงคุณสมบัติในโมเดลโมเดลจะกระตุ้นเหตุการณ์การเปลี่ยนแปลง มุมมองเหล่านั้นที่ใช้ในการแสดงสถานะโมเดลจะได้รับข้อความว่าโมเดลกระตุ้นการเปลี่ยนแปลงจากนั้นออกการตอบกลับที่สอดคล้องกันและแสดงข้อมูลใหม่อีกครั้งไปยังอินเทอร์เฟซ ในแอปพลิเคชัน Backbone ที่สมบูรณ์คุณไม่จำเป็นต้องเขียนโค้ดกาวเพื่อรับโหนดผ่าน ID พิเศษจาก DOM หรืออัปเดตหน้า HTML ด้วยตนเองเนื่องจากเมื่อโมเดลเปลี่ยนไปมุมมองจะได้รับการอัปเดตได้อย่างง่ายดาย
2. คุณสมบัติ
Backbone เป็นเฟรมเวิร์กส่วนหน้าน้ำหนักเบาที่ใช้ในการจัดโครงสร้างการจัดการของ JS จำนวนมากในหน้าสร้างการเชื่อมต่อที่ราบรื่นกับเซิร์ฟเวอร์และมุมมองและให้กรอบพื้นฐานสำหรับการสร้างแอพพลิเคชั่นที่ซับซ้อน
ให้ฉันอธิบายคุณสมบัติหลักและลักษณะของกระดูกสันหลังสั้น ๆ :
2.1 น้ำหนักเบา
ซอร์สโค้ดของ Backbone มีเพียงประมาณ 1,000 บรรทัด (หลังจากการสลายตัวและบรรทัดที่ว่างเปล่า) ขนาดไฟล์มีเพียง 16KB และไลบรารีการพึ่งพาขีดล่างเป็นเพียง 29KB
คุณต้องใช้เวลาเล็กน้อยเพื่อทำความเข้าใจการใช้งานภายในของกระดูกสันหลังอย่างง่ายดาย หรือเขียนรหัสจำนวนเล็กน้อยเพื่อโอเวอร์โหลดกลไกบางอย่างของกระดูกสันหลัง หากคุณต้องการทำการพัฒนารองตามกระดูกสันหลังมันไม่ใช่สิ่งที่ซับซ้อน
2.2 โครงสร้าง
Backbone สามารถแยกข้อมูลตรรกะและมุมมองในหน้าได้อย่างง่ายดายและจัดระเบียบโครงสร้างรหัสตามกระดูกสันหลัง คุณสามารถกำหนดปฏิสัมพันธ์ข้อมูลตรรกะทางธุรกิจส่วนต่อประสานผู้ใช้และงานอื่น ๆ ในโครงการให้กับเพื่อนร่วมงานหลายคนเพื่อพัฒนาพร้อมกันและจัดระเบียบพวกเขาเข้าด้วยกันอย่างเป็นระเบียบ ในขณะเดียวกันสิ่งนี้มีประโยชน์มากสำหรับการบำรุงรักษาและการพัฒนาโครงการขนาดใหญ่และซับซ้อน
2.3 กลไกการสืบทอด
ในกระดูกสันหลังโมดูลสามารถสืบทอดได้ คุณสามารถจัดระเบียบรูปแบบข้อมูลคอลเลกชันและมุมมองในแอปพลิเคชันของคุณในลักษณะเชิงวัตถุเพื่อให้สถาปัตยกรรมทั้งหมดชัดเจนขึ้น นอกจากนี้คุณยังสามารถโอเวอร์โหลดและขยายวิธีที่กำหนดเองได้อย่างง่ายดาย
2.4 สร้างการเชื่อมต่อที่ราบรื่นกับเซิร์ฟเวอร์
Backbone มีชุดกฎการโต้ตอบในตัวพร้อมข้อมูลเซิร์ฟเวอร์ (หากคุณเข้าใจสถาปัตยกรรม REST คุณสามารถเข้าใจได้ง่าย) และการซิงโครไนซ์ข้อมูลจะดำเนินการโดยอัตโนมัติในรุ่น นักพัฒนาส่วนหน้าจะต้องใช้งานข้อมูลไคลเอนต์เท่านั้นและแบ็คโบนจะซิงโครไนซ์ข้อมูลการทำงานกับเซิร์ฟเวอร์โดยอัตโนมัติ
นี่เป็นสิ่งที่น่าสนใจมากเนื่องจากอินเทอร์เฟซข้อมูลเซิร์ฟเวอร์มีความโปร่งใสต่อนักพัฒนาส่วนหน้าและพวกเขาไม่จำเป็นต้องใส่ใจเกี่ยวกับวิธีการโต้ตอบกับเซิร์ฟเวอร์อีกต่อไป
อย่างไรก็ตามอินเทอร์เฟซข้อมูลที่เซิร์ฟเวอร์จัดหาให้เข้ากันได้กับกฎกระดูกสันหลัง สำหรับโครงการใหม่เราสามารถลองใช้ชุดของกฎนี้เพื่อสร้างอินเทอร์เฟซ แต่ถ้าคุณมีชุดอินเทอร์เฟซที่เสถียรในโครงการของคุณอยู่แล้วคุณอาจกังวลเกี่ยวกับความเสี่ยงของการปรับเปลี่ยนอินเตอร์เฟส
มันไม่สำคัญเราสามารถปรับให้เข้ากับอินเทอร์เฟซข้อมูลที่มีอยู่โดยการโอเวอร์โหลดวิธี backbone.sync สำหรับสภาพแวดล้อมของลูกค้าที่แตกต่างกันเรายังสามารถใช้วิธีการโต้ตอบข้อมูลที่แตกต่างกัน ตัวอย่างเช่นเมื่อผู้ใช้ใช้บริการผ่านเบราว์เซอร์พีซีข้อมูลจะถูกซิงโครไนซ์กับเซิร์ฟเวอร์แบบเรียลไทม์ เมื่อผู้ใช้ใช้บริการผ่านเทอร์มินัลมือถือโดยพิจารณาจากปัญหาสภาพแวดล้อมเครือข่ายเราสามารถซิงโครไนซ์ข้อมูลไปยังฐานข้อมูลท้องถิ่นก่อนแล้วจึงซิงโครไนซ์กับเซิร์ฟเวอร์เมื่อเหมาะสม และสิ่งเหล่านี้สามารถทำได้โดยการโอเวอร์โหลดหนึ่งวิธี
2.5 การจัดการเหตุการณ์อินเทอร์เฟซ
ใน MVC เราหวังว่าจะแยกงานนำเสนออินเทอร์เฟซและตรรกะทางธุรกิจอย่างสมบูรณ์ แต่สำหรับเหตุการณ์แบบโต้ตอบที่สร้างโดยผู้ใช้ (เช่นเหตุการณ์คลิก) เรามักจะได้รับและผูกมัดพวกเขาผ่านวิธีการผูกที่คล้ายกับใน jQuery
มุมมองใน Backbone ช่วยให้เราจัดระเบียบเหตุการณ์ผู้ใช้และวิธีการดำเนินการในลักษณะที่เป็นระเบียบซึ่งต้องการให้เราประกาศการแสดงออกอย่างง่าย ๆ เช่น:
กิจกรรม: {// เมื่อคลิกองค์ประกอบด้วย ID "บันทึก", ดำเนินการวิธีเพิ่มของมุมมอง 'คลิก #save': 'เพิ่ม', 'mousedown. -button': 'show', 'mouseover .button': 'ซ่อน'}ในนิพจน์ชื่อเหตุการณ์อาจเป็นเหตุการณ์ DOM ใด ๆ (เช่นคลิก, MouseOver, Keypress, ฯลฯ ) และองค์ประกอบสามารถเป็นตัวเลือกใด ๆ ที่ได้รับการสนับสนุนโดย jQuery (เช่นตัวเลือกแท็ก, ตัวเลือก ID, ตัวเลือกคลาส ฯลฯ )
มุมมองจะเชื่อมโยงเหตุการณ์ในนิพจน์กับองค์ประกอบตัวเลือกโดยอัตโนมัติ เมื่อเหตุการณ์ขององค์ประกอบถูกทริกเกอร์มุมมองจะเรียกใช้วิธีการที่ถูกผูกไว้โดยอัตโนมัติในนิพจน์
2.6 การวิเคราะห์เทมเพลตน้ำหนักเบา
การแยกวิเคราะห์เทมเพลตเป็นวิธีที่มีให้ในขีดเส้นใต้ ทำไมฉันถึงแนะนำวิธีการเน้นย้ำเมื่อแนะนำคุณสมบัติของกระดูกสันหลัง? เพราะวิธีนี้สามารถช่วยให้เราแยกโครงสร้างมุมมองและตรรกะที่ดีขึ้นและขีดเส้นใต้เป็นห้องสมุดที่กระดูกสันหลังต้องพึ่งพา
วิธีการแยกวิเคราะห์แม่แบบช่วยให้เราสามารถผสมและฝังรหัส JS ในโครงสร้าง HTML เช่นเดียวกับรหัส Java ในหน้า JSP:
<ul> <%สำหรับ (var i = 0; i <len; i ++) {%> <li> <%= data [i] .title%> </li> <%}%> </li>ผ่านการแยกวิเคราะห์แม่แบบเราไม่จำเป็นต้องแยกสายเมื่อสร้างโครงสร้าง HTML แบบไดนามิก ที่สำคัญกว่านั้นเราสามารถจัดการโครงสร้าง HTML ในมุมมองได้อย่างอิสระ (ตัวอย่างเช่น: สถานะที่แตกต่างกันอาจแสดงโครงสร้าง HTML ที่แตกต่างกันเราสามารถกำหนดไฟล์เทมเพลตหลายรายการโหลดและเรนเดอร์ตามต้องการ)
2.7 การจัดการเหตุการณ์ที่กำหนดเอง
ใน Backbone คุณสามารถใช้วิธีการเปิดหรือปิดเพื่อผูกและลบเหตุการณ์ที่กำหนดเอง ทุกที่คุณสามารถใช้วิธีทริกเกอร์เพื่อทริกเกอร์เหตุการณ์ที่ถูกผูกไว้เหล่านี้และวิธีการทั้งหมดที่ผูกพันเหตุการณ์จะถูกดำเนินการเช่น:
var model = new backbone.model (); // ผูกสองฟังก์ชั่นเพื่อกำหนดเองเหตุการณ์ที่กำหนดเองในโมเดลโมเดลโมเดล ('กำหนดเอง', ฟังก์ชั่น (p1, p2) {// toDo}); model.on ('custom', function (p1, p2) {// toDo}); // ทริกเกอร์เหตุการณ์ที่กำหนดเองและฟังก์ชั่นทั้งสองที่ถูกผูกไว้ด้านบนจะเรียกว่า model.trigger ('custom', 'value1', 'value2'); // ลบวิธีทั้งหมดที่ถูกผูกไว้ในโมเดลเหตุการณ์ที่กำหนดเองออก ('กำหนดเอง'); // ทริกเกอร์เหตุการณ์ที่กำหนดเอง แต่จะไม่มีการดำเนินการฟังก์ชั่น ฟังก์ชั่นในเหตุการณ์ได้ถูกลบออกในโมเดลขั้นตอนก่อนหน้า TRIGGER ('กำหนดเอง');หากคุณคุ้นเคยกับ jQuery คุณจะพบว่าพวกเขาคล้ายกับวิธีการผูก, unbind และ trigger ใน jQuery
นอกจากนี้ Backbone ยังสนับสนุนกิจกรรมพิเศษ "All" เมื่อเหตุการณ์ที่ชื่อว่า "ทั้งหมด" ถูกผูกไว้กับวัตถุวิธีที่ถูกผูกไว้ในเหตุการณ์ "ทั้งหมด" จะถูกเรียกใช้เมื่อเหตุการณ์ใด ๆ ถูกทริกเกอร์ บางครั้งวิธีนี้อาจมีประโยชน์มากตัวอย่างเช่นเราสามารถฟังการเปลี่ยนแปลงในสถานะวัตถุผ่านเหตุการณ์ "ทั้งหมด"
3. เราเตอร์
ในแอปพลิเคชันหน้าเดียวเราควบคุมการสลับและการนำเสนอของอินเทอร์เฟซผ่าน JavaScript และรับข้อมูลจากเซิร์ฟเวอร์ผ่าน AJAX
ปัญหาที่อาจเกิดขึ้นคือเมื่อผู้ใช้ต้องการกลับไปที่การดำเนินการก่อนหน้านี้เขาอาจใช้ปุ่ม "ย้อนกลับ" และ "ส่งต่อ" ของเบราว์เซอร์เป็นประจำ แต่ผลลัพธ์ก็คือว่าหน้าทั้งหมดถูกสลับเนื่องจากผู้ใช้ไม่ทราบว่าเขาอยู่ในหน้าเดียวกัน
สำหรับปัญหานี้เรามักจะใช้แฮช (จุดยึด) เพื่อบันทึกตำแหน่งปัจจุบันของผู้ใช้และฟังการกระทำ "ส่งต่อ" และ "ส่งคืน" ของผู้ใช้ผ่านเหตุการณ์ OnhashChange แต่เราพบว่าเบราว์เซอร์รุ่นที่ต่ำกว่า (เช่น IE6) ไม่สนับสนุนเหตุการณ์ OnHashChange
Backbone มีฟังก์ชั่นการควบคุมการกำหนดเส้นทาง ผ่านเราเตอร์ที่จัดทำโดย Backbone เราสามารถผูกที่อยู่เส้นทางและฟังก์ชั่นเหตุการณ์เข้าด้วยกันผ่านนิพจน์ที่เรียบง่ายเช่น:
var customRouter = backbone.router.extend ({เส้นทาง: {'': 'index', // ดำเนินการดัชนีวิธีการเมื่อแฮช url อยู่ในไดเรกทอรีราก: url# 'รายการ': 'getlist', // execute getList วิธีการที่ url hash is ในรายการ และผ่านข้อมูลรายละเอียดเป็นพารามิเตอร์ไปยังวิธีการสอบถาม: url#list/1001 '*error': 'showerror' // เรียกใช้วิธีการข้อผิดพลาดเมื่อแฮช url ไม่ตรงกับกฎข้างต้น}, ดัชนี: ฟังก์ชั่น () อาบน้ำ: ฟังก์ชั่น (ข้อผิดพลาด) {แจ้งเตือน ('ข้อผิดพลาดแฮช:' + ข้อผิดพลาด); var custom = new customRouter (); backbone.history.start ();โปรดลองคัดลอกรหัสนี้ไปยังหน้าของคุณและเข้าถึงที่อยู่ต่อไปนี้ (ที่ URL ระบุที่อยู่หน้าเว็บของคุณ):
urlurl#listurl#รายละเอียด/1001url#hash1url#hash2
โปรดลองใช้ปุ่ม "ย้อนกลับ" และ "ส่งต่อ" ของเบราว์เซอร์เพื่อสลับไปมาเป็นที่อยู่ที่คุณเพิ่งป้อน
คุณจะเห็นว่าเมื่อแฮช URL เปลี่ยนวิธีที่ถูกผูกไว้จะถูกดำเนินการ เมื่อพบแฮชที่ไม่ได้กำหนดวิธีการอาบน้ำจะถูกดำเนินการและแฮชที่ไม่ได้กำหนดจะถูกส่งผ่านไปยังวิธีการ
Backbone จะบันทึกการเปลี่ยนแปลงที่อยู่ผ่านแฮชโดยค่าเริ่มต้น สำหรับเบราว์เซอร์เวอร์ชันที่ต่ำกว่าที่ไม่รองรับ OnhashChange การเปลี่ยนแปลงแฮชจะถูกตรวจสอบผ่านการเต้นของหัวใจ setInterval ดังนั้นคุณไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ของเบราว์เซอร์
สำหรับเบราว์เซอร์ที่รองรับคุณสมบัติ HTML5 PushState Backbone ยังช่วยให้คุณสร้าง URL ส่วนบุคคลผ่าน PushState แต่ต้องมีการปรับเว็บเซิร์ฟเวอร์ของคุณ
3. การบังคับใช้กระดูกสันหลัง
Backbone ไม่สามารถใช้ได้กับ jQuery และหากคุณวางแผนที่จะสร้างเว็บแอปพลิเคชันหน้าเดียวขนาดใหญ่หรือซับซ้อนแบ็คโบนก็เหมาะสมกว่า
หากคุณต้องการใช้ Backbone กับหน้าเว็บไซต์ของคุณและไม่มีตรรกะและโครงสร้างที่ซับซ้อนในหน้านี้จะทำให้หน้าของคุณยุ่งยากและยากต่อการบำรุงรักษามากขึ้น
หากโครงการของคุณไม่ซับซ้อน แต่คุณชอบคุณลักษณะบางอย่างของมัน (อาจเป็นรูปแบบข้อมูลการจัดการมุมมองหรือเราเตอร์) คุณสามารถแยกส่วนนี้ของซอร์สโค้ดจากกระดูกสันหลังได้เนื่องจากในกระดูกสันหลังการพึ่งพาระหว่างโมดูลไม่แข็งแรงมากและคุณสามารถรับและใช้หนึ่งในนั้นได้อย่างง่ายดาย
4. ห้องสมุดการพึ่งพา
คุณไม่สามารถใช้กระดูกสันหลังได้อย่างอิสระเนื่องจากฟังก์ชั่นพื้นฐานการดำเนินงาน DOM และ AJAX ทั้งหมดพึ่งพาห้องสมุดบุคคลที่สาม
4.1 เน้นย้ำ
(ที่จำเป็น)
ENEDERSCORE เป็นไลบรารีฟังก์ชั่นพื้นฐานสำหรับการปรับปรุงประสิทธิภาพการพัฒนา มันห่อหุ้มการดำเนินการทั่วไปในชุดอาร์เรย์วัตถุและฟังก์ชั่น เช่นเดียวกับ jQuery ห่อหุ้มวัตถุ DOM คุณสามารถเข้าถึงและจัดการกับวัตถุภายใน JavaScript ได้อย่างง่ายดายผ่านขีดล่าง
ขีดเส้นใต้ยังมีวิธีการฟังก์ชั่นที่ใช้งานได้จริงเช่นฟังก์ชั่นการควบคุมปริมาณการวิเคราะห์แม่แบบ ฯลฯ
ฉันจะเข้าไปดูรายละเอียดเกี่ยวกับวิธีการหลักบางอย่างในขีดเส้นใต้ในบทต่อไป แต่ก่อนหน้านั้นคุณต้องเข้าใจ: ขีดเส้นใต้เป็นห้องสมุดที่กระดูกสันหลังต้องพึ่งพาเพราะการใช้งานหลายอย่างในกระดูกสันหลังนั้นขึ้นอยู่กับขีดล่าง
4.2 jQuery และ Zepto
(ไม่จำเป็น)
ฉันเชื่อว่าคุณจะคุ้นเคยกับ jQuery แน่นอนมันเป็นเฟรมเวิร์กข้ามเบราว์เซอร์และ Ajax
สำหรับ Zepto คุณสามารถเข้าใจได้ว่าเป็น "JQuery เวอร์ชันมือถือ" เนื่องจากมีขนาดเล็กกว่าเร็วขึ้นและเหมาะสำหรับการทำงานบนเบราว์เซอร์ของอุปกรณ์มือถือมันเป็นไวยากรณ์เดียวกับ jQuery ดังนั้นคุณจึงสามารถใช้งานได้กับ jQuery
ปัจจุบัน Zepto รองรับเบราว์เซอร์ด้วยเคอร์เนล WebKit เท่านั้นดังนั้นจึงเข้ากันได้กับระบบมือถือส่วนใหญ่เช่น iOS, Adnroid, Symbian, Blackberry และ Meego ในขณะที่สำหรับ Windows Phone หรือ Firefox OS ยังไม่ได้รับการสนับสนุน
เนื่องจาก JQuery และ Zepto ไวยากรณ์เหมือนกันสำหรับกระดูกสันหลังคุณจึงไม่มีปัญหาในการใช้ jQuery หรือ Zepto (แน่นอนคุณไม่สามารถใช้ทั้งสองอย่างในเวลาเดียวกัน)
ใน Backbone ตัวเลือก DOM, Event DOM และ AJAX ทั้งหมดใช้วิธี jQuery เหตุผลที่พวกเขาเป็นตัวเลือกที่นี่คือคุณไม่ได้ใช้ฟังก์ชั่นการซิงโครไนซ์ข้อมูลและ AJAX ใน Backbone จากนั้นคุณไม่จำเป็นต้องนำเข้า
หากคุณไม่ต้องการใช้ jQuery หรือ Zepto แต่ใช้ห้องสมุดอื่นหรือห้องสมุดที่กำหนดเองตราบใดที่ห้องสมุดของคุณใช้ตัวเลือก DOM เดียวกันการจัดการเหตุการณ์และวิธี AJAX เป็นไวยากรณ์ jQuery จะไม่มีปัญหา
Backbone ช่วยให้คุณสามารถกำหนดค่าไลบรารีของบุคคลที่สามที่คุณต้องใช้ผ่านวิธี SetDomLibrary ซึ่งมักใช้สำหรับ:
แม้ว่าไลบรารีที่กำหนดเองของคุณจะมีวิธีการที่มีไวยากรณ์เดียวกับ jQuery ตัวแปรส่วนกลางไม่ใช่ $ และคุณต้องการรักษาชื่อที่มีอยู่ ในเวลานี้คุณสามารถตั้งค่าเป็นวัตถุที่อ้างอิงภายในด้วยวิธี SetdomLibrary
คุณต้องการตรวจสอบสภาพแวดล้อมของผู้ใช้เพื่อตัดสินใจว่าไลบรารีใดเหมาะสำหรับการใช้งาน ตัวอย่างเช่น: หากผู้ใช้เข้าถึงโดยใช้เบราว์เซอร์พีซีให้โหลด jQuery และหากผู้ใช้เข้าถึงผ่านเทอร์มินัลมือถือให้โหลด Zepto