บทความนี้แนะนำแนวคิดการใช้งานล่าสุดของฉันสำหรับฟังก์ชั่นน้ำตกที่คล้ายกันในน้ำตกจังหวัดและเทศบาล เพื่อแยกความรับผิดชอบประสิทธิภาพและพฤติกรรมให้มากที่สุดฟังก์ชั่นนี้จะถูกแบ่งออกเป็น 2 องค์ประกอบและรายการที่เชื่อมโยงเดียวใช้เพื่อใช้คีย์คีย์ตรรกะ ส่วนถัดไปมีผลการสาธิต แม้ว่านี่จะเป็นฟังก์ชั่นที่พบบ่อยมาก แต่ตรรกะการใช้งานของบทความนี้มีความชัดเจนและรหัสนั้นง่ายต่อการเข้าใจ มันถูกแยกออกจากความหมายของน้ำตกจังหวัดและเทศบาลและคำนึงถึงการแยกประสิทธิภาพและพฤติกรรม ฉันหวังว่าเนื้อหาของบทความนี้สามารถนำมูลค่าการอ้างอิงมาสู่งานของคุณได้ ยินดีต้อนรับสู่การอ่านและแก้ไข
Cascade Cascade Operation
Cascadetype คงอยู่
Cascadetype การดำเนินการ Merge Cascade Update (Mergy)
Cascadetype รีเฟรช Cascade Refresh การดำเนินการแบบสอบถามและรับการดำเนินการเท่านั้น
Cascadetype ลบการดำเนินการลบคาสเคด
Cascadetype คาสเคดทั้งหมดการดำเนินการทั้งหมดด้านบน
ไม่ว่าจะชะลอการโหลดการรวบรวมข้อมูลการรวบรวมข้อมูลค่าเริ่มต้นคือด้านแรกกำลังโหลดทันทีและยิ่งด้านมากขึ้นคือการหน่วงเวลาการโหลด
การบำรุงรักษาความสัมพันธ์ที่แม็พโดย
mappedby = "parentid" หมายความว่าแอตทริบิวต์ parentid ในชั้นเรียนเด็กใช้เพื่อรักษาความสัมพันธ์ ชื่อนี้จะต้องเหมือนกับชื่อแอตทริบิวต์ ParentID ในชั้นเรียนเด็ก
นอกจากนี้ควรสังเกตว่าประเภทการรวบรวมในคลาสพาเรนต์จะต้องเป็นรายการหรือตั้งค่าและไม่สามารถตั้งค่าเป็น arrayList มิฉะนั้นจะมีการรายงานข้อผิดพลาด
เอฟเฟกต์การสาธิต (การดาวน์โหลดรหัสหมายเหตุ: เอฟเฟกต์นี้ต้องการ HTTP ในการรันนอกจากนี้ข้อมูลในเอฟเฟกต์เป็นข้อมูลจำลองและไม่ได้ถูกส่งกลับโดยพื้นหลังจริง ๆ ดังนั้นข้อมูลการดึงลงของจังหวัดเมืองและมณฑลที่คุณเห็นจะเหมือนกัน):
หมายเหตุ: บทความนี้ใช้การใช้งานทางเทคนิคของบล็อกที่เกี่ยวข้องก่อนหน้านี้ก่อนหน้านี้ หากคุณต้องการคุณสามารถคลิกลิงก์ด้านล่างเพื่อเรียนรู้เกี่ยวกับเรื่องนี้:
1) คำอธิบายโดยละเอียดเกี่ยวกับการใช้งานการสืบทอดของ JavaScript: ให้คลาส JS เพื่อกำหนดความสัมพันธ์การสืบทอดระหว่างคลาส JavaScript และคลาสการก่อสร้าง
2) ทักษะ jQuery เพื่อให้การสนับสนุนส่วนประกอบใด ๆ การจัดการเหตุการณ์เหมือน DOM: จัดเตรียม eventbase.js เพื่อให้อินสแตนซ์ส่วนประกอบใด ๆ ที่มีฟังก์ชั่นการจัดการเหตุการณ์เหมือน DOM;
3) การห่อหุ้มทุติยภูมิของส่วนประกอบพร็อกซี Ajax และ Ajax Cache ของ JQuery: Ajaxcache: ให้ Ajax.js และ Ajaxcache.js ง่ายขึ้นการโทร Ajax ของ jQuery และแคชพร็อกซีสำหรับคำขอไคลเอนต์
ก่อนอื่นมาเรียนรู้เพิ่มเติมเกี่ยวกับข้อกำหนดของฟังก์ชั่นนี้
1. การวิเคราะห์การทำงาน
ฟังก์ชั่นนี้แสดงโดยส่วนประกอบเรียงซ้อนที่มีสามรายการที่เรียงซ้อนกัน:
1) แต่ละรายการ cascading อาจต้องใช้ตัวเลือกที่จะใช้เป็นพรอมต์อินพุต:
ในกรณีนี้สามารถเลือกตัวเลือกที่ว่างเปล่าในรายการข้อมูลของแต่ละรายการ cascading (นั่นคือตัวเลือกที่ได้รับแจ้งจากอินพุต):
อาจไม่จำเป็นต้องใช้เป็นพรอมต์อินพุต:
ในกรณีนี้สามารถเลือกตัวเลือกข้อมูลเฉพาะในรายการข้อมูลของแต่ละรายการ cascading และไม่มีตัวเลือกที่ว่างเปล่าสามารถเลือกได้:
2) หากหน้าปัจจุบันกำลังสืบค้นจากฐานข้อมูลและฟิลด์ที่สอดคล้องกับส่วนประกอบ cascading มีค่าแล้วค่าที่ถูกสืบค้นจะถูกสะท้อนบนส่วนประกอบ cascading:
หากฟิลด์ที่เกี่ยวข้องที่พบในแบบสอบถามไม่มีค่าสถานการณ์ทั้งสองที่อธิบายไว้ในข้อกำหนดของจุด 1) จะปรากฏขึ้น
3) แต่ละรายการแบบเรียงซ้อนรูปแบบความสัมพันธ์รายการที่เชื่อมโยงเดียวในโครงสร้างข้อมูล รายการข้อมูลของรายการเรียงซ้อนหลังเกี่ยวข้องกับข้อมูลที่เลือกโดยรายการ cascading ก่อนหน้า
4) เมื่อพิจารณาถึงปัญหาด้านประสิทธิภาพรายการข้อมูลของแต่ละรายการ cascading จะแสดงโดย Ajax แบบอะซิงโครนัส
5) หลังจากการเริ่มต้นของส่วนประกอบ cascading เสร็จสมบูรณ์รายการของรายการ cascading แรกจะถูกโหลดโดยอัตโนมัติ
6) เมื่อรายการเรียงซ้อนปัจจุบันเปลี่ยนไปให้ล้างรายการข้อมูลของรายการเรียงซ้อนทั้งหมดที่เกี่ยวข้องโดยตรงหรือโดยอ้อม ในเวลาเดียวกันหากค่าหลังจากรายการ cascading ก่อนหน้านี้ไม่ว่างรายการข้อมูลของรายการ cascading ถัดไปที่เชื่อมโยงโดยตรงกับมันจะถูกโหลดโดยอัตโนมัติ เมื่อล้างรายการข้อมูลของรายการ cascading ให้ระวัง: หากรายการเรียงซ้อนจำเป็นต้องแสดงตัวเลือกการป้อนข้อมูลอินพุตตัวเลือกจะต้องถูกเก็บไว้เมื่อล้าง
7) เราต้องพิจารณาปัญหาประสิทธิภาพอย่างเต็มที่และหลีกเลี่ยงการโหลดซ้ำ
8) พิจารณาปัญหาของการส่งแบบฟอร์มเมื่อรายการใด ๆ ที่เรียงซ้อนของการเปลี่ยนแปลงส่วนประกอบเรียงซ้อนค่าที่เลือกโดยองค์ประกอบการเรียงซ้อนจะต้องสะท้อนในฟิลด์ข้อความที่ซ่อนอยู่เพื่ออำนวยความสะดวกในการส่งค่าของส่วนประกอบเรียงซ้อนไปยังพื้นหลังผ่านฟิลด์ข้อความ
ฟังก์ชั่นดังกล่าวข้างต้น
2. แนวคิดการใช้งาน
1) โครงสร้างข้อมูล
สิ่งที่แตกต่างจากส่วนประกอบอื่น ๆ คือมีการพึ่งพาข้อมูลบางอย่างในพื้นหลัง โครงสร้างข้อมูลที่ฉันพิจารณานั้นดีกว่านำไปใช้:
{"id": 1, "text": "Beijing", "Code": 110000, "Parentid": 0}, {"id": 2, "ข้อความ": "จังหวัด Hebei", "รหัส": 220000, "Parentid": 0}, {"id": 3, "ID เป็นตัวระบุข้อมูลที่ไม่ซ้ำกันและความสัมพันธ์ระหว่างข้อมูลระหว่างข้อมูลถูกสร้างขึ้นผ่าน ParentID ข้อความและรหัสเป็นสาขาธุรกิจทั่วไปทั้งหมด หากเราทำตามโครงสร้างข้อมูลนี้มันจะง่ายมากในการสอบถามส่วนต่อประสานของรายการข้อมูล cascading:
// ตรวจสอบรายการรายการ Cascade รายการแรก/API/Cascade? parentid = 0 // ตรวจสอบรายการของรายการคาสเคดที่สองตามค่าที่เลือกโดยรายการคาสเคดแรก/API/cascade? parentid = 1 // ตรวจสอบรายการของรายการที่สามตามมูลค่าที่เลือกโดยรายการ Cascade/API/CASC
โครงสร้างนี้ยังง่ายต่อการจัดการสำหรับพื้นหลัง แม้ว่ามันจะเป็นโครงสร้างของโครงสร้างตารางรูปต้นไม้ แต่การสืบค้นล้วนเป็นชั้นเดียวดังนั้นจึงง่ายต่อการใช้งาน
นอกจากนี้ยังสามารถเห็นได้จากการสาธิตการสืบค้นก่อนหน้านี้ว่าโครงสร้างนี้สามารถช่วยเรารวมอินเตอร์เฟสและพารามิเตอร์ของการสืบค้นข้อมูลลงในหนึ่งซึ่งเป็นสิ่งที่สะดวกมากสำหรับการพัฒนาส่วนประกอบ หลังจากที่เราได้รับโครงสร้างข้อมูลนี้จากพื้นหลังเราแยกวิเคราะห์ข้อมูลแต่ละตัวลงในตัวเลือกเช่น <ตัวเลือกค่า = "ปักกิ่ง" data-param-value = "1"> ปักกิ่ง </portion> สิ่งนี้ไม่เพียง แต่สามารถทำให้การแสดงผลแบบเลื่อนลงของรายการข้อมูลเสร็จสมบูรณ์ แต่ยังรวบรวมค่าที่เลือกของรายการน้ำตกปัจจุบันผ่านฟังก์ชั่นขององค์ประกอบ SELECT FORM ในที่สุดเมื่อรายการคาสเคดเปลี่ยนแปลงเรายังสามารถรับตัวเลือกที่เลือกและใช้ค่าของค่าพาราม-พารามิเตอร์ที่เก็บไว้เป็นพารามิเตอร์ parentid เพื่อโหลดรายการของรายการคาสเคดถัดไป นี่เป็นแนวคิดของการสืบค้นข้อมูลส่วนประกอบและการแยกวิเคราะห์
อย่างไรก็ตามสิ่งที่ต้องพิจารณาที่นี่คือปัญหาของความยืดหยุ่น ในโครงการจริงโครงสร้างข้อมูลของส่วนประกอบ cascading อาจถูกกำหนดตามความสัมพันธ์ของสมาคมที่คล้ายกันเช่น ID ParentId แต่ฟิลด์ของพวกเขาไม่จำเป็นต้องเรียกว่ารหัสข้อความ ParentId ID และมีแนวโน้มที่จะเป็นฟิลด์อื่น ๆ กล่าวอีกนัยหนึ่ง: เมื่อแยกวิเคราะห์ข้อมูลลงในตัวเลือกฟิลด์ที่ใช้สำหรับข้อความและค่าตัวเลือกและค่าของฟิลด์ที่ใช้สำหรับแอตทริบิวต์ข้อมูลพารามิเตอร์ข้อมูลนั้นไม่แน่นอน ชื่อพารามิเตอร์ parentId ที่ใช้เมื่อข้อมูลการสืบค้นไม่สามารถตายได้ บางครั้งหากเจ้าหน้าที่แบ็กเอนด์เขียนอินเทอร์เฟซแบบสอบถามก่อนและใช้ชื่ออื่นคุณไม่สามารถขอให้ใครบางคนเปลี่ยนชื่อพารามิเตอร์ได้เนื่องจากจำเป็นต้องรวบรวมและปรับใช้ซึ่งเป็นปัญหามากกว่าส่วนหน้า ค่าของ parentid = 0 ไม่สามารถแก้ไขได้เนื่องจาก parentid ของชั้นแรกของข้อมูลในโครงการจริงอาจว่างเปล่าหรือ -1 สิ่งเหล่านี้จะต้องได้รับการออกแบบเป็นตัวเลือก ในอีกด้านหนึ่งค่าเริ่มต้นจะมีให้และการตั้งค่าภายนอกจะสงวนไว้ตามสถานการณ์จริง ตัวอย่างเช่นในการดำเนินการขั้นสุดท้ายของบทความนี้ตัวเลือกนี้ถูกกำหนดเช่นนี้:
TextField: 'text', // ชื่อฟิลด์ในข้อมูลที่ส่งคืนเพื่อแสดงในองค์ประกอบ <potion>
ValueField: 'text', // ชื่อฟิลด์ในข้อมูลที่ส่งคืนเพื่อตั้งค่าตามค่าขององค์ประกอบ <porture>
paramfield: 'id', // เมื่อเรียกอินเตอร์เฟสข้อมูลสอบถามข้อมูลชื่อฟิลด์ที่สอดคล้องกับข้อมูลที่จะส่งผ่านไปยังพื้นหลัง
paramname: 'parentid', // เมื่อเรียกอินเตอร์เฟสการสืบค้นข้อมูลชื่อพารามิเตอร์ของข้อมูลจะถูกส่งผ่านหลังจาก URL
DefaultParam: '', // เมื่อสอบถามรายการน้ำตกแรกค่าที่ส่งผ่านไปยังพื้นหลังโดยทั่วไป 0, '', หรือ -1, ฯลฯ แสดงให้เห็นว่าข้อมูลในชั้นบนจะถูกสอบถาม
2) โครงสร้าง HTML
ตามข้อ 1 ของการวิเคราะห์การทำงานก่อนหน้านี้มีสองประเภทของโครงสร้าง HTML เริ่มต้นของส่วนประกอบ cascading:
<ul id = "licenselocation-view"> <li> <elect> <select value = ""> โปรดเลือกจังหวัด </optup> </select> </li> <li> <elect> <select> <ตัวเลือกค่า = "" โปรดเลือกเมือง </optive> </select> </li> <li>
หรือ
<ul id = "componylocation-view"> <li> <elect> </select> </li> <li> <select> </selip
ความแตกต่างเพียงอย่างเดียวระหว่างโครงสร้างทั้งสองนี้คือตัวเลือกที่ใช้เป็นพรอมต์อินพุตถูกกำหนดค่าหรือไม่ ควรสังเกตว่าหากต้องการตัวเลือกที่ว่างเปล่านี้แอตทริบิวต์ค่าจะต้องตั้งค่าเป็นว่างไม่เช่นนั้นตัวเลือกที่ว่างเปล่านี้จะส่งข้อมูลพรอมต์ตัวเลือกไปยังพื้นหลังเมื่อส่งแบบฟอร์ม
สิ่งที่สำคัญที่สุดเกี่ยวกับโครงสร้างทั้งสองนี้คือองค์ประกอบที่เลือกซึ่งไม่มีส่วนเกี่ยวข้องกับ UL และ LI UL และ LI ใช้สำหรับ UI; องค์ประกอบที่เลือกไม่มีความหมายและไม่จำเป็นต้องระบุว่าจังหวัดใดซึ่งเป็นเมืองและเป็นเขตหรือเขต การพูดในหน้าที่เลือกแสดงรายการเรียงซ้อน ไม่สำคัญว่าการเลือกเหล่านี้จะถูกกำหนดไว้ที่ใด เราเพียงแค่ต้องบอกส่วนประกอบที่เรียงซ้อนซึ่งเลือกองค์ประกอบของรายการที่เรียงซ้อนกัน สิ่งเดียวที่ต้องบอกเล่าถึงส่วนประกอบคือลำดับขององค์ประกอบที่เลือกเหล่านี้ แต่มักจะถูกควบคุมโดยลำดับเริ่มต้นขององค์ประกอบใน HTML โครงสร้างนี้สามารถช่วยเราแยกฟังก์ชั่นของส่วนประกอบออกจากพฤติกรรมให้มากที่สุด
3) การแยกความรับผิดชอบและการใช้รายการที่เชื่อมโยงเดียว
จะเห็นได้จากส่วนก่อนหน้านี้ว่าหากองค์ประกอบของน้ำตกนี้ถูกแบ่งตามความรับผิดชอบสามารถแบ่งออกเป็นสององค์ประกอบหลักได้หนึ่งมีหน้าที่รับผิดชอบในการจัดการฟังก์ชั่นโดยรวมและรายการ cascade ภายใน (cascadeview) และอื่น ๆ มีหน้าที่รับผิดชอบในการใช้งานของรายการ นอกจากนี้เพื่อให้มีการใช้ตรรกะแบบเรียงซ้อนกันอย่างสะดวกยิ่งขึ้นเราจำเป็นต้องเชื่อมต่อรายการเรียงซ้อนทั้งหมดผ่านรายการที่เชื่อมโยง ผ่านโหมด Publish-Subscribe รายการที่เรียงลำดับหลังสมัครรับข้อความว่ารายการที่เรียงซ้อนก่อนหน้ามีการเปลี่ยนแปลง เมื่อรายการเรียงซ้อนปัจจุบันเปลี่ยนแปลงข้อความจะถูกโพสต์เพื่อแจ้งรายการเรียงซ้อนที่ตามมาเพื่อประมวลผลตรรกะที่เกี่ยวข้อง ผ่านบทบาทของรายการที่เชื่อมโยงข้อความนี้อาจส่งผ่านไปจนถึงรายการสุดท้าย หากคุณอธิบายในภาพมันจะเป็นแบบนี้โดยคร่าวๆ:
สิ่งที่เราต้องทำคือการควบคุมการเปิดตัวและการส่งมอบข่าวดี
4) การส่งแบบฟอร์ม
เพื่อที่จะส่งค่าของส่วนประกอบ cascading ไปยังพื้นหลังได้อย่างสะดวกส่วนประกอบทั้งหมดสามารถปฏิบัติได้โดยรวมและเหตุการณ์ onchanged จะถูกจัดเตรียมไว้ด้านนอกซึ่งเหตุการณ์ภายนอกสามารถรับค่าของรายการเรียงซ้อนทั้งหมด เนื่องจากมีหลายน้ำตกหลายครั้งเมื่อเผยแพร่เหตุการณ์ onchanged เหตุการณ์นี้สามารถถูกเรียกใช้ก็ต่อเมื่อมีการเปลี่ยนแปลงน้ำตกใด ๆ
5) แคช AJAX
ในองค์ประกอบนี้เราต้องพิจารณาแคช AJAX สองระดับ อันแรกอยู่ที่ระดับองค์ประกอบ ตัวอย่างเช่นฉันเปลี่ยนรายการน้ำตกแรกเป็นปักกิ่ง ในเวลานี้รายการคาสเคดที่สองโหลดข้อมูลของปักกิ่ง จากนั้นฉันก็เปลี่ยนไอเท็มคาสเคดแรกจากปักกิ่งเป็นเหอเป่ยแล้วไปปักกิ่ง ในเวลานี้รายการน้ำตกที่สองยังคงแสดงรายการข้อมูลที่เกี่ยวข้องของปักกิ่ง หากเราแคชข้อมูลเมื่อมีการโหลดรายการเป็นครั้งแรกเราไม่จำเป็นต้องเริ่มคำขอ AJAX ในครั้งนี้ ที่สองคือคำขอ AJAX ในระดับหากมีส่วนประกอบหลายส่วนในหน้าฉันจะสลับรายการ cascading แรกของส่วนประกอบ cascading ครั้งแรกเป็นปักกิ่งและเบราว์เซอร์เริ่มร้องขอ AJAX เพื่อโหลดข้อมูล เมื่อฉันสลับรายการ cascading แรกของส่วนประกอบ cascading ที่สองเป็นปักกิ่งเบราว์เซอร์จะส่งคำขออื่นเพื่อโหลดข้อมูล หากฉันแคชข้อมูลที่ส่งคืนโดยคำขอ AJAX ครั้งแรกของส่วนประกอบแรกก่อนเมื่อองค์ประกอบที่สองใช้พารามิเตอร์เดียวกันเพื่อขออินเทอร์เฟซเดียวกันมันจะใช้แคชก่อนหน้าโดยตรงเพื่อส่งคืนผลลัพธ์ซึ่งสามารถลดคำขอ AJAX ได้ แคช Ajax ระดับที่สองขึ้นอยู่กับ "การห่อหุ้มทุติยภูมิของ JQuery Ajax และ Ajax Cache Proxy Component: Ajaxcache" ข้างต้น สำหรับส่วนประกอบมันใช้เพียงระดับแรกของแคชภายใน แต่ไม่จำเป็นต้องพิจารณาระดับที่สองของแคชเนื่องจากการใช้แคชในระดับที่สองนั้นโปร่งใสและไม่ทราบว่าองค์ประกอบ AJAX ที่ใช้มีฟังก์ชันของแคช
3. รายละเอียดการใช้งาน
การใช้งานขั้นสุดท้ายประกอบด้วยสามองค์ประกอบ, Cascadeview, CascadeItem และ CascadepublicDefaults สองคนแรกเป็นแกนหลักของส่วนประกอบและอันสุดท้ายถูกใช้เพื่อกำหนดตัวเลือกบางอย่าง ฟังก์ชั่นของมันอธิบายไว้ในรายละเอียดในความคิดเห็นของ CascadeItem นอกจากนี้ยังมีความคิดเห็นที่ละเอียดมากในรหัสต่อไปนี้ที่อธิบายบทบาทของรหัสคีย์บางอย่าง ดูที่รหัสตามข้อกำหนดก่อนหน้านี้ควรเข้าใจง่าย ฉันเคยใช้ข้อความเพื่ออธิบายรายละเอียดการใช้งานบางอย่าง แต่หลังจากนั้นฉันก็ค่อยๆรู้สึกว่าวิธีนี้ไม่ขอบคุณเล็กน้อย ขั้นแรกภาษาในระดับรายละเอียดไม่ใช่เรื่องง่ายที่จะจัดระเบียบ บางครั้งฉันไม่ได้แสดงความหมายของฉัน เห็นได้ชัดว่าฉันต้องการอธิบายบางสิ่งบางอย่างอย่างชัดเจน แต่มันก็สับสนมากขึ้น อย่างน้อยฉันก็จะรู้สึกแบบนี้เมื่อฉันอ่านสิ่งที่ฉันเขียน ประการที่สองนักพัฒนาเองมีความสามารถในการอ่านซอร์สโค้ดและนักพัฒนาที่กระตือรือร้นส่วนใหญ่ยินดีที่จะเข้าใจแนวคิดการใช้งานโดยคิดถึงรหัสของคนอื่น ดังนั้นฉันจึงใช้คำอธิบายประกอบเพื่ออธิบายรายละเอียดการใช้งานแทน :)
CascadepublicDefaults:
define (function () {return {url: '', // data query interface textfield: 'text', // return data ในชื่อฟิลด์ Valuefield: 'text', // ส่งคืนข้อมูลในชื่อเขตข้อมูลที่ควรแสดงในองค์ประกอบ <potion> paramfield: 'ข้อความ' ของข้อมูลที่จะส่งผ่านไปยังพื้นหลังคือ paramname: 'parentid', // เมื่อเรียกอินเทอร์เฟซการสืบค้นข้อมูลชื่อพารามิเตอร์ของข้อมูลที่ส่งผ่านหลังจาก URL เป็นค่าเริ่มต้น: '', // เมื่อสอบถามรายการ Cascade ตัวแรก พรอมต์อินพุตเช่น: โปรดเลือกจังหวัด) หากเป็นจริงตัวเลือกแรกเริ่มต้นจะไม่ถูกล้างเมื่อโหลดรายการเรียงซ้อนกัน: ฟังก์ชั่น (res) {return res;} // เนื่องจากรายการน้ำตกจะส่งคำขอ asyronous)cascadeview:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var class = ต้องการ ('mod/class'); var eventbase = ต้องการ ('mod/eventbase'); var publicDefaults = ต้องการ ส่วนประกอบ cascadeItem*/var ค่าเริ่มต้น = $. extend ({}, publicdefaults, {$ องค์ประกอบ: undefined, // อาร์เรย์ของรายการรายการ jq, ลำดับขององค์ประกอบที่แสดงถึงค่าของ cascaded ittems City, District, Chaoyang District ค่า: '', // สตริงที่คั่นด้วยค่า ValuesPearator แสดงค่าของแต่ละตัวเลือกที่จุดเริ่มต้น onchanged: $ .noop // เหตุการณ์นี้จะถูกกระตุ้นเมื่อค่าของการเปลี่ยนแปลงรายการใด ๆ opts = this.options = this.getOptions (ตัวเลือก), item = this.items = [], that = this, $ elements = opts. $ องค์ประกอบ, ค่า = opts.values.split (opts.valuesparator); $ (this); // อินสแตนซ์องค์ประกอบ CascadeItem และชี้คุณสมบัติ previtem ของแต่ละอินสแตนซ์ไปยังอินสแตนซ์ก่อนหน้า // ตั้งค่าคุณสมบัติ Previtem แรกเป็น undefinedvar cascadeItem = ใหม่ cascadeItem ($ el, $. extend (that.getItemOptions () $ .TRIM (ค่า [i])})); items.push (cascadeItem); // การเปลี่ยนแปลงอินสแตนซ์แต่ละน้ำตกแต่ละครั้งจะทำให้เกิดเหตุการณ์การเปลี่ยนแปลงของส่วนประกอบ cascadeview // outside สามารถจัดการตรรกะทางธุรกิจในการเรียกกลับ/การตั้งค่าของรายการทั้งหมด {that.trigger ('cown.cascadeview', that.getValue ());});});}); // การเริ่มต้นเสร็จสิ้นการโหลดรายการ cascading ครั้งแรกโดยอัตโนมัติ function () {return defaults;}, getItemOptions: function () {var opts = {}, _options = this.options; สำหรับ (var i ใน publicdefaults) {ถ้า (publicdefaults.hasownproperty (i) && i ของรายการ cascading ทั้งหมดซึ่งเป็นสตริงที่คั่นด้วยค่า ValuesPearator // ค่าของรายการ cascading ที่ว่างเปล่าจะไม่ส่งคืน getValue: function () {var value = []; this.items.foreach (ฟังก์ชั่น (รายการ) {var val = $ .Trim (item.getValue (); val! = '' value.join (this.options.valueseparator);}}, ขยาย: eventbase}); ส่งคืน cascadeview;});CascadeItem:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var class = ต้องการ ('mod/class'); var eventbase = ต้องการ ('mod/eventbase'); var publicDefaults = ต้องการ = ใหม่ AjaxCache ();/*** มีส่วนหนึ่งของตัวเลือกที่กำหนดไว้ใน PublicDefaults เนื่องจากส่วนประกอบของ CascadeItem จะไม่ถูกใช้โดยตรงโดยส่วนประกอบของ cascadeview ภายนอกจะถูกนำมาใช้จากภายนอก ใน PublicDefaults ถูกส่งผ่านไปยัง CascadeItem*/var ค่าเริ่มต้น = $. extend ({}, publicdefaults, {previtem: undefined, // ชี้ไปที่ค่ารายการ cascade ก่อนหน้า: '' // ค่าที่แสดงที่จุดเริ่มต้น}); this.base; () การส่งมอบองค์ประกอบที่เลือก {that.trigger ('cown.cascadeItem');}); // เมื่อค่าของการเปลี่ยนแปลงรายการแบบน้ำตกการประมวลผลคือการล้างและโหลดข้อมูลตามต้องการ That.hascontent && That.clear (); // ถ้าไม่ใช่รายการน้ำตกแรกและรายการคาสเคดก่อนหน้านี้ไม่ได้เลือกตัวเลือกที่ถูกต้องมันจะไม่ถูกประมวลผลถ้า (นั่นคือการแก้ไข && $ && this.one ('render.cascadeItem', function () {// ตั้งค่าเริ่มต้นที่. $ el.val (value.split (',')); // แจ้งให้คาสเคดที่ตามมาทำความสะอาดและโหลดข้อมูลที่เรียกใช้ this.getDefaults (), ตัวเลือก);}, getDefaults: function () {return defaults;}, clear: function () {var $ el = this. $ el; $ el.val (''); ถ้า (this.options.keepfirstoption) {// $ el.html ('');} // แจ้งรายการน้ำตกที่ตามมาเพื่อล้างและโหลดข้อมูลใหม่ this.trigger ('เปลี่ยนไป cascadeitem'); ข้อมูลของรายการ cascading แรกคือข้อมูลระดับบนสุดคีย์คงที่และไม่ซ้ำกันจะใช้เมื่อแคช: รูท // ชื่อคีย์ที่ใช้เมื่อแคชโดยรายการ cascading อื่น ๆ เกี่ยวข้องกับตัวเลือกที่เลือกโดยการเลือกก่อนหน้านี้ถ้า (! this.previtem) {paramValue = opts this.previtem.getParamValue (); datakey = paramValue;} // ก่อนตรวจสอบว่ามีข้อมูลที่โหลดในแคชข้อมูลและถ้ามีมันจะแสดงโดยตรงเพื่อหลีกเลี่ยง ajaxif (datakey ในนี้ cache) {this.render paramvalue; ajax.get (opts.url, params) .done (ฟังก์ชั่น (res) {// resolveajax การเรียกกลับนี้ใช้เพื่อแยกวิเคราะห์ข้อมูลที่ส่งคืนโดย Ajax ภายนอก // จำเป็นต้องส่งคืนข้อมูลอาร์เรย์ var data = opts.resolveajax (res); ถ้า (ข้อมูล) data; that.render (data);}});}}, Reender: ฟังก์ชั่น (data) {var html = [], opts = this.options; data.foreach (ฟังก์ชั่น (รายการ) {html.push (['option = " คุณสมบัติของพาราม-พารามิเตอร์ของรายการตัวเลือก [opts.paramfield], '">', รายการ [opts.textfield], '</optup>']. เข้าร่วม (''));}); // เพิ่มแบบไดนามิกในรูปแบบของภาคผนวกเพื่อหลีกเลี่ยงการส่งผลกระทบต่อตัวเลือกแรก //); true; // หมายความว่ามีเนื้อหา this.trigger ('render.cascadeitem');}, getValue: function () {ส่งคืนสิ่งนี้ $ el.val ();}, getParamValue: function ()}}}}}};4. คำแนะนำการสาธิต
แสดงโครงสร้างของรหัส:
กรอบคือส่วนที่เกี่ยวข้องของการสาธิต html/regist.html เป็นหน้าเว็บที่แสดงให้เห็นถึงผลกระทบและ js/app/regist.js เป็นรายการของเอฟเฟกต์การสาธิต JS:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var cascadeview = ต้องการ ('mod/cascadeview'); ฟังก์ชั่น publicsetcascadeview (fieldName, opts) {this.cascadeview = new cascadeview '../api/cascade.json', onchanged: this.onchanged, ค่า: opts.values, regentfirstoption: thint.keepfirstoption, resolveajax: ฟังก์ชั่น (res) {if (res.code == 200) {return res.data; $ ('input [name = "licenselocation"]'), KeepFirstoption: จริง, setCascadeview: PublicsetCascadeView, onChanged: ฟังก์ชั่น (e, value) {location_views.licenselocation. $ input.val (ค่า); SetCascadeview: PublicsetCascadeView, OnChanged: ฟังก์ชั่น (e, ค่า) {location_views.companylocation. $ input.val (ค่า);}}}}; location_views.companylocation.setcascadeview ('componylocation', {ค่า: location_views.companylocation. $ input.val ()});});ให้ความสนใจกับฟังก์ชั่นของตัวแปร location_views ในรหัสด้านบนเนื่องจากมีองค์ประกอบหลายส่วนในหน้า ตัวแปรนี้ได้รับการจัดการในลักษณะเดียวกันผ่านรูปแบบนโยบาย หากคุณไม่ทำเช่นนี้มันเป็นเรื่องง่ายที่จะสร้างรหัสที่ซ้ำกัน แบบฟอร์มนี้ยังเอื้อต่อการแยกและการห่อหุ้มตรรกะทางธุรกิจบางอย่างในไฟล์รายการเช่นสถานที่ที่มีการประมวลผลตรรกะทางธุรกิจ
5. อื่น ๆ
นี่อาจเป็นบล็อกสุดท้ายที่เขียนโดย บริษัท ในขณะนี้ คุณต้องไปทำงานในหน่วยใหม่ในสองวัน ฉันไม่แน่ใจว่าคุณมีเวลาว่างมากในการบันทึกความคิดการทำงานตามปกติของคุณ แต่อย่างน้อยคุณก็พัฒนานิสัยในการเขียนบล็อกและคุณจะบีบเวลาออกไปหากคุณไม่มีเวลาในอนาคต เป้าหมายในปีนี้ส่วนใหญ่จะขยายความรู้และปรับปรุงคุณภาพของรหัส บล็อกที่ตามมาจะอยู่ในหมวดหมู่ของการพัฒนาองค์ประกอบมากขึ้น ฉันหวังว่าคุณจะสามารถให้ความสนใจกับเว็บไซต์ Wulin.com ในอนาคต!