Ինչպես են աշխատում MVC նախագծման փաթերները

Վերջին քսան տարիների ընթացքում կայքերը պարզ CSS-ով ձևավորված էջերից վերածվել են շատ ավելի բարդ և հզոր հավելվածների:

Այս հավելվածների զարգացումը պարզեցնելու համար ծրագրավորողները օգտագործում են տարբեր շաբլոններ(ձևանմուշ) և ծրագրավորման ճարտարապետություններ, որոնք պարզեցնում են իրենց կոդը:

Բայց նախ և առաջ, եկեք հասկանանք.

Ի՞նչ է ծրագրային ապահովման ճարտարապետությունը

Ծրագրային ապահովման(ԾԱ) ճարտարապետությունը, կամ արխիտեկտուրան, ծրագրի նկարագրության համակարգային մոտեցումն է: Սա վերաբերվում է նաև ԾԱ-ի փոխազդեցությանն այլ ծրագրերի հետ, ասել է թե նկարագրելով ծրագրերի՝ միմյանց հետ փոխգործակցությունն ու փոխազդեցությունը միմյանց վրա:

Ծրագրային ապահովման արխիտեկտուրան ներառում է նաև այլ գործոններ, ինչպիսիք են բիզնեսի ռազմավարությունը, որակի հատկանիշները, մարդկային ռեսուրսների դինամիկան, դիզայնը և ՏՏ միջավայրը:

Կարճ ասած՝ արխիտեկտուրան ծառայում է որպես համակարգի նկարագրության գծագիր:

Model-View-Controller արխիտեկտուրա

Ծրագրային ապահովման ժամանակակից ամենահայտնի արխիտեկտուրան “Մոդել-Տեսք-Կոնտրոլլեր” մոտեցումն է, Model-View-Controller կամ կրճատ՝ MVC:

MVC-ն ցանկացած հավելված բաժանում է երեք բաղկացուցիչ մասի.

• Մոդել (Model)
• Տեսք կամ ցուցադրում (View)
• Կոնտրոլլեր (Controller)

Այս բաղադրիչներից յուրաքանչյուրը նախատեսված է ծրագրի որոշակի ասպեկտը մշակելու համար և ծառայում է են բոլորովին տարբեր նպատակների:

Մոդել

Մոդելը պարունակում է տվյալների ողջ տրամաբանությունը, որով աշխատում է օգտատերը. պրոյեկտի սխեմաներ և ինտերֆեյսներ, տվյալների բազաներ և դրանց դաշտերը:

Օրինակ, հաճախորդի օբյեկտը կվերցնի հաճախորդի մասին տեղեկատվությունը տվյալների բազայից, փոփոխի և թարմացնի տվյալների բազայի գրառումները կամ օգտագործի ստացված տեղեկատվությունը տվյալների պատկերավորման/արտաբերման համար: Մի խոսքով՝ ապահովում է ծրագրի աշխատանքը տվյալների հետ, բիզնես տրամաբանությունը:

Տեսք

Տեսքը պարունակում է հավելվածի UI և արտահայտման ու ներկայացման ինտերֆեյսը, պատասխանատու է ծրագրի արտաքին տեսքի կառուցման համար, որի հետ աշխատում է օգտագործողը:

Օրինակ, հաճախորդի տեսքը կներառի UI-ի բոլոր կոմպոնենտները` տեքստային դաշտեր, բացվող ցուցակներ և այլ տարրեր, որոնց հետ օգտվողը փոխազդում է:

Կոնտրոլլեր

Եվ վերջապես, կոնտրոլլերը պարունակում է ողջ բիզնես-լոգիկան և մշակում է մուտքային հարցումները: Սա հանդիսանում է մոդելի և տեսքի միջև միջանկյալ ինտերֆեյս:

Օրինակ, հաճախորդի կոնտրոլլերը կմշակի տեսքից եկող բոլոր փոխազդեցություններն ու մուտքերային տվյալները և կթարմացնի տվյալների բազան՝ օգտագործելով հաճախորդի մոդելը: Նույն կոնտրոլլերը կօգտագործվի նաև հաճախորդի տվյալները դիտելու համար:

Ստորև բերված դիագրամը, կօգնի պատկերացնել MVC ճարտարապետությունը և ինչպես է այն աշխատում

Ինչպե՞ս է աշխատում MVC արխիտեկտուրան

Նախ, բրաուզերը հարցումն ուղարկում է Կոնտրոլլերին: այնուհետև Կոնտրոլլերը փոխազդում է Մոդելի հետ՝ տվյալների փոխանցման – ուղարկման և ստացման համար: Այնուհետև Կոնտրոլլերը փոխազդում է Տեսք-ի հետ՝ տվյալների վիզուալիզացման համար: Տեսք-ը հոգում է միայն նրա մասին, թե ինչպես է ցուցադրվելու ինֆորմացիան, այլ ոչ թե ինֆորմացիայի վերջնական ցուցադրումով: Կոնտրոլլերի ուղարկածի հիման վրա տվյալների ցուցադրումը կիրականացվի դինամիկ HTML ֆայլի միջոցով: Վերջապես, Տեսք-ը կուղարկի վերջնական տեսքը Կոնտրոլլերին, որն էլ կցուցադրի տվյալները օգտագործողին:

Կարևոր է այն, որ Տեսքն ու Մոդելը երբեք անմիջականորեն չեն փոխազդում. բոլոր փոխազդեցությունները անցնում են միայն Կոնտրոլլերի միջոցով: Այսինքն, հավելվածի բիզնես-լոգիկան և ինտերֆեյսը երբեք չեն խաչվում, ինչը մեծապես հեշտացնում է ծավալուն հավելվածների նախագծման, կոդավորման և սպասարկման աշխատանքները:

Դիտարկենք վերը նկարագրվածը պարզ օրինակի վրա.

Ի՞նչ ենք այստեղ տեսնում. նախ, օգտատերը վեբ բրաուզերում կամ բջջային հավելվածում մուտքագրում է, որ իրեն անհրաժեշտ է ֆիլմերի ցանկը: Այնուհետև բրաուզերը հարցումն ուղարկում է Կոնտրոլլերին, որպեսզի ստանա ֆիլմերի ամբողջական ցանկը: Այնուհետև Կոնտրոլլերը հանձնարարում է Մոդելին ստանալ բոլոր ֆիլմերի մասին ողջ ինֆորմացիան տվյալներիբազայից:

router.get('/',ensureAuth, async (req,res)=>{
    try{
        const movies = await Movies.find() (*)
        res.render('movies/index',{ movies })
    }
    catch(err){ 
        console.error(err)
        res.render('error/500') 
    }
})

Այնուհետև Մոդելը որոնում է կատարում տվյալների բազայում և վերադարձնում ֆիլմերի ցանկը Կոնտրոլլերին:
Ահա թե ինչ տեսք կունենան ֆիլմերի բազան սխեմայի տեսքով.

const mongoose = require('mongoose') 
const MovieSchema = new mongoose.Schema
({ 
	name:{ 
        type:String, 
        required:true 
    }, 
	description:{ 
    	type:String 
    } 
}) 

module.exports = mongoose.model('Movies',MovieSchema)

Եթե Կոնտրոլլլերը Մոդելից ստանա ֆիլմերի ցանկը, ապա կփոխանցի View-ին ներկայացնելու ֆիլմերի ցանկը:

router.get('/',ensureAuth, async (req,res)=>{ 
	try{ const movies = await Movies.find() 
		res.render('movies/index', { movies (*) })
        }
	catch(err){ 
    console.error(err) res.render('error/500') } 
})

View-ն կստանա հարցումը և կվերադարձնի կոնտրոլլերին ֆիլմերի ցանկը՝ HTML ֆորմատով:

<div class="col" style="margin-top:20px;padding-bottom:20px">
  <div class="ui fluid card">
    <div class="content">
      <div class="header">{{movie.title}}</div>
    </div>
    <div class="extra content">
      <a href="/movies/{{movie._id}}" class="ui blue button"> More from {{movie.description}} </a>
    </div>
  </div>
</div>

Եվ վերջապես, Կոնտրոլլերը կվերցնի այս HTML կոդը և կուղարկի օգտատիրոջ բրաուզերին, ելքում ձևավորելով վերջինիս հարցմանը համապատասխան ֆիլմերի ցանկը:

Որպես ամփոփում

Ծրագրային արխիտեկտուրայի բազում մոտեցումներ կան, բայց Model-View-Controller-ը ամենահայտնին ու տարածվածն է: Այն մեծ ճանաչում ստացավ հատկապես արագ ձևավորմանն օրիենտացված ֆրեյմվորկերի զարգացման շնորհիվ՝ Python, PHP և Ruby լեզուների հենքով համապատասխանաբար Django, Laravel և Ruby on Rails-ի առաջացմանը զուգահեռ: MVC-ն լայն կիրառություն ունի Վեբ համակարգերի ստեղծման մեջ։ Եվ, եթե Նախկինում MVC-ն կիրառվում էր միայն բեքենդում իսկ Տեսքը հանդես էր գալիս հասարակ HTML էջերի տեսքով, ապա այժմ MVC-ն լայն տարածում է գտել նաև ֆրոնտենդում AngularJs, ReactJS, VueJS-ի և նմանատիպ այլ ֆրոնտենդ ֆրեյմվորկերի շնորհիվ։

Վերոհիշյալ կառուցվածքներում հիմնականում բեքենդը վերադարձնում է տվյալները JSON տեսքով HTML-ի փոխարեն, իսկ ֆրոնտենդը ինիցիալիզացնում է իր սեփական MVC-ի Մոդելը այդ տվյալներով և շնորհիվ իր սեփական MVC-ի ծրագրի բիզնես տրամաբանության մի մեծ մաս վերցնում է իր վրա՝ բեռնաթափելով բեքենդը։ Կարելի է ասել, այս կերպ բեքենդը ըստ էության վերածվում է API տրամադրող ծառայության, որը կարող է կիրառվել նաև այլ հավելվածների համար։

Այս հայեցակարգի կիրառման հիմնական նպատակն է առանձնացնել բիզնեսի տրամաբանությունը (մոդելը) դրա արտացոլումից (ներկայացում, դիտում): Այս տարանջատումը մեծացնում է կոդի կրկնակի օգտագործման հնարավորությունը: Այն նվազեցնում է կոդի բարդությունն ու դարձնում ծրագիրն ավելի հասկանալի:

Այժմ դուք գիտեք MVC փաթերնի հիմքում ընկած կոնցեպտները: Ինչպես և բոլոր նախագծման ձևանմուշները՝ MVC-ն ներկայացնում է միայն խնդրի լուծման սկզբունքը, իսկ արդեն յուրաքանչյուր կոնկրետ խնդրի լուծուման համար կարող են կիրառվել MVC-ի ձևափոխված տարբերակներ(HMVC; MVA, MVVM):

Սկզբնաղբյուր՝ How the Model View Controller Architecture Works — MVC Explained, Wikipedia