Sencha Touch - สถาปัตยกรรม

ชั้นล่างสุดสำหรับแอปพลิเคชันมือถือคือระบบปฏิบัติการเหนือสิ่งอื่นใดหรือทุกอย่างถูกสร้างขึ้น จากนั้นเรามีเบราว์เซอร์ที่เราจะใช้งานแอพพลิเคชั่น อาจเป็น Chrome, Safari, IE อะไรก็ได้ ชั้นบนเป็นมาตรฐาน W3 ซึ่งเป็นเรื่องธรรมดาสำหรับทุกคน Sencha Touch ยืนหรือสร้างขึ้นจากมาตรฐาน W3 ซึ่งไม่มีอะไรนอกจาก HTML5 ซึ่งทำให้แอปพลิเคชั่นเดียวเข้ากันได้กับเบราว์เซอร์ที่แตกต่างกันของอุปกรณ์ต่างๆ

Sencha Touch เป็นการรวมกันของสามเฟรมเวิร์ค - ExtJs, JqTouch และ Raphael (การวาดภาพเวกเตอร์) เป็นไปตามสถาปัตยกรรม MVC MVC แยกโค้ดออกเป็นส่วนที่จัดการได้มากขึ้น

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

โครงสร้างโครงการด้วย Sencha Touch App

----------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

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

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

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

Controller.js- เป็นไฟล์คอนโทรลเลอร์ของสถาปัตยกรรม Sencha Touch MVC สิ่งนี้ประกอบด้วยการควบคุมทั้งหมดของแอปพลิเคชันตัวรับฟังเหตุการณ์และฟังก์ชันส่วนใหญ่ของโค้ด ดำเนินงานต่อไปนี้: การกำหนดเส้นทางคั่นกลางระหว่างมุมมองและโมเดลและดำเนินการเหตุการณ์

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

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

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

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