యొక్క అభివృద్ధి ప్రక్రియలో ఆబ్జెక్ట్-ఓరియెంటెడ్ ప్రోగ్రామింగ్ , మోడల్-వ్యూ-కంట్రోలర్ (MVC) అనేది ఒక పద్దతి లేదా రూపకల్పన నమూనా, ఇది వినియోగదారు ఇంటర్‌ఫేస్‌ను అంతర్లీన డేటా మోడళ్లకు సమర్ధవంతంగా మరియు విజయవంతంగా అనుసంధానించడంలో మీకు సహాయపడుతుంది. ఈ వ్యాసంలో, మేము దాని గురించి నేర్చుకుంటాము కింది క్రమంలో MVC నిర్మాణం:
యంత్ర అభ్యాసం నేర్చుకోవడానికి అవసరమైనవి
జావాస్క్రిప్ట్ MVC ఆర్కిటెక్చర్
ఇటీవలి కాలంలో, MVC నమూనా విభిన్న శ్రేణి ప్రోగ్రామింగ్ భాషలకు వర్తించబడుతుంది . జావాస్క్రిప్ట్ MVC ఆర్కిటెక్చర్ లేదా దానిపై వైవిధ్యాలకు మద్దతు ఇవ్వడానికి అనేక ఫ్రేమ్‌వర్క్‌లను కలిగి ఉంటుంది. ఇది డెవలపర్‌లను వారి అనువర్తనాలకు సులభంగా మరియు ఎక్కువ శ్రమ లేకుండా నిర్మాణాన్ని జోడించడానికి అనుమతిస్తుంది.
MVC మూడు భాగాలను కలిగి ఉంటుంది:
- మోడల్
- చూడండి
- నియంత్రిక
ఇప్పుడు, ఈ మూడు జావాస్క్రిప్ట్ MVC భాగాల లోతులోకి వెళ్దాం.
నమూనాలు
అనువర్తనం కోసం డేటాను నిర్వహించడానికి మోడల్స్ ఉపయోగించబడతాయి. వారు వినియోగదారు-ఇంటర్ఫేస్ లేదా ప్రదర్శన పొరలతో సంబంధం కలిగి లేరు. బదులుగా, అవి అనువర్తనానికి అవసరమయ్యే ప్రత్యేకమైన డేటా రూపాలను సూచిస్తాయి. ఒక మోడల్ మార్చబడినప్పుడు లేదా నవీకరించబడినప్పుడు, అది సాధారణంగా దాని పరిశీలకులకు సంభవించిన మార్పు గురించి తెలియజేస్తుంది, తద్వారా వారు దాని ప్రకారం పనిచేయగలరు.
వెన్నెముకను ఉపయోగించి అమలు చేయబడిన సరళమైన నమూనాకు ఉదాహరణ తీసుకుందాం:
var ఫోటో = వెన్నెముక. `src`. ప్రారంభించు: ఫంక్షన్ () {this.set ({'src': this.defaults.src})}})ఫోటో గ్యాలరీలో, ఫోటో యొక్క భావన దాని స్వంత మోడల్‌కు అర్హమైనది, ఎందుకంటే ఇది ఒక ప్రత్యేకమైన డొమైన్-నిర్దిష్ట డేటాను సూచిస్తుంది. ఇటువంటి మోడల్‌లో శీర్షిక, ఇమేజ్ సోర్స్ మరియు అదనపు మెటాడేటా వంటి సంబంధిత లక్షణాలు ఉండవచ్చు. పై ఉదాహరణలో, ఒక నిర్దిష్ట ఫోటో మోడల్ యొక్క ఉదాహరణలో నిల్వ చేయబడుతుంది.
వీక్షణలు
వీక్షణలు వాటి ప్రస్తుత స్థితి యొక్క ఫిల్టర్ వీక్షణను అందించే నమూనాల దృశ్య ప్రాతినిధ్యం. జావాస్క్రిప్ట్ వీక్షణలు DOM మూలకాన్ని నిర్మించడానికి మరియు నిర్వహించడానికి ఉపయోగిస్తారు. ఒక వీక్షణ సాధారణంగా ఒక మోడల్‌ను గమనిస్తుంది మరియు మోడల్ మారినప్పుడు తెలియజేయబడుతుంది, తదనుగుణంగా వీక్షణను నవీకరించడానికి వీలు కల్పిస్తుంది. ఉదాహరణకి:
var buildPhotoView = ఫంక్షన్ (ఫోటో మోడల్, ఫోటోకంట్రోలర్) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// మా // ఫోటో ఎంట్రీ కోసం HTML ను ఉత్పత్తి చేసే అండర్ స్కోర్ // టెంప్లేటింగ్ లైబ్రరీ వంటి టెంప్లేటింగ్ లైబ్రరీ. addEventListener ('క్లిక్', ఫంక్షన్ () {photoController.handleEvent ('క్లిక్', ఫోటో మోడల్)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}ఈ ఆర్కిటెక్చర్ యొక్క ప్రయోజనం ఏమిటంటే, ప్రతి భాగం అనువర్తన పనితీరును అవసరమైన విధంగా చేయడంలో దాని స్వంత ప్రత్యేక పాత్ర పోషిస్తుంది.
కంట్రోలర్లు
నియంత్రికలు నమూనాలు మరియు వీక్షణల మధ్య మధ్యవర్తుల వలె పనిచేస్తాయి, వినియోగదారు వీక్షణను తారుమారు చేసినప్పుడు మోడల్‌ను నవీకరించడానికి ఇది బాధ్యత వహిస్తుంది. మా ఫోటో గ్యాలరీ అనువర్తనం యొక్క పై ఉదాహరణలో, ఒక నిర్దిష్ట ఫోటో కోసం సవరణ వీక్షణకు వినియోగదారు చేసిన మార్పులను నిర్వహించడానికి, వినియోగదారు సవరణను పూర్తి చేసినప్పుడు నిర్దిష్ట ఫోటో మోడల్‌ను నవీకరించడానికి ఒక నియంత్రిక బాధ్యత వహిస్తుంది.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('dest', this.proxy (this .remove))}, రెండర్: ఫంక్షన్ () {// ఈ టెంప్లేటింగ్‌ను నిర్వహించండి. భర్తీ ($ ('#photoTemplate') .tmpl (this.item)) దీన్ని తిరిగి ఇవ్వండి remove, తీసివేయి: ఫంక్షన్ () () this.release ()}})ఈ ఉదాహరణ మోడల్ మరియు వీక్షణ మధ్య మార్పులను నిర్వహించడానికి చాలా తేలికైన, సరళమైన మార్గాన్ని మీకు అందిస్తుంది.
జావాస్క్రిప్ట్ MVC ఫ్రేమ్‌వర్క్‌లు
గత కొన్ని సంవత్సరాలలో, జావాస్క్రిప్ట్ MVC యొక్క శ్రేణి అభివృద్ధి చేయబడ్డాయి. ఈ ఫ్రేమ్‌వర్క్‌లలో ప్రతి ఒక్కటి మరింత నిర్మాణాత్మక జావాస్క్రిప్ట్ కోడ్‌ను వ్రాయడానికి డెవలపర్‌లను ప్రోత్సహించే లక్ష్యంతో కొన్ని రకాల MVC నమూనాను అనుసరిస్తుంది. కొన్ని ఫ్రేమ్‌వర్క్‌లు:
- backbone.js
- Ember.js
- AngularJS
- సెంచ
- కెన్డో UI
దీనితో, మేము జావాస్క్రిప్ట్ MVC వ్యాసం చివరికి వచ్చాము. MVC నిర్మాణంలో పాల్గొన్న మూడు భాగాలను మీరు అర్థం చేసుకున్నారని నేను ఆశిస్తున్నాను.
జావాస్క్రిప్ట్ MVC గురించి ఇప్పుడు మీకు తెలుసు, చూడండి ఎడురేకా చేత. HTML5, CSS3, Twitter బూట్స్ట్రాప్ 3, j క్వెరీ మరియు గూగుల్ API లను ఉపయోగించి ఆకట్టుకునే వెబ్‌సైట్‌లను ఎలా సృష్టించాలో తెలుసుకోవడానికి మరియు దానిని అమెజాన్ సింపుల్ స్టోరేజ్ సర్వీస్ (S3) కు అమర్చడానికి వెబ్ డెవలప్‌మెంట్ సర్టిఫికేషన్ శిక్షణ మీకు సహాయం చేస్తుంది.
మాకు ప్రశ్న ఉందా? దయచేసి దీనిని “జావాస్క్రిప్ట్ MVC” యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.