تنظيم جافا سكريبت القائم على النموذج الأولي مع الحفاظ على مرجع الكائن والميراث

المعضلة: إعادة تنظيم التعليمات البرمجية لتعزيز البنية

يعد وراثة النموذج الأولي نموذجًا قويًا لجافا سكريبت، لكن إدارة التطبيقات الكبيرة قد تكون صعبة. خذ بعين الاعتبار فئة دائري مع العديد من الوظائف:

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

قد تتضمن إعادة البناء من أجل تنظيم أفضل للتعليمات البرمجية تجميع الوظائف في كائنات فرعية:

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}

ومع ذلك، يؤدي هذا التغيير إلى مشكلة: الكلمة الأساسية "هذا" الموجودة في هذه الوظائف لم تعد تشير إلى مثيل الرف الدائري.

التغلب على مشكلة "هذا"

المحافظة يعد سياق "هذا" أمرًا بالغ الأهمية، خاصة في السيناريوهات التي ترث فيها الفئات من الفئات الأصل. يجب أن تحافظ الوظائف المتجاوزة في الفئات الموروثة على سلوك "هذا" الصحيح.

تغليف الكائنات الفرعية

أحد الأساليب هو تعريف عناصر التحكم كفئة منفصلة وتخزين مرجع إلى مثيل الرف الدائري:

var Controls = function (controllable_object) { this.ref = controlable_object; }; Controls.prototype.next = الوظيفة () { this.ref.foo(); } // ..

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

حقن التبعية

يتضمن النهج الأكثر مرونة حقن التبعية :

var Controls = function (controllable_object) { this.ref = controlable_object; }; Controls.prototype.next = الوظيفة () { this.ref.foo(); } // .. فار كاروسيل = الوظيفة () { this.controllers = []; }; Carousel.prototype.addController = الوظيفة (وحدة التحكم) { this.controllers.push(controller); }; // ..

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
        this.controllers = [];
    };
Carousel.prototype.addController = function (controller) {
        this.controllers.push(controller);
    };
// ..