نحوه ایجاد کد قابل استفاده مجدد در JavaScript با استفاده از مدل های طراحی

اگر هرگز می خواهید کد قابل استفاده مجدد ایجاد کنید یا با تیمی از توسعه دهندگان همکاری کنید ، پس باید بدانید که چگونه از الگوهای مختلف طراحی در زبان استفاده کرده و آنها را شناسایی کنید.

در جاوا اسکریپت ، اصطلاح مدل طراحی به یک روش خاص برای نوشتن کد اشاره دارد و اغلب به عنوان یک الگوی برنامه نویسی در نظر گرفته می شود. جالب است که برچسب “مدل طراحی” را می توان برای هر چیزی اعمال کرد – از یک برنامه کامل به یک کد بلوک ساده.

الگوی طراحی یک موضوع گسترده است ، اما هنگامی که ماژول و روش کارخانه را درک کنید ، باید با آن کنار بیایید.

مدل مدولار

ماژول های JavaScript در سال 2009 با نسخه ES5 زبان برنامه نویسی معرفی شد. با استفاده از ماژول ها ، اکنون توسعه دهندگان می توانند قطعه کد سفارشی ایجاد کرده و آنها را برای استفاده در بخشهای دیگر برنامه JavaScript صادر کنند.

ساختار اصلی الگوی ماژول


