โมดูลที่แท้จริง
การปรับระดับส่วนหน้าเริ่มเร็วมาก ไม่ว่าจะเป็นสิ่งจำเป็น. js, เบราว์เซอร์สำหรับบรรจุภัณฑ์แบบแยกส่วนหรือเชิงมุมสำหรับการฉีดพึ่งพาเราสามารถแบ่งรหัส JS ออกเป็นโมดูลขนาดเล็กและประกอบ จากนั้นเราจะใช้น้อยลงหรือ SASS เพื่อแบ่งไฟล์ CSS ออกเป็นโมดูลขนาดเล็กเพื่อเขียนและเรายังรู้สึกถึงลักษณะที่มุ่งเน้นวัตถุของการห่อหุ้มมรดกความหลากหลาย polymorphism ฯลฯ ในรหัส CSS
อย่างไรก็ตามก่อนที่ Webpack จะออกมาสิ่งที่เราเรียกว่า modularity ไม่สามารถถือว่าเป็นโมดูลได้เลย ทำไมเราถึงพูดแบบนี้? เนื่องจากมีปัญหาสำคัญที่ยังไม่ได้รับการแก้ไขซึ่งเป็นการพึ่งพาโมดูล JS ในโมดูล CSS
ตัวอย่างเช่นหากเรามีโมดูลโมดูล JS เราสามารถนำเข้าโดยตรงและเรียกมันว่าจะปรากฏขึ้นในกล่องโต้ตอบได้หรือไม่? ตกลงดังที่แสดงในรูปด้านล่างหรือไม่?
ในทางทฤษฎีนี้ควรเป็นกรณีนี้ แต่ในความเป็นจริงแล้วโมดัลนี้ต้องอาศัยโมดูล CSS ที่สอดคล้องกัน หากเราไม่นำเข้าโมดูลนี้เราไม่สามารถปรากฏกล่องโต้ตอบปกติได้ ยิ่งไปกว่านั้นการนำเข้าโมดูล CSS นี้ไม่ได้เขียนไว้ในที่เดียวกับการนำเข้าโมดูล JS แต่ในไฟล์ CSS อื่น กล่าวอีกนัยหนึ่งการพึ่งพาเป็นเช่นนี้จริง ๆ :
ในการใช้โมดูลเราจำเป็นต้องดำเนินการนำเข้าในสองไฟล์ทีละไฟล์ นี่เป็นสิ่งที่แปลกและไม่มีเหตุผลมาก! ทำไมเราต้องเป็นโมดูลาร์? มันคือการห่อหุ้มโมดูลซึ่งสามารถใช้หลังจากนำเข้า มันถูกนำไปใช้อย่างไรและการพึ่งพาสิ่งที่ได้รับการจัดการทั้งหมดโดยโมดูลนี้เอง นั่นคือการพึ่งพา Modal.css ในรูปด้านบนควรได้รับการจัดการโดย modal.js เอง
แต่เราได้เขียนโมดูลเช่นนี้สำหรับส่วนหน้าที่เราเขียนมาเป็นเวลาไม่กี่ปีไม่ใช่เพราะมันถูกต้อง แต่เพราะเราคุ้นเคยกับวิธีที่ผิดนี้ ตอนนี้ใช้ Vue เราสามารถห่อหุ้มการพึ่งพาทั้งหมดของโมดูลได้อย่างสมบูรณ์ ไม่ว่าจะเป็นเทมเพลต CSS หรือ JS เราไม่จำเป็นต้องใส่ใจอีกต่อไป เพียงแนะนำโมดูลนี้และสามารถใช้งานได้และการพึ่งพาของโมดูลได้รับการจัดการด้วยตัวเอง
จากนั้นการพึ่งพาของเราจะกลายเป็น:
Modal.vue มีการพึ่งพาที่จำเป็นทั้งหมดดังนั้นเราจึงไม่จำเป็นต้องจัดการกับ CSS ที่เกี่ยวข้องหรือแม้กระทั่งเทมเพลตของตัวเองอีกต่อไป นี่คือผลกระทบที่โมดูลาร์ควรบรรลุ
สร้างโครงการ VUE
Vue จัดเตรียมเครื่องมือ vue-cli เพื่อสร้างเทมเพลตโครงการ: https://github.com/vuejs/vue-cli
ที่นี่ฉันลองโครงการเทมเพลตอื่นครั้งแรก: https://github.com/vuejs-templates/webpack
จากนั้นเราสามารถเขียนโมดูลแทนการใช้ JS บริสุทธิ์ แต่ใช้ WebPack เพื่อเขียนเนื้อหาทั้งหมดที่เกี่ยวข้องกับโมดูลลงในไฟล์ การใช้รายการสิ่งที่ต้องทำก่อนหน้านี้เป็นตัวอย่างในความเป็นจริงบทก่อนหน้านี้พูดถึงการใช้งานขององค์ประกอบเท่านั้นดังนั้นฉันจึงเขียนแบบนั้น ลองเปลี่ยนเป็นวิธีการเขียนที่ดีขึ้นดังนี้:
list.vue:
<เทมเพลต> <ul> <li v-for = 'toDo ในรายการ'> <label v-bind: class = "{ทำ: toDo.done}"> <อินพุตประเภท = "ช่องทำเครื่องหมาย" v-model = "toDo.done"/> {{toDo.title} }}, data () {return {list: []}}, เหตุการณ์: {เพิ่ม (อินพุต) {ถ้า (อินพุต) ส่งคืน false.list.unshift ({title: input, done: false})}}} </script> <style lang = "น้อยกว่า" Padding: 0; .DONE {การกำหนดข้อความ: line-through; }} </style>Form.vue:
<metplate> <h1> {{username}} รายการสิ่งที่ต้องทำ </h1> <ฟอร์ม v-on: submit = "เพิ่ม" v-on: submit.prevent> <อินพุตประเภท = "ข้อความ" v-model = "อินพุต"/> <อินพุตประเภท = "subment" 'ไม่มีชื่อ'}}, data () {return {input: ''}}, วิธีการ: {add () {this. $ dispatch ('เพิ่ม', this.input) this.input = ''}}} </script>todo.vue:
<เทมเพลต> <div id = "toDo"> <toDo-form username = 'lily'> </toDo-form> <toDo-list> </toDo-list> </div> </template> <script> นำเข้าฟอร์มจาก './form.vue'import รายการจาก' ./list.vue'export เพิ่ม (อินพุต) {this. $ broadcast ('เพิ่ม', input)}}} </script> <style> </style>app.vue:
<memplate> <toDo> </toDo> </template> <script> นำเข้า todo จาก './components/todo.vue'export ค่าเริ่มต้น
ด้วยวิธีนี้เราเขียนรายการสิ่งที่ต้องทำก่อนหน้าเป็นโมดูล Modularity เป็นหนึ่งในรากฐานสำหรับการสร้างแอปพลิเคชันขนาดใหญ่ แต่นี่ไม่เพียงพอเรายังต้องทำ:
•การจัดการของรัฐที่ดีที่สุดการจัดการอิสระของรัฐที่แบ่งปันโดยส่วนประกอบที่แตกต่างกัน
•การทดสอบอัตโนมัติ
•การกำหนดเส้นทาง ฯลฯ
ที่นี่เราทำเพียงหนึ่งในนั้นเท่านั้นซึ่งคือการแยกสถานะออกเป็นโมดูลแยกต่างหาก เห็นได้ชัดว่าสำหรับแอปพลิเคชันรายการสิ่งที่ต้องทำโครงสร้างข้อมูลที่บันทึกรายการสิ่งที่ต้องทำคือสถานะที่ใช้ร่วมกันโดยส่วนประกอบที่แตกต่างกัน
ทำไมเราต้องออกอากาศกิจกรรมมาก่อน? เป็นเพราะข้อมูลที่จะดำเนินการระหว่างส่วนประกอบที่แตกต่างกันถูกบันทึกไว้ใน list.vue ดังนั้นเมื่อคุณต้องการเพิ่มชิ้นส่วนของข้อมูลในรูปแบบ Vue คุณต้องแจ้ง list.vue เพื่อเพิ่มผ่านเหตุการณ์
กล่าวอีกนัยหนึ่งข้อมูลนี้ไม่ได้เป็นส่วนตัวโดย list.vue และอย่างน้อยก็ควรเป็นเจ้าของส่วนประกอบทั้งสองนี้ ตอนนี้มันเป็นเจ้าของโดย list.vue, form.vue ไม่สามารถแก้ไขได้และต้องแจ้งให้ทราบผ่านเหตุการณ์
แม้ว่าวิธีการจัดกิจกรรมจะสง่างาม แต่เราสามารถทำได้ดีกว่าจริง ๆ ซึ่งเป็นการแยกข้อมูลเพื่อให้ทั้งแบบฟอร์ม Vue และ list.vue สามารถแก้ไขข้อมูลได้โดยตรงโดยไม่ต้องส่งการแจ้งเตือน
ที่นี่เราเพิ่มไฟล์ store.js:
การส่งออกค่าเริ่มต้น {list: [], add (title) {if (! title) return.list.unshift ({title: title: tale: false})}}}จากนั้นเราสามารถเปลี่ยน list.vue เป็นสิ่งนี้และเฉพาะส่วน JS ของรหัสเท่านั้นที่โพสต์ที่นี่:
นำเข้าร้านค้าจาก '../store.js'export ค่าเริ่มต้น {อุปกรณ์ประกอบฉาก: {initlist: {type: array}}, data () {return store}}}Form.vue ไม่จำเป็นต้องมีการออกอากาศคุณสามารถเพิ่มได้โดยเรียกใช้วิธี store.add โดยตรง:
นำเข้าร้านค้าจาก '../store.js'export Default {props: {username: {type: string, ค่าเริ่มต้น:' unnamed '}}, data () {return {input:' '}}, วิธี: {เพิ่ม () {store.add (this.input) this.input =' 'หลังจากการเปลี่ยนแปลงนี้ตรรกะทั้งหมดจะชัดเจนยิ่งขึ้นและยิ่งแอปพลิเคชันมีความซับซ้อนมากเท่าไหร่คุณก็ยิ่งสามารถแยกร้านค้าสาธารณะได้มากขึ้นมิฉะนั้นจะมีการออกอากาศที่บินไปทั่วท้องฟ้า
นอกจากนี้หลังจากใช้เทมเพลตโครงการนี้แล้วการโหลดร้อนจะเย็นและสดชื่นจะถูกบันทึกไว้
ซอร์สโค้ดด้านบนอยู่ที่นี่: https://github.com/lihongxun945/vue-webpack-todo-list
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น