كيفية تقسيم البرنامج المساعد jQuery على ملفات متعددة

Question

أنا أكتب CMS صغيرًا باعتباره مكونًا إضافيًا لـ jQuery AJAX وعلى الرغم من أنه ليس طويلًا بأي حال من الأحوال (حاليًا حوالي 500 سطر) أستطيع أن أرى أنه سيكون من الجيد أن أكون قادرًا على تقسيمه إلى ملفات منفصلة، ​​واحد لكل "فئة فرعية":

(function($) {
    $.fn.myCMS = function() {
        this.classOne = function() {
        ...
        }
        this.classTwo = function() {
        ...
        }
    }
})(jQuery);

في المثال أعلاه، أود أن أضع الكود الخاص بـ classOne في ملف واحد، وclassTwo في ملف آخر، وmyCMS "baseclass" في ملف ثالث.هل من الممكن تحقيق ذلك بشيء كهذا (في كل ملف من ملفات "الفئة الفرعية")؟

$.extend(myCMS,classOne = function() {
...
})

تشكرات،

شبيبة

Answer 1

تريد الإضافة إلى "المكون الإضافي" بنطاق خاص/فصل بين الاهتمامات.يمكن أن يكون هذا مهمًا للصيانة والتوسعة على المدى الطويل لتطبيق الويب المعتمد على المكونات الإضافية، بغض النظر عما إذا كان كل شيء سيتم دمجه في ملف واحد أو ملفات متعددة.

يمكنك إنشاء نطاق خاص وتوسيع أسلوب jQuery.fn موجود عن طريق إرفاق الأساليب مباشرة أو عن طريق الإضافة إلى النموذج الأولي للأسلوب jQuery.fn.foo

(function ($) {

     // instance method attached to the constructor function
     $.fn.myCMS.classOne = function () {

     };

     // or "shared" method attached to prototype
     $.fn.myCMS.prototype.classOne = function() {

     };

})(jQuery);

يمكنك استخدام jQuery.extend()، والذي في هذه الحالة هو في الواقع "اختصار" لإضافة أسلوب إلى مثيل المنشئ كالطريقة الأولى أعلاه.يجب عليك تغليف كل ما تضيفه إلى كائن (عادةً ما يكون هذا كائنًا مجهولاً):

$.extend($.fn.myCMS,{ classOne: function () { } });

من منظور التصميم، إذا كان لديك "فئات" تحتاج إلى الحصول على نفس المتغيرات المغلقة بشكل متكرر، فمن المحتمل أن تكون جزءًا من نفس نطاق/إغلاق الوظيفة، أو يجب عليك كشف الحروف والمحددات لتلك المتغيرات المغلقة (ربما باستخدام اتفاقية _foo يوضح أنها مخصصة للاستخدام بواسطة الكود الخاص بك فقط).

(function ($) {

    var foo = "foo!";

    // combined getter/setter
    // could also check arguments.length
    $.fn.myCMS._foo = function (value) {
          if (typeof(value) != "undefined") {
               foo = value;
          } else {
               return foo;
          }
    };

)(jQuery);

إذا كنت تريد أن تصبح متسللًا وتحتاج إلى الوصول إلى المتغيرات المغلقة من نطاق مختلف، فأعتقد أنه يمكنك القيام بذلك عن طريق تنفيذ هذه الأساليب الجديدة بنطاقها الخاص باستخدام .call() أو .apply() من النطاق الآخر.يمكنني أن أحاول جمع بعض العينات لكيفية عمل ذلك، ولكن ستكون فكرة جيدة إذا قمت بإجراء بحث خاص بك حول كيفية عمل حل النطاق في هذه الأنواع من السيناريوهات.

أعتقد أنه يمكنك "استعارة" النطاق من طريقة "المكون الإضافي" الأصلية باستخدام إنشاء $.fn.myCMS) { } لكنني لست متأكدًا بنسبة 100% بشأن ذلك لأنني لم أفعل ذلك بنفسي، فقط اقرأ حوله.

Answer 2

سيساعدك أيضًا إلقاء نظرة على كود jQuery ui.على سبيل المثال، يتطلب المكون الإضافي لشريط التقدم ثلاثة ملفات ui.core وui.widget وui.progressbar.قم بتنزيل حزمة مصدر jQuery UI وانظر إلى مثال شريط التقدم ضمن دليل العروض التوضيحية.(لم أتمكن من العثور على الإصدار المبسط المستضاف في أي مكان، ولكن الحزمة المصدر تحتوي على أمثلة مبسطة)