أنماط تصميم جافا سكريبت

هذه المقالة عبارة عن ملخص لأنماط التصميم المتنوعة في JavaScript والتي تساعدنا في إنشاء تعليمات برمجية نظيفة وسهلة الصيانة دون تلويث مساحة الاسم العالمية.

نمط التصميم الحرفي للكائن

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

var com = com || {};
com.digitalinspiration = com.digitalinspiration || {};
com.digitalinspiration.person = {
  _name: 'Amit Agarwal',
  _country: '',
  setCountry: function (country) {
    this._country = country;
  },
  printCountry: function () {
    console.log(this._name + ' lives in ' + this._country);
  },
};
com.digitalinspiration.person.setCountry('India');
com.digitalinspiration.person.printCountry();

نمط تصميم الوحدة

يساعد هذا النمط في إنشاء متغيرات خاصة في JavaScript لا يمكن الوصول إليها من النطاق العام حيث يتم تغليف كل شيء داخل IIFE. نقوم بإنشاء وحدة تقوم بإرجاع كائن يحتوي على جميع الوظائف العامة. لا يمكن الوصول إلى المتغير خارج الوحدة النمطية.

var personModule = (function () {
  // private variables and methods
  var _name = 'Amit Agarwal';
  var _country = '';
  var print = function () {
    console.log(_name + ' lives in ' + _country);
  };
  return {
    setCountry: function (country) {
      _country = country;
    },
    printCountry: function () {
      console.log('Calling private method to print ' + _country);
      print();
    },
  };
})();

personModule.setCountry('India');
personModule.printCountry();

نموذج الكشف عن النمط

يُسهّل نمط تصميم Reveal Module على الأساليب والخصائص الخاصة التواصل مع الأساليب العامة. يتم إخفاء جميع الأساليب والمتغيرات ما لم يتم كشفها عمدًا داخل الكائن المرتجع.

var personModule = (function () {
  var _name = 'Amit Agarwal';
  var _interests = [];
  function _printInterests() {
    console.log(_name + ' likes ' + _interests.join(', '));
  }
  function addInterest(interest) {
    _interests.push(interest);
  }
  function printInterests() {
    console.log('Calling private method');
    _printInterests();
  }
  return {
    printInterests: printInterests,
    addInterest: addInterest,
  };
})();

personModule.addInterest('Travel');
personModule.addInterest('Reading');
personModule.printInterests();

تجنب النطاق العالمي

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

(function (win) {
  var personModule = (function () {
    var _name = 'Amit Agarwal';
    function printName() {
      console.log(_name);
    }
    return {
      printName: printName,
    };
  })();
  if (!win.personModule) {
    win.personModule = personModule;
  } else {
    throw new Error('Cannot initialize application');
  }
})(window);

window.personModule.printName();