Sencha Touch - การพึ่งพา
มีบางวิธีที่กำหนดไว้ใน Sencha Touch เพื่อประกาศการอ้างอิงหนึ่งในแอปพลิเคชันและอีกวิธีหนึ่งในคลาส
มาดูวิธีต่างๆในการกำหนดการอ้างอิงกัน
การพึ่งพาระดับแอปพลิเคชัน
ที่นี่เราประกาศการอ้างอิงทั้งหมดเมื่อเราสร้าง Ext.application
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});
ตอนนี้เมื่อแอปพลิเคชันโหลดขึ้นการอ้างอิงทั้งหมดจะถูกโหลดพร้อมกัน เส้นทางของไฟล์อื่น ๆ จะเป็น -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore เป็นต้น
วิธีการประกาศข้างต้นไม่เพียง แต่โหลดไฟล์เท่านั้น แต่ยังตัดสินว่าโปรไฟล์ใดควรใช้งานได้อีกด้วย หลังจากโหลดคอนโทรลเลอร์แล้วตรวจสอบให้แน่ใจว่าได้สร้างอินสแตนซ์แล้ว เมื่อโหลดร้านค้าแล้วมันจะสร้างอินสแตนซ์ของพวกเขาและระบุหนึ่ง ID หากยังไม่ได้รับ
การพึ่งพาเฉพาะโปรไฟล์
เมื่อเราใช้โปรไฟล์ในแอปพลิเคชันอาจมีความเป็นไปได้ที่ฟังก์ชันบางอย่างจำเป็นสำหรับบางโปรไฟล์เท่านั้น
การอ้างอิงเฉพาะโปรไฟล์ถูกประกาศในโปรไฟล์เองแทนที่จะเป็นการประกาศระดับแอปพลิเคชัน
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});
การอ้างอิงจะถูกโหลดโดยไม่คำนึงถึงโปรไฟล์ที่ใช้งานอยู่หรือไม่ อย่างไรก็ตามขึ้นอยู่กับโปรไฟล์ที่ใช้งานอยู่การประมวลผลเพิ่มเติมเช่นการสร้างอินสแตนซ์คอนโทรลเลอร์และร้านค้าเกิดขึ้น
การอ้างอิงที่ซ้อนกัน
เมื่อเรามีแอปพลิเคชั่นที่ใหญ่ขึ้นเรามีตัวควบคุมโมเดลมุมมองและร้านค้าหลายตัว
การรักษาความเป็นโมดูลาร์ไว้ในแอปพลิเคชันขนาดใหญ่เป็นเรื่องดี ด้วยเหตุนี้เราสามารถกำหนดโฟลเดอร์ย่อยและในขณะที่ประกาศการอ้างอิงเราสามารถใช้ชื่อโฟลเดอร์ย่อยเพื่อประกาศได้
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});
ในกรณีข้างต้นไฟล์ต่อไปนี้จะถูกโหลด -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
การพึ่งพาภายนอก
เราสามารถระบุการอ้างอิงภายนอกแอปพลิเคชันโดยตั้งชื่อคลาสที่มีคุณสมบัติครบถ้วนเป็น -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});
ในกรณีข้างต้นไฟล์ต่อไปนี้จะถูกโหลด -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js