مشاركة مثال على نموذج Singleton في JavaScript

نموذج Singleton التقليدي

تأكد من أن الفئة تحتوي على مثيل واحد فقط، وتقدم نقطة الوصول العامة إليها.

فكرة نواة نموذج Singleton

ليس سوى استخدام متغير لتحديد ما إذا تم إنشاء عنصر للفئة في وقت سابق، وإذا كان ذلك صحيحًا، فإنه يرجع إلى العنصر الذي تم إنشاؤه مسبقًا عند الحصول على مثيل للفئة التالية، دعونا نحاول تحقيق هذه الفكرة باستخدام JavaScript، يرجى الرؤية في الكود التالي:

var Singleton = function(name) {
  this.name = name;
};
Singleton.prototype.getName = function() {　　 alert(this.name);
};
Singleton.getInstance = (function() { 　　var instance = null;
　　return function(name) {
　　　　　　　　　　if (!instance) {
　　　　　　　　　　　　instance = new Singleton(name);
　　　　　　　　　　};
　　　　　　　　return instance;　　　　　　 }
})();

نحن نستخدم Singleton.getInstance للحصول على عنصر الفئة Singleton الفريد، وهذا بالتأكيد ليس هناك أي مشكلة، ولكن JavaScript نفسه ليس لديه مفهوم الفئات، لذا فإن محاولة تحقيق هذا التفكير التقليدي بالقوة لا تعني أي شيء، وكذلك فإن هذا الكود يبدو سيئًا جدًا ومدمرًا (في الواقع، لا أستطيع تحمل رؤيته أبدًا، يلعب). دعونا نستخدم ميزة closure في JavaScript لتحقيق نموذج Singleton، يرجى الرؤية في الكود التالي:

var CreateDiv = (function() { 　　　　　　var instance;
　　　　　　var CreateDiv = function(html) { 　　　　　　　　　　if (instance) {
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function() {
var div = document.createElement('div');
div.innerHTML = this.html; 
document.body.appendChild( div );
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv( 'sven1' ); var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true

يمكن رؤية الآن أننا قد استخدمنا الكلاج (closure) لتحقيق نموذج واحد، ولكن هذا الكود مازال مرتبطًا بشكل كبير، دالة بناء CreateDiv مسؤولة في الواقع عن شئين. الأول هو إنشاء الكائن وتنفيذ دالة التأهيل init، والثاني هو ضمان وجود كائن واحد فقط. هذا الكود غير واضح في الوظيفة، نريد الآن تقسيم هذين العملين، يتولى بناء الكائن بناء الكائن، أما الحكم على ما إذا كان يجب العودة إلى الكائن الحالي أم بناء كائن جديد وإرجاعه، فيتم ذلك بواسطة دالة أخرى، في الواقع هذا هو هدف من فكرة البرمجة: مبدأ المسؤولية الواحدة. هذا الكود يمكن أن يكون أكثر توزيعًا، انظر إلى الكود التالي:

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      };
      return instance;
    };
  })();
  var a = new ProxySingletonCreateDiv('sven1');
  var b = new ProxySingletonCreateDiv('sven2');
  alert(a === b); //true

يمكن رؤية الآن أن دالة بناء CreateDiv مسؤولة فقط عن بناء الكائن، سواء كان يجب العودة إلى الكائن الحالي أم بناء كائن جديد وإرجاعه، هذا العمل يتم بواسطة كائن الوسيط proxySingletonCreateDiv لمعالجته، يبدو هذا الكود مرتبًا ومريحًا؟

في النهاية، قدمت لك كودًا عاليًا الاستخراج لنموذج Singleton، روح惰ive Singleton!

//استخراج نموذج Singleton، فصل وظيفة إنشاء العنصر عن تحديد ما إذا كان العنصر موجودًا
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

المؤشر fn هو مكوننا البنيوي، يمكننا إنشاء惰ive Singleton جديد بسهولة بمرور أي مكون بنائي نحتاجه. على سبيل المثال، يمكننا مرور مكون بنائي لإنشاء حبيبة، ثم إجراء استدعاء getSingle()، مما يتيح إنشاء حبيبة جديدة. إذا تم استدعاء getSingle() مرة أخرى، فإنه سيقوم بتقديم الحبيبة التي تم إنشاؤها مؤخرًا فقط. بالنسبة للحبيبة الجديدة - لا وجود لها.

سيناريوهات استخدام Singleton

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

هذا هو ما شاركناه معكم حول نتائج التعلم الخاصة بتحقيق نموذج Singleton في JavaScript، شكرًا لدعمكم لتعليمات الصراخ.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، وله حقوق الملكية لأصحاب الملكية، تم جمع المحتوى من قبل المستخدمين على الإنترنت بطرقهم الخاصة، ويحمل هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفت أن هناك محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على ذلك، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه في حقوق النسخ على الفور.