(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();

در مثال بالا ، مدلهای مدولار همیشه در اصطلاح بلافاصله بیان می شوند (IIFE). این بدان معنی است که الگوی مدولار به محض تعریف اجرا می شود. توجه به این نکته مهم است که نمودار مدار از دو بخش جداگانه تشکیل شده است.

بخش اول برای اعلام متغیرها و توابع خصوصی استفاده می شود که فقط در محدوده الگوی مدولار قابل دسترسی است.

بخش دوم شامل یک مقدار برگشتی است که متغیرها و توابع عمومی را که ممکن است خارج از محدوده الگوی ماژول قابل دسترسی باشند ، می بندد.

استفاده از الگوی ماژول برای ایجاد برنامه

یک برنامه ساده را به عنوان مدیر وظیفه در نظر بگیرید. با استفاده از الگوی ماژول ، باید برای هر بخش ماژول های سفارشی ایجاد کنید. اینها ممکن است شامل موارد زیر باشد:

  • کنترل کننده کار

  • کنترل کننده رابط کاربر

  • کنترل کننده ذخیره سازی

  • کنترل کننده برنامه

مرتبط: پروژه های برنامه نویسی برای مبتدیان

کنترلر وظیفه برای ایجاد هر کار جدید استفاده خواهد شد. کنترل کننده رابط کاربر برای کنترل عملکردهای مربوط به رابط کاربر مانند گوش دادن به کلیک یک دکمه یا تغییر صفحه نمایش استفاده می شود. کنترل کننده ذخیره سازی برای ذخیره هر کار جدید در یک پایگاه داده استفاده خواهد شد. از ماژول برنامه برای اجرای برنامه استفاده خواهد شد.

برای ایجاد یک UI نمونه از الگوی ماژول استفاده کنید


const UIController = ( function() {
//the private section of the module
let component="Replacement Text";
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();

مثال بالا به وضوح دو بخشی را که در مدل مدولار هستند – خصوصی و عمومی نشان می دهد.

در بخش private تابع ، متغیر کامپوننت و تابع changeComponent خصوصی هستند. بنابراین ، اگر می خواهید کل متن h1 را در یک صفحه وب تغییر دهید ، اگر مجبور باشید کد زیر را بنویسید با خطا مواجه خواهید شد.

روش نادرستی برای فراخوانی تغییر مثال مثال است


UIController.changeComponent();

پیام خطا به صراحت بیان می کند که changeComponent () تابعی از عملکرد UIController نیست. این زیبایی الگوی مدولار است. متغیرها و توابع ایجاد شده در بخش خصوصی هرگز به طور مستقیم خارج از محدوده این تابع قابل دسترسی نخواهند بود.

متغیرهای خصوصی اگرچه مستقیماً قابل دسترسی نیستند ، اما به طور غیر مستقیم (از بخش عمومی) می توان به آنها دسترسی داشت. نتیجه گیری از مثال فوق در مورد رابط کاربری این است که بخش عمومی در مدل مدولار همیشه با ویژگی بازگشت علامت گذاری می شود.

از طریق پارامترهای ویژگی بازگشت ، اکنون می توانیم به عملکرد غیرمستقیم دسترسی غیرمستقیم داشته باشیم. اکنون می توانیم از خط کد زیر (با مدل بالا) برای تغییر موثر کل متن h1 صفحه فرود به “متن جایگزین” استفاده کنیم.

روش صحیح فراخوانی مثال مثال مثالی


UIController.callChangeComponent();

مدل کارخانه

مدل کارخانه (که به آن روش کارخانه نیز می گویند) یکی دیگر از مدل های محبوب جاوا اسکریپت است. مدل مدولار در صورت نیاز به کپسوله سازی داده ها روشن می شود و مدل کارخانه هنگام کار با مجموعه ای از اشیا different مختلف که از برخی جهات شبیه به یکدیگر هستند ، بیشترین کاربرد را دارد.

بازگشت به مدیر وظیفه ما در بالا ؛ اگر لازم باشد به کاربر اجازه دهیم برای هر کار ایجاد شده یک نوع اختصاص دهد ، می توانیم با استفاده از مدل کارخانه این جنبه از برنامه را ایجاد کنیم

استفاده از مدل کارخانه برای اختصاص دادن یک مثال به نوع کار


//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}

کد بالا از روش کارخانه برای ایجاد کارهای جدید ، نوع تایپ (فوری یا پیش پا افتاده) و اختصاص ویژگی مناسب قبل از چاپ کار جدید به کنسول استفاده می کند.

تابع createTask داخلی صحنه ای برای ایجاد چندین وظیفه به طور هم زمان تنظیم می کند ، اما قبل از اینکه بخواهیم وظایف جدیدی ایجاد کنیم ، کد اضافی وجود دارد که باید در این بخش از پروژه قرار دهیم.

در کد بالا ، در صورت تحقق یک شرط خاص ، یک UrgentTask یا یک Trivialtask جدید ایجاد می کنیم. با این وجود ، هیچ عملکرد یا کلاسی با این نام ها در پروژه ما وجود ندارد – با وارد کردن کد زیر در پروژه ما به راحتی می توان این مشکل را حل کرد.

کارهای فوری و پیش پا افتاده ایجاد کنید


//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = "as soon as possible"
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = "when you can"
}

با توجه به کد بالا ، اکنون می توانیم ویژگی UrgentTask یا TrivialTask ​​را به هر کار جدیدی که ایجاد می شود اختصاص دهیم. گام بعدی ایجاد یک کار جدید است ، اما قبل از آن باید یک پایگاه داده ایجاد کنیم که هر کار جدید را هنگام ایجاد ذخیره کند.

با توجه به اینکه ایجاد یک پایگاه داده به خودی خود یک مقاله کامل است ، ما یک ساختار داده (آرایه) را جایگزین یک پایگاه داده خواهیم کرد.

یک آرایه مثال ایجاد کنید


//create an array to host the different task
const task = [];

اکنون سرانجام می توانیم یک کار جدید ایجاد کنیم.

نمونه ایجاد وظایف جدید


//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));

با کد بالا ، اکنون می توانید با استفاده از ویژگی TaskFactory که در ابتدا ایجاد کردیم ، دو کار جدید ایجاد کنید. هنگامی که ما هر کار جدید را ایجاد می کنیم ، خصوصیات (نام و نوع) به تابع createTask منتقل می شود که در عملکرد TaskFactory واقع شده است و ما با مدل کارخانه ایجاد کرده ایم.

هنگامی که هر وظیفه از طریق TaskFactory راه خود را باز کرد و خاصیت نوع مناسب را به آن اختصاص داد. سپس به آرایه وظایفی که قبلاً ایجاد کرده ایم هدایت می شود.

اکنون تنها معضل ما این است که از کجا بدانیم که این دو کار ایجاد شده اند یا مدل کارخانه ما کار می کند؟ اگر از یک پایگاه داده استفاده کرده بودیم ، می توانیم فقط پایگاه داده را بررسی کنیم تا ببینیم آیا دو کار جدید ایجاد شده است.

به “استفاده از مدل کارخانه برای اختصاص دادن مثال به نوع کار” در بالا ، درست در زیر نظر “برای چاپ کار و نوع آن در کنسول” استفاده می شود ، یک تابع “task.define” کوچک وجود دارد که برای با استفاده از روش آرایه زیر ، هر کار را در آرایه کنسول چاپ کنید.


//print each task to the console
task.forEach(function(task){
task.define();
});

باید ببینید خروجی زیر در کنسول شما ظاهر می شود.


Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can

اکنون می توانید از الگوهای طراحی در پروژه های JavaScript خود استفاده کنید

در این مرحله ، شما باید مدل های طراحی را در JavaScript درک کنید و درک کنید که چگونه می توان از مدل های طراحی برای ایجاد کد قابل استفاده مجدد و سهولت زندگی برای توسعه دهندگان درگیر در یک پروژه استفاده کرد.

اکنون که می دانید دو الگوی محبوب طراحی جاوا اسکریپت چگونه کار می کنند ، باید بتوانید آنها را به طور م applyثر برای توسعه یک برنامه اعمال کنید.

اعتبار تصویر: Alltechbuzz / Pixabay


statement-variables-javascript
نحوه اعلام متغیرها در JavaScript

برای شروع کار با JavaScript ، باید متغیرها را درک کنید. در اینجا سه ​​روش برای اعلام متغیرها در JavaScript وجود دارد.

بعدی را بخوانید


درباره نویسنده

.

دیدگاهتان را بنویسید