كيفية تنظيم ملفات JS في مشروع AppCelerator Titanium

Question

لقد بدأت مؤخرًا في إنشاء تطبيق iPhone باستخدام Titanium AppCelerator. نظرًا لأن التطبيق هو في الأساس JS ، فقد كنت بحاجة إلى بعض النصائح حول كيفية تنظيم هذا المشروع.

أصبح من السهل جدًا إنشاء ملفات إجرائية طويلة لكل طريقة عرض في التطبيق. هل هناك طريقة يمكنني من خلالها دمج MVC ، أو بنية للمشروع؟

شكرا ، أنا أقدر ذلك. -tilo

Answer 1

Titanium نفسه هو MVC بشكل أساسي بالنظر إلى أن ملف app.js الخاص بك هو وحدة التحكم الرئيسية وكل طريقة عرض تنشئها هي العرض وتمرير بيانات النموذج (أو تعيين) مقابل العرض.

في التيتانيوم ، يمكنك تحلل تطبيقك باستخدام بضع آليات مدمجة لطيفة:

1. Titanium.include - Titanium.include يتيح لك تضمين ملف JS واحد أو أكثر في مكانه مثل C #include التوجيه المترجم. يمكنك وضع وظائف مشتركة وفئات JS في هذا الملف ثم تضمينها في أي مكان تريد استيراده ومتاحته.

2. Titanium.ui.createwindow - يمكنك إنشاء طريقة عرض جديدة كخاصية لتمريرة النافذة الجديدة في عنوان URL إلى سياق JS آخر من شأنه أن ينشئ سياقًا فرعيًا جديدًا JS ويسمح لك بالحفاظ على مساحة متغيرة خاصة به (ولكن لا يزال يمنحك الوصول إلىك الأبوين).

أيضًا ، في التيتانيوم ، يمكنك إنشاء مجلدات تتيح لك تنظيم تطبيقك منطقيًا بطريقة مناسبة لك وتطبيقك.

تعديل: اليوم ، يتم إهمال طريقة التيتانيوم. كما هو مذكور في الوثائق ، يجب علينا إنشاء وحدة CommonJS واستخدام require() بيان.

مزيد من المعلومات حول هذا البيان: تطلب

مزيد من المعلومات حول الوحدات النمطية: الوحدات النمطية

Answer 2

نظرًا لأنني لم أجد حل MVC مناسبًا لمشروع Titanium Mobile ، فقد توصلت إلى النهج التالي. بالنسبة للتطبيقات الصغيرة ، قد يتم تصميم هذا بشكل مفرط ولكن قد يساعد في الحفاظ على التطبيقات المتنامية.

هيكل المجلد:

/Resources
  /model
  /view
  /controller
  /ui
  /iphone
  /android
  app.js
  app.jss

لفصل المشاهدات والنماذج ووحدات التحكم ، هناك حاجة إلى مساحة اسم ، لذلك نحددها في App.js ، وهي وحدة التحكم الرئيسية لدينا:

var app = {
  view: {},
  controller: {},
  model: {},
  ui: {}
}

ضمن المجلدات ، نضع ملفات JavaScript واحدة لكل مكون. لهذا يمكننا إما استخدام مكتبة JavaScript OOP خفيفة الوزن ، مثل Mootools أو النموذج الأولي أو تحديد وظائف JS البسيطة ككائنات لدينا. إذا كنت تريد أيضًا أن ترث من فصول الوالدين ، فمن المنطقي بالتأكيد.

أمثلة:

# Resources/controller/MyController.js
app.controller.MyController = function() {
   return {
      getView: function() {
         return new app.view.MyView().getView();
      }
   }
}

# Resources/view/MyView.js
app.view.MyView = function() {
   return {
      getView: function() {
         return Ti.UI.createWindow({...});
      }
   }
}

# Resources/view/MyModel.js
app.model.MyModel = function() {
   return {
      some: "data",
      foo: "bar"
   }
}

بعد ذلك يمكننا تضمين جميع فئات الطراز/العرض/وحدة التحكم المطلوبة مع ti.include () في ملف app.js والرجوع إلى المكونات مع مساحة اسمنا:

Ti.include("controller/MyController.js");
Ti.include("view/MyView.js");
var myController = new app.controller.MyController();
var myView = myController.getView();
myView.open();

سوف يفترض نهج MVC الآن أن وحدة التحكم "تتحكم" في حالة العرض وتنقل البيانات من النموذج إلى العرض. يتكون العرض فقط من عناصر وخصائص واجهة المستخدم للتصميم. أي إجراء يتم إجراؤه في واجهة المستخدم يطلق حدثًا ، والذي يخبر وحدة التحكم بأداء الإجراء المطلوب.

لكن بالطبع ، قد يكون التعريف الدقيق لـ MVC مختلفًا وفقًا لذوقك الشخصي ؛)

Answer 3

قد يساعد هذا أيضًا: بنية أساسية لكيفية تنظيم مشروع متنقلة من التيتانيوم: https://github.com/krawaller/struct

Answer 4

اسمح لي بتحديث هذا السؤال لأن معظم الإجابات قد تم استبدالها. في Q4 2012 ، أصدرت AppCelerator إطار عمل السبائك MVC (BETA) إلى جانب أحدث إصدار من IDE و SDK ، Titanium Studio 3.0 و SDK 3.0. تم دمج Alloy تمامًا مع Studio ، لذلك من السهل جدًا الحصول على تطبيق أساسي يعمل في أقل من 15 دقيقة. يقدم سبيكة إعادة هيكلة مجلد مهمة: /برنامج المجلد هو الآن حيث يوجد كل رمز التطوير.

ال /موارد المجلد ، حيث الكود المستخدم للإقامة ، هو الآن ما يعادل تحديث /يبني مجلد. رمز المترجم في /موارد يكتب فوق كل بناء.

لقد قمت بإنشاء تمهيدي تمهيدي قصير (screencast) على إنشاء مشروع سبيكة. يمكنك عرضه عبر مجلد Dropbox الخاص بي.

إنشاء مشروع سبيكة

Answer 5

يبدو أن appcelerator صنعت خاصة بهم appcelerator MVC في السوق لم أقم بتقييم هذا بعد.

مزيد من المعلومات: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/