บทความนี้แนะนำแนวคิดการใช้งานของภาพทั่วไปบนหน้าเว็บเพื่อสร้างตัวอย่างภาพขนาดเล็กโดยตรงบนหน้าหลังจากอัปโหลด เมื่อพิจารณาว่าฟังก์ชั่นนี้มีการบังคับใช้บางอย่างตรรกะที่เกี่ยวข้องจะถูกห่อหุ้มไว้ในส่วนประกอบของ ImageUploadView เอฟเฟกต์การใช้งานจริงสามารถใช้เพื่อดูการเรนเดอร์ Git ในย่อหน้าถัดไป ในกระบวนการของการใช้งานส่วนประกอบนี้เราใช้เนื้อหาที่เกี่ยวข้องที่แนะนำในบล็อกก่อนหน้าเช่นการสืบทอดไลบรารีคลาส js และไลบรารีการจัดการเหตุการณ์ eventbase.js ขององค์ประกอบใด ๆ ซึ่งรวมถึงความคิดบางอย่างเกี่ยวกับการแยกความรับผิดชอบการแยกประสิทธิภาพและพฤติกรรม ยินดีต้อนรับสู่การอ่านและสื่อสาร
ผลการสาธิต:
หมายเหตุ: เนื่องจากรหัสสำหรับการสาธิตนั้นคงที่ทั้งหมดส่วนประกอบที่อัปโหลดโดยไฟล์จะถูกจำลองโดย SettimeOut แต่วิธีการเรียกของมันจะเหมือนกับเมื่อฉันใช้องค์ประกอบการอัปโหลดในงานจริงของฉันดังนั้นการใช้รหัสของเอฟเฟกต์การสาธิตจึงสอดคล้องกับข้อกำหนดการทำงานจริง
ตามแนวคิดบล็อกก่อนหน้าของฉันก่อนอื่นมาแนะนำข้อกำหนดสำหรับฟังก์ชั่นการอัปโหลดตัวอย่างนี้
1. การวิเคราะห์ข้อกำหนด
ตามการเรนเดอร์การสาธิตก่อนหน้านี้ข้อกำหนดการวิเคราะห์มีดังนี้:
1) ในพื้นที่อัปโหลดเริ่มต้นจะมีปุ่มอัปโหลดแบบคลิกได้เพียงครั้งเดียวเท่านั้น เมื่อคลิกปุ่มนี้ภาพที่อัปโหลดจะปรากฏขึ้นในพื้นที่แสดงตัวอย่างที่ตามมา
2) หลังจากเพิ่มอิมเมจที่อัปโหลดไปยังพื้นที่แสดงตัวอย่างคุณสามารถลบออกได้โดยการลบปุ่ม
3) เมื่อจำนวนภาพที่อัปโหลดทั้งหมดถึงขีด จำกัด ตัวอย่างเช่นขีด จำกัด การอัปโหลดในการสาธิตคือ 4 ให้ลบปุ่มอัปโหลด
4) เมื่อจำนวนรูปภาพที่อัปโหลดทั้งหมดถึงขีด จำกัด ที่แน่นอนหากรูปภาพบางภาพถูกลบออกผ่านการดำเนินการลบปุ่มอัปโหลดจะต้องปรากฏขึ้น
ข้อกำหนดข้างต้นสามารถมองเห็นได้ จากประสบการณ์ข้อกำหนดที่สามารถวิเคราะห์ได้มีดังนี้:
1) หากหน้านั้นอยู่ในสถานะการแก้ไขนั่นคือรัฐสอบถามจากฐานข้อมูลตราบใดที่รายการรูปภาพไม่ว่างเปล่าภาพจะต้องแสดงที่จุดเริ่มต้น และจะต้องควบคุมว่าปุ่มอัปโหลดจะปรากฏขึ้นตามความยาวของรายการรูปภาพที่พบและขีด จำกัด การอัปโหลดหรือไม่
2) หากหน้าปัจจุบันเป็นสถานะที่สามารถดูได้ แต่ไม่เปลี่ยนแปลงปุ่มอัปโหลดและปุ่มลบจะต้องถูกลบออกในระยะเริ่มต้น
หลังจากการวิเคราะห์ข้อกำหนดเสร็จสมบูรณ์ให้ฉันอธิบายแนวคิดการใช้งานของฉัน
2. แนวคิดการใช้งาน
เนื่องจากนี่คือหน้าแบบฟอร์มหากคุณต้องการส่งไปยังพื้นหลังหลังจากอัปโหลดรูปภาพคุณต้องต้องใช้ฟิลด์ข้อความ ดังนั้นเมื่อฉันทำหน้าคงที่ฉันจึงพิจารณาฟิลด์ข้อความนี้ หลังจากอัปโหลดภาพใหม่และลบภาพฉันต้องแก้ไขค่าของฟิลด์ข้อความนี้ โครงสร้างของส่วนนี้เมื่อทำหน้าคงที่มีดังนี้:
<div> <dlable> เวอร์ชันอิเล็กทรอนิกส์ของบัตรประจำตัวบุคคลที่ถูกกฎหมาย </label> <div> <อินพุต id = "legantpersonidpic-input" name = "LegalPersonIdpic" type = "Hidden"> <ul id = "legalpersonidpic-view"> <li> <a href = "JavaScript:; href = "#"> <i> </i> ดูตัวอย่าง </a> </p> </div> </div>
จากโครงสร้างนี้เรายังสามารถเห็นได้ว่าฉันใส่พื้นที่อัปโหลดทั้งหมดในหนึ่ง UL แล้วใช้ UL li แรกเป็นปุ่มอัปโหลด ในการทำฟังก์ชั่นนี้ให้เสร็จสิ้นงานหลักของเราคือ: การอัปโหลดและอัปโหลดการโทรกลับเพิ่มหรือลบตัวอย่างภาพและการจัดการค่าฟิลด์ข้อความ จากมุมมองนี้รวมกับแนวคิดของการแยกความรับผิดชอบฟังก์ชั่นนี้ต้องใช้องค์ประกอบอย่างน้อยสามองค์ประกอบหนึ่งที่รับผิดชอบในการอัปโหลดไฟล์หนึ่งรับผิดชอบการจัดการตัวอย่างภาพและอื่น ๆ ที่รับผิดชอบในการจัดการค่าโดเมนข้อความ อย่าห่อหุ้มฟังก์ชั่นทั้งสามนี้เป็นคู่หรือทั้งหมดเข้าด้วยกัน ในกรณีนั้นการมีเพศสัมพันธ์ที่ใช้งานได้นั้นแข็งแกร่งเกินไปและส่วนประกอบที่เขียนนั้นสามารถขยายได้และนำกลับมาใช้ใหม่ได้ หากจำเป็นต้องมีการโต้ตอบระหว่างองค์ประกอบทั้งสามนี้เราเพียงแค่ต้องกำหนดให้เป็นอินเทอร์เฟซที่เรียกว่าภายนอกด้วยความช่วยเหลือของฟังก์ชั่นการโทรกลับ
อย่างไรก็ตามการจัดการค่าโดเมนข้อความนั้นง่ายมากและไม่สำคัญว่ามันจะถูกเขียนเป็นส่วนประกอบหรือไม่ แต่อย่างน้อยก็จำเป็นต้องมีการห่อหุ้มระดับฟังก์ชั่น แม้ว่าส่วนประกอบการอัปโหลดไฟล์ไม่ได้เป็นจุดสนใจของบทความนี้ แต่ก็มีปลั๊กอินโอเพนซอร์สแบบสำเร็จรูปหลายรายการบนอินเทอร์เน็ตเช่น webPloader ซึ่งสามารถนำไปใช้ได้ไม่ว่าจะใช้โดยตรงหรือการห่อหุ้มทุติยภูมิ ฟังก์ชั่นของภาพตัวอย่างเป็นเนื้อหาหลักของบทความนี้ ส่วนประกอบ ImageUploadView คือการห่อหุ้มของมัน จากมุมมองของข้อกำหนดมีเพียงสามวิธีในการแสดงความหมายสำหรับองค์ประกอบนี้คือการแสดงต่อภาคผนวกและ delitem การเรนเดอร์ใช้เพื่อแสดงรายการตัวอย่างเริ่มต้นหลังจากการเริ่มต้นเสร็จสิ้นภาคผนวกจะใช้เพื่อเพิ่มตัวอย่างภาพใหม่หลังจากการอัปโหลดและ Delitem ใช้เพื่อลบตัวอย่างภาพที่มีอยู่ ตามแนวคิดพื้นฐานนี้เราจำเป็นต้องออกแบบตัวเลือกและกิจกรรมสำหรับมันตามข้อกำหนดและประสบการณ์ในการพัฒนาส่วนประกอบ
จากข้อกำหนดก่อนหน้านี้เราพบว่าการแสดงผลของส่วนประกอบ ImageUploadView นี้จะได้รับผลกระทบจากสถานะหน้า เมื่อหน้าอยู่ในโหมดมุมมองส่วนประกอบนี้ไม่สามารถอัปโหลดและลบได้ดังนั้นคุณสามารถพิจารณาเพิ่มตัวเลือกแบบอ่านได้อย่างเดียว ในเวลาเดียวกันการดำเนินการอัปโหลดและการลบจะส่งผลกระทบต่อตรรกะ UI ของปุ่มอัปโหลดซึ่งเกี่ยวข้องกับขีด จำกัด การอัปโหลด เพื่อความยืดหยุ่นขีด จำกัด การอัปโหลดจะต้องถือเป็นตัวเลือก จากสามวิธีอินสแตนซ์ที่กล่าวถึงในย่อหน้าก่อนหน้าตามประสบการณ์ก่อนหน้าของคุณในการกำหนดเหตุการณ์โดยทั่วไปวิธีการอินสแตนซ์จะกำหนดเหตุการณ์คู่หนึ่งเช่นเดียวกับปลั๊กอินของ bootstrap ตัวอย่างเช่นวิธีการเรนเดอร์สามารถกำหนดเรนเดอร์ก่อน เหตุการณ์นี้จะถูกเรียกใช้ก่อนที่จะดำเนินการตรรกะหลักของการเรนเดอร์ หากผู้ฟังภายนอกเรียกวิธีการ preventDefault () ของเหตุการณ์นี้ดังนั้นตรรกะหลักของการเรนเดอร์จะไม่ถูกดำเนินการ; นอกจากนี้ยังมีการเรนเดอร์หลังจากเหตุการณ์ซึ่งถูกเรียกใช้หลังจากตรรกะหลักของการเรนเดอร์จะถูกดำเนินการ ข้อได้เปรียบของเหตุการณ์คำจำกัดความแบบคู่นี้คือไม่เพียง แต่ให้วิธีการภายนอกเพื่อขยายฟังก์ชันการทำงานของส่วนประกอบ แต่ยังเพิ่มการจัดการพฤติกรรมเริ่มต้นของส่วนประกอบ
ในที่สุดจากประสบการณ์การทำงานก่อนหน้านี้นอกเหนือจากการอัปโหลดรูปภาพเพื่อดูตัวอย่างฉันได้ทำการอัปโหลดวิดีโอการอัปโหลดเสียงการอัปโหลดเอกสารสามัญ ฯลฯ ดังนั้นเมื่อฉันพบฟังก์ชั่นนี้ในครั้งนี้ฉันรู้สึกว่าฉันควรแยกสิ่งที่คล้ายกันออกจากฟังก์ชั่นเหล่านี้ ข้อดีอีกอย่างของคลาสฐานนี้คือมันสามารถแยกตรรกะทั่วไปออกจากโครงสร้าง HTML ได้อย่างสมบูรณ์ ในคลาสพื้นฐานนี้มีเพียงสิ่งที่พบได้ทั่วไปเช่นคำจำกัดความของตัวเลือกและพฤติกรรมส่วนประกอบ (แสดงต่อภาคผนวก delitem) รวมถึงการฟังและการกระตุ้นเหตุการณ์ทั่วไป มันจะต้องออกจากอินเทอร์เฟซคงที่สำหรับคลาสย่อยเพื่อนำไปใช้ ในการใช้งานที่ตามมาฉันได้กำหนดองค์ประกอบ FilePloadBaseView เพื่อให้ฟังก์ชั่นของคลาสฐานนี้เสร็จสมบูรณ์ คลาสฐานนี้ไม่มีตรรกะใด ๆ สำหรับการประมวลผล HTML หรือ CSS มันเป็นเพียงบทสรุปฟังก์ชั่นที่เราต้องการทำให้เสร็จและไม่จัดการตรรกะทางธุรกิจใด ๆ คลาสย่อยที่ใช้งานตามตรรกะทางธุรกิจจะถูก จำกัด โดยโครงสร้าง HTML ดังนั้นขอบเขตของการประยุกต์ใช้คลาสย่อยมีขนาดเล็ก และเนื่องจากคลาสฐานถูกแยกออกจากโครงสร้าง HTML อย่างสมบูรณ์จึงมีขอบเขตที่ใหญ่กว่าของแอปพลิเคชัน
3. รายละเอียดการใช้งาน
จากแนวคิดการใช้งานของส่วนที่ 2 คลาสที่จะนำไปใช้คือ: FilePloadBaseView และ ImageUploadView อดีตคือคลาสพื้นฐานของหลัง ในเวลาเดียวกันเมื่อพิจารณาว่าส่วนประกอบจำเป็นต้องจัดเตรียมฟังก์ชั่นการจัดการเหตุการณ์เราจำเป็นต้องใช้ EventBase.js ในบล็อกก่อนหน้าและ FilePloadBaseView จะต้องสืบทอดส่วนประกอบ EventBase ของไลบรารี เมื่อพิจารณาว่ามีคำจำกัดความของคลาสและการสืบทอดเรายังต้องใช้คลาสการสืบทอดไลบรารีคลาส Js ที่เขียนไว้ก่อนเพื่อกำหนดองค์ประกอบและความสัมพันธ์การสืบทอดของส่วนประกอบ ความสัมพันธ์ในการสืบทอดของส่วนประกอบที่เกี่ยวข้องคือ: ImageUploadView ขยาย filePloadBaseView ขยาย EventBase
(หมายเหตุ: รหัสที่เกี่ยวข้องต่อไปนี้ใช้ SEAJs เป็น modularity)
FilePloadBaseView ทำอะไรได้บ้าง:
1) กำหนดตัวเลือกทั่วไปและการจัดการเหตุการณ์ทั่วไป
ในการกำหนดค่าเริ่มต้นของส่วนประกอบนี้คุณสามารถดูคำจำกัดความของตัวเลือกทั่วไปและเหตุการณ์ทั่วไปทั้งหมด:
var defaults = {data: [], // รายการข้อมูลที่จะแสดงต้องเป็นประเภทวัตถุเช่น [{url: 'xxx.png'}, {url: 'yyyy.png'}] sizelimit: 0, // และการลบ onbeforerender: $ .noop, //forereport.Bore Event, trigger onrender: $ .noop, //forereport. หลังจากเหตุการณ์ก่อนที่วิธีการเรนเดอร์จะถูกเรียก // ปฏิบัติตามเหตุการณ์ delitem.before, trigger ondelitem: $ .noop ก่อนที่วิธี delitem จะถูกเรียกว่า // ปฏิบัติตามเหตุการณ์ delitem.fter, triggered};ในวิธีการเริ่มต้นขององค์ประกอบคุณสามารถดูตรรกะการเริ่มต้นสำหรับตัวเลือกทั่วไปและการจัดการเหตุการณ์:
init: function (องค์ประกอบ, ตัวเลือก) {// เรียกเมธอด init ของคลาสแม่ eventBase ผ่าน this.base; // แอตทริบิวต์อินสแตนซ์ var opts = this.options = this.getOptions (ตัวเลือก); this.data = Resolvedata (opts.data); ลบ opts.data; this.sizeLimit = opts.sizeLimit; this.readonly = opts.readonly; // เหตุการณ์ที่มีผลผูกพัน this.on ('render.before', $ .proxy (opts.onbeforerender, this)); this.on ('render.fter', $ .proxy (opts.onrender, this)); this.on ('append.before', $ .proxy (opts.onbeforeappend, this)); this.on ('append.fter', $ .proxy (opts.onappend, this)); this.on ('delitem.before', $ .proxy (opts.onbeforedelitem, this)); this.on ('delItem.After', $ .proxy (opts.ondelitem, this));},2) กำหนดพฤติกรรมของส่วนประกอบและอินเทอร์เฟซสำรองที่สามารถนำไปใช้โดย subclasses:
render: function () {/*** render เป็นเทมเพลต subclass ไม่จำเป็นต้องแทนที่วิธีการเรนเดอร์มันจำเป็นต้องแทนที่เมธอด _render* เมื่อมีการเรียกวิธีการเรนเดอร์ของคลาสย่อยเท่านั้นวิธีการเรนเดอร์ของคลาสแม่จะเรียกว่า* แต่เมื่อดำเนินการวิธี _render วิธี _render ของ subclass เรียกว่า* this.trigger (e = $ .EVENT ('render.before')) ถ้า (e.isdefaultprevented ()) กลับ; this._render (); this.trigger ($. event ('render.fter'));}, // subclasses จำเป็นต้องใช้ _render method_render: function () {}, ผนวก: ฟังก์ชั่น (รายการ) {var e; ถ้า (! return; this.data.push (รายการ); this._append (รายการ); this.trigger ($. เหตุการณ์ ('ภาคผนวก'), รายการ);}, // subclasses จำเป็นต้องใช้ _append method_append: ฟังก์ชั่น (data) {}, delitem: ฟังก์ชัน (uuid) = $ .EVENT ('delitem.Before'), รายการ); ถ้า (e.isdefaultPrevented ()) กลับ; this.data.splice (this.getDataItemindex (uuid), 1); this._delitem (รายการ); this.trigger ($. method_delitem: function (data) {}เพื่อที่จะจัดการตรรกะการแจกแจงเหตุการณ์อย่างสม่ำเสมอก่อนและหลังพฤติกรรมตรรกะหลักของการเรนเดอร์ต่อภาคผนวก delitem จะถูกแยกออกเป็นวิธีการ _render, _append และ _delitem ที่จำเป็นต้องใช้โดย subclasses เมื่อวิธีการเรนเดอร์ของคลาสย่อยถูกเรียกวิธีการของคลาสแม่จะถูกเรียกจริง แต่เมื่อคลาสพาเรนต์ดำเนินการวิธี _render วิธีการของคลาสย่อยจะถูกดำเนินการและอีกสองวิธีก็คล้ายกัน ควรสังเกตว่า subclasses ไม่สามารถแทนที่ทั้งสามวิธีที่แสดงต่อภาคผนวกและ delitem มิฉะนั้นคุณต้องจัดการตรรกะทริกเกอร์ของเหตุการณ์ที่เกี่ยวข้องด้วยตัวเอง
การใช้งานโดยรวมของ FilePloadBaseView มีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var class = ต้องการ ('mod/class'); var eventbase = ต้องการ ('mod/eventbase'); var ค่าเริ่มต้น = {data: [], // เพื่อแสดงรายการข้อมูลรายการ 'yyyy.png'}] sizelimit: 0, // เพื่อ จำกัด จำนวนองค์ประกอบที่แสดงใน baseview ถ้า 0 หมายถึงไม่มีขีด จำกัด แบบอ่านอย่างเดียว: false, // เพื่อควบคุมว่าองค์ประกอบใน baseview ได้รับอนุญาตให้เพิ่มและลบ onbeforerender: $ .noop onbeforeapend: $ .noop, // append ที่เกี่ยวข้องก่อนเหตุการณ์, trigger onappend: $ .noop, // append. หลังจากเหตุการณ์ที่สอดคล้องกัน, trigger onbeforedelitem: $ .noop, // uptending uptend. หลังจาก triggerforedelitem: $ .noop Delitem.Before Event, Trigger ondelitem: $ .noop // เหตุการณ์ delitem.fter ที่สอดคล้องกันทริกเกอร์};/*** การประมวลผลข้อมูลเพิ่มแอตทริบิวต์ _uuid ลงในบันทึกข้อมูลแต่ละรายการเพื่ออำนวยความสะดวกในการค้นหา*/ฟังก์ชันการแก้ไข เวลา);});} ฟังก์ชั่นแก้ไขปัญหา (ข้อมูล, เวลา) {เวลา = เวลา || วันที่ใหม่ (). getTime (); data._UUID = '_UUID' + เวลา + Math.Floor (Math.Random () * 100,000); EventBase ผ่าน this.base; // อินสแตนซ์แอตทริบิวต์ var opts = this.options = this.getoptions (ตัวเลือก); $ proxy (opts.onbeforerender, สิ่งนี้); $ .proxy (opts.onbeforedelitem, this); (uuid) {// รับ dateitemreturn this.data.filter (ฟังก์ชั่น (รายการ) {return item._uuid === uuid;}) [0];}, getDataItemindex: ฟังก์ชัน (uuid) {var ret; ret;}, render: function () {/*** render เป็นเทมเพลต เหตุการณ์*/var e; return; item = ResolvedataItem (รายการ); this.trigger (e = $ .EVENT ('ภาคผนวกก่อนหน้า'), ถ้า (e.isdefaultPrevented ()) return; this.data.push (รายการ); this._append (รายการ); (data) {}, delitem: ฟังก์ชั่น (uuid) {var e, item = this.getDataItem (uuid); ถ้า (! item) return; this.trigger (e = $. event ('delitem.before'), ถ้า 1); this._delitem (รายการ); this.trigger ($. event ('delitem.fter'), รายการ);}, // subclasses จำเป็นต้องใช้ _delitem method_delitem: ฟังก์ชั่น (ข้อมูล) {}}, ขยาย: EventBase, StaticMembersการใช้งาน ImageUploadView นั้นค่อนข้างง่ายคล้ายกับการเติมในช่องว่าง มีบางจุดที่จะอธิบาย:
1) ค่าเริ่มต้นของคลาสนี้จำเป็นต้องขยายค่าเริ่มต้นของคลาสพาเรนต์เพื่อเพิ่มตัวเลือกเริ่มต้นของคลาสย่อยนี้และยังคงคำจำกัดความของตัวเลือกเริ่มต้นของคลาสแม่ ตามโครงสร้างหน้าคงที่มีการเพิ่มเหตุการณ์ onappendclick และวิธีการที่เกี่ยวข้องของส่วนประกอบการอัปโหลดไฟล์สามารถเรียกได้จากภายนอกในเหตุการณ์นี้:
// สืบทอดและขยายค่าเริ่มต้นของค่าเริ่มต้นของคลาสพาเรนต์เริ่มต้น = $. extend ({}, fileuploadbaseview.defaults, {onappendclick: $ .noop // การโทรกลับเมื่อคลิกปุ่มอัปโหลด});2) ในวิธีการเริ่มต้นวิธีการเริ่มต้นของคลาสแม่จะต้องถูกเรียกให้เสร็จสิ้นการประมวลผลเชิงตรรกะทั่วไปเหล่านั้น; ในตอนท้ายของการเริ่มต้นคุณต้องเรียกใช้วิธีการเรนเดอร์ด้วยตนเองเพื่อให้คุณสามารถดูเอฟเฟกต์หลังจากส่วนประกอบถูกสร้างอินสแตนซ์:
การใช้งานอื่น ๆ คือการใช้ตรรกะทางธุรกิจอย่างหมดจดและเกี่ยวข้องอย่างใกล้ชิดกับข้อกำหนดของส่วนที่ 2
การใช้งานโดยรวมของ ImageUploadView มีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var class = ต้องการ ('mod/class'); var fileuploadbaseview = ต้องการ ('mod/fileuploadbaseview'); // สืบทอดและขยายค่าเริ่มต้นเริ่มต้น // การโทรกลับเมื่อคลิกปุ่มอัปโหลด}); var imageUploadView = คลาส ({instancemembers: {init: ฟังก์ชั่น (องค์ประกอบ, ตัวเลือก) {var $ element = this. $ element = $ (องค์ประกอบ); var opts = this.getOptions (ตัวเลือก); ตัวเลือก); // เพิ่มการอัปโหลดและลบผู้ฟังและการประมวลผลทริกเกอร์ถ้า (! this.readonly) {var that = that; that.on ('ภาคผนวก', $ .proxy (opts.onappendclick, สิ่งนี้)); $ element.on ('คลิก' that.trigger ('appendclick');}); $ element.on ('click.remove', '.view-act-del', ฟังก์ชั่น (e) {var $ this = $ (e.currenttarget); that.delitem ($ this.data ('uuid'); e.preventdefault (); {return defaults;}, _ setItemaddhtml: function () {this. $ element.preper ($ ('<li> <a href = "JavaScript:;">+</a> </li>')); {var html = [], that = this; // ถ้าไม่ใช่สถานะอ่านอย่างเดียวและยังไม่ถึงขีด จำกัด การอัปโหลดให้เพิ่มปุ่มอัปโหลดถ้า (! (this.readonly || {html.push (That._getItemrenderhtml (item))}); นี่. $ element.append ($ (html.join (')));}, _ getItemrenderhtml: ฟังก์ชัน (รายการ) {return [' <li id = "' src = "', item.url,'"> ', this.readonly? สิ่งนี้. $ element.find ('li.view-item-add'); // หากถึงขีด จำกัด การอัปโหลดให้ลบปุ่มอัปโหลดถ้า (this.sizeLimit && this.sizeLimit <= this.data.length && $ itemaddli.length) (! $ itemaddli.length) {this._setitemaddhtml ();}}}, _ ผนวก: ฟังก์ชั่น (ข้อมูล) {this. $ element.append ($ (this._getItemrenderhtml (data))); this._dealwithsizelimit () data._uuid) .remove (); this._dealwithSizeLimit ();}}, ขยาย: fileUploadBaseView});4. คำแนะนำการสาธิต
โครงสร้างโครงการสาธิตคือ:
กรอบคือรหัสหลักของการสาธิต ในหมู่พวกเขา FilePloadBaserView.js และ imageUploadView.js เป็นองค์ประกอบหลักสองประการที่ใช้ในการใช้งานก่อนหน้านี้ fileuploader.js ใช้เพื่อจำลองการอัปโหลดส่วนประกอบ อินสแตนซ์ของมันมีการโทรกลับที่ประสบความสำเร็จซึ่งระบุว่าการอัปโหลดสำเร็จ นอกจากนี้ยังมี openchoosefilewin ที่ใช้ในการจำลองกระบวนการเปิดหน้าต่างไฟล์การเลือกและอัปโหลด:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {return function () {var imglist = ['../img/1.jpg' ,'../img/2.jpg','/img/3.jpg''../img/4.jpg'], i = 0; = function () {settimeout (function () {that.onsuccess (imglist [i ++]); ถ้า (i == imglist.length) {i = 0;}}, 1000);}}});App/regist.js เป็นรหัสเชิงตรรกะของหน้าสาธิตและส่วนสำคัญได้รับการอธิบายด้วยความคิดเห็น:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ('jQuery'); var imageUploadView = ต้องการ ('mod/imageUploadView'); var fileuploader = ต้องการ ('mod/fileUploader') อัพโหลดอย่างประสบความสำเร็จและหลังจากส่วนประกอบของ ImageUploadView ลบรายการบางรายการมันจะส่งผลกระทบต่อมูลค่าของ $ legantpersonidpic var $ legalpersonidpic = $ ('#legalpersonidpic-input'), data = json.parse ($ legalpersonidpic.val () ImageUploadView Component // หลังจากอัปโหลดไฟล์ได้สำเร็จแล้วให้บันทึกไฟล์ที่อัปโหลดใหม่ไปยังค่าของ $ legantPersonIdpic // $ legalPersonIdpic จัดเก็บ var upgendimageInputValue = ฟังก์ชั่น ($ อินพุต, รายการ) {var value = json.parse ($ input.val '[]'); value.push (รายการ); $ input.val (json.stringify (value));}; // เมื่อส่วนประกอบของ ImageUploadView ถูกเรียกให้ลบรายการข้อมูลที่เก็บไว้ใน $ legalpersonidpic '[]'), index; value.foreach (ฟังก์ชั่น (รายการ, i) {ถ้า (item._uuid === uuid) {index = i;}}); value.splice (ดัชนี, 1); $ input.val (json.stringify (ค่า)); = {url: uploadValue}; legultPersonIdPicView.Append (รายการ); upgendImageInputValue ($ legalpersonidpic, รายการ);}; fileuploader.openchoosefilewin ();}, ondelItem: ฟังก์ชั่น (ข้อมูล) {removeImageInputValue ($ legalpersonidpic, data._uuid);}});});5. สรุปบทความนี้
ส่วนประกอบของ ImageUploadView ไม่ยากที่จะนำไปใช้ในที่สุด แต่ฉันก็ใช้เวลามากมายในการคิดเกี่ยวกับมันและชั้นเรียนหลักอื่น ๆ เพื่อนำไปใช้และส่วนใหญ่ใช้เวลาในการแยกการแยกความรับผิดชอบและการแยกพฤติกรรม มุมมองเกี่ยวกับแนวคิดการเขียนโปรแกรมทั้งสองด้านที่แสดงในบทความนี้เป็นเพียงประสบการณ์ส่วนตัวของฉันเอง เนื่องจากระดับนามธรรมวิธีการคิดของทุกคนและความเข้าใจขั้นสุดท้ายจะไม่เหมือนกัน ดังนั้นฉันไม่สามารถพูดได้โดยตรงว่าฉันถูกหรือผิด จุดประสงค์ในการเขียนคือการแบ่งปันและสื่อสารและดูว่ามีเพื่อนที่มีประสบการณ์คนอื่น ๆ ที่เต็มใจบอกคุณเกี่ยวกับความคิดของพวกเขาในเรื่องนี้หรือไม่ ฉันเชื่อว่าหลังจากที่ทุกคนได้อ่านมากเกินไปเกี่ยวกับความคิดของคนอื่นพวกเขาจะช่วยฝึกอบรมแนวคิดการเขียนโปรแกรมของพวกเขาเอง