Ext.js - สถาปัตยกรรม

Ext JS ตามสถาปัตยกรรม MVC / MVVM

MVC - สถาปัตยกรรม Model View Controller (เวอร์ชัน 4)

MVVM - Model View Viewmodel (รุ่น 5)

สถาปัตยกรรมนี้ไม่บังคับสำหรับโปรแกรมอย่างไรก็ตามเป็นแนวทางปฏิบัติที่ดีที่สุดในการปฏิบัติตามโครงสร้างนี้เพื่อให้โค้ดของคุณสามารถบำรุงรักษาและจัดระเบียบได้ดี

โครงสร้างโครงการด้วยแอป Ext JS

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

โฟลเดอร์แอป Ext JS จะอยู่ในโฟลเดอร์ JavaScript ของโปรเจ็กต์ของคุณ

แอพนี้จะมีไฟล์คอนโทรลเลอร์ดูโมเดลจัดเก็บและยูทิลิตี้พร้อม app.js

app.js- ไฟล์หลักที่โฟลว์ของโปรแกรมจะเริ่มต้นซึ่งควรรวมอยู่ในไฟล์ HTML หลักโดยใช้แท็ก <script> แอปเรียกตัวควบคุมแอปพลิเคชันสำหรับฟังก์ชันที่เหลือ

Controller.js- เป็นไฟล์คอนโทรลเลอร์ของสถาปัตยกรรม Ext JS MVC ซึ่งประกอบด้วยการควบคุมทั้งหมดของแอปพลิเคชันตัวรับฟังเหตุการณ์และฟังก์ชันส่วนใหญ่ของโค้ด มีเส้นทางที่กำหนดไว้สำหรับไฟล์อื่น ๆ ทั้งหมดที่ใช้ในแอปพลิเคชันนั้นเช่น store, view, model, require, mixins

View.js- มีส่วนต่อประสานของแอปพลิเคชันซึ่งแสดงให้ผู้ใช้เห็น Ext JS ใช้มุมมองที่หลากหลายของ UI ซึ่งสามารถขยายและปรับแต่งได้ที่นี่ตามความต้องการ

Store.js- มีข้อมูลที่แคชไว้ในเครื่องซึ่งจะแสดงผลบนมุมมองด้วยความช่วยเหลือของโมเดลออบเจ็กต์ จัดเก็บดึงข้อมูลโดยใช้พร็อกซีซึ่งมีเส้นทางที่กำหนดไว้สำหรับบริการเพื่อดึงข้อมูลแบ็กเอนด์

Model.js- มีวัตถุที่ผูกข้อมูลร้านค้าเพื่อดู มีการแมปของวัตถุข้อมูลแบ็กเอนด์กับมุมมอง dataIndex ข้อมูลถูกดึงด้วยความช่วยเหลือของร้านค้า

Utils.js- ไม่รวมอยู่ในสถาปัตยกรรม MVC แต่เป็นแนวทางปฏิบัติที่ดีที่สุดในการทำให้โค้ดสะอาดซับซ้อนน้อยลงและอ่านง่ายขึ้น เราสามารถเขียนเมธอดในไฟล์นี้และเรียกใช้ในคอนโทรลเลอร์หรือตัวแสดงมุมมองได้ทุกที่ที่ต้องการ เป็นประโยชน์สำหรับวัตถุประสงค์ในการใช้ซ้ำรหัสเช่นกัน

ในสถาปัตยกรรม MVVM คอนโทรลเลอร์จะถูกแทนที่ด้วย ViewModel

ViewModel- โดยทั่วไปจะเป็นสื่อกลางการเปลี่ยนแปลงระหว่างมุมมองและโมเดล จะผูกข้อมูลจากโมเดลเข้ากับมุมมอง ในขณะเดียวกันก็ไม่ได้มีปฏิสัมพันธ์โดยตรงกับมุมมอง มันมีความรู้แค่รุ่น

มันทำงานอย่างไร

ตัวอย่างเช่นหากเราใช้วัตถุโมเดลหนึ่งที่สองสามตำแหน่งใน UI หากเราเปลี่ยนค่าที่ UI ที่เดียวเราจะเห็นได้โดยไม่ต้องบันทึกการเปลี่ยนแปลงนั้นด้วยซ้ำ ค่าของโมเดลจะเปลี่ยนไปและจะแสดงในตำแหน่งทั้งหมดใน UI ไม่ว่าจะใช้โมเดลใดก็ตาม

ทำให้ความพยายามของนักพัฒนาน้อยลงและง่ายขึ้นมากเนื่องจากไม่จำเป็นต้องมีการเข้ารหัสเพิ่มเติมสำหรับการผูกข้อมูล