جاوا اسکرپٹ MVC فن تعمیر کیا ہے اور یہ کیسے کام کرتا ہے؟

کی ترقی کے عمل میں آبجیکٹ اورینٹڈ پروگرامنگ ، ماڈل-ویو-کنٹرولر (MVC) ایک ایسا طریقہ کار یا ڈیزائن کا نمونہ ہے جو صارف کے انٹرفیس سے متعلق ڈیٹا ماڈل کو موثر اور کامیابی کے ساتھ منسلک کرنے میں مدد کرتا ہے۔ اس مضمون میں ، ہم اس کے بارے میں سیکھیں گے مندرجہ ذیل ترتیب میں MVC فن تعمیر:

• جاوا اسکرپٹ MVC فن تعمیر
• ماڈل
• مناظر
• کنٹرولر
• جاوا اسکرپٹ MVC فریم ورک

جاوا اسکرپٹ MVC فن تعمیر

حالیہ دنوں میں ، ایم وی سی پیٹرن مختلف پروگرامنگ زبانوں میں شامل ہے ، جن میں شامل ہے . جاوا اسکرپٹ میں MVC فن تعمیر یا اس میں تغیرات کی تائید کیلئے متعدد فریم ورکس پر مشتمل ہے۔ یہ ڈویلپرز کو آسانی سے اور زیادہ محنت کے بغیر ان کی ایپلی کیشنز میں ڈھانچہ شامل کرنے کی اجازت دیتا ہے۔

سنیپ شاٹ سے Aws لانچ کی مثال

ایم وی سی تین اجزاء پر مشتمل ہے:

• ماڈل
• دیکھیں
• کنٹرولر

اب ، ہم آگے بڑھیں اور جاوا اسکرپٹ ایم وی سی کے ان تین اجزاء کی گہرائی میں جائیے۔

ماڈل

ماڈلز کسی ایپلی کیشن کے ڈیٹا کے نظم و نسق کے لئے استعمال ہوتے ہیں۔ وہ صارف کے انٹرفیس یا پریزنٹیشن پرتوں سے متعلق نہیں ہیں۔ اس کے بجائے ، وہ اعداد و شمار کی انفرادیت کی نمائندگی کرتے ہیں جن کی اطلاق کے لئے ضرورت ہو۔ جب کسی ماڈل کو تبدیل یا اپ ڈیٹ کیا جاتا ہے تو ، وہ عام طور پر اپنے مبصرین کو اس تبدیلی کے بارے میں مطلع کرے گا جو واقع ہوئی ہے تاکہ وہ اس کے مطابق کام کرسکیں۔

آئیے بیک بون کا استعمال کرتے ہوئے ایک سادہ ماڈل کا نفاذ کرتے ہیں:

var Photo = Backbone.Model.extend ({// فوٹو ڈیفالٹس کیلئے ڈیفالٹ اوصاف: {src: 'placeholder.jpg'، عنوان: 'ایک ڈیفالٹ امیج' ، دیکھا: غلط false، // اس بات کا یقین کر لیں کہ بنائی گئی ہر تصویر میں `src`. ابتدا: فنکشن (). this.set (s 'src': this.defaults.src})}})

فوٹو گیلری میں ، تصویر کے تصور کو اپنے ماڈل کی حیثیت حاصل ہوگی ، کیونکہ یہ ڈومین سے متعلق مخصوص ڈیٹا کی ایک منفرد قسم کی نمائندگی کرتا ہے۔ اس طرح کے ماڈل میں متعلقہ خصوصیات شامل ہوسکتی ہیں جیسے سرخی ، تصویری منبع اور اضافی میٹا ڈیٹا۔ مذکورہ مثال میں ، ماڈل کی مثال میں ایک مخصوص تصویر اسٹور کی جائے گی۔

مناظر

مناظر ماڈل کی ایک بصری نمائندگی ہیں جو ان کی موجودہ حالت کا فلٹر کردہ نظارہ پیش کرتے ہیں۔ جاوا اسکرپٹ کے خیالات DOM عنصر کی تعمیر اور برقرار رکھنے کے لئے استعمال ہوتے ہیں۔ ایک منظر عام طور پر کسی ماڈل کا مشاہدہ کرتا ہے اور جب ماڈل میں تبدیلی کی جاتی ہے تو مطلع ہوتا ہے ، اس کے مطابق اس نظارے کو خود کو اپ ڈیٹ کرنے کی اجازت ملتی ہے۔ مثال کے طور پر:

var buildPhotoView = فنکشن (فوٹو ماڈیل ، فوٹو کنٹرولر) {var base = document.createElement ('Div')، photoEl = document.createElement ('Div') base.appendChild (photoEl) var reender = فنکشن () {// ہم استعمال کرتے ہیں ٹیمپلٹنگ لائبریری جیسے انڈسکوئر // ٹیمپلٹنگ جو ہماری // فوٹو انٹری فوٹو ایلنر ایچ ٹی ایم ایل = _.ٹیمپلٹ ('# فوٹو ٹیمپلٹ' ، {src: photoModel.getSrc ()})} photoModel.addSubscriber (رینڈر) فوٹو ای ایل کے لئے HTML تیار کرتی ہے۔ addEventListener ('پر کلک کریں' ، فنکشن () {photoController.handleEvent ('کلک' ، فوٹو میڈل) var) var شو = فنکشن () {photoEl.style.display = ''} var پوشیدہ = فنکشن () {photoEl.style.display = 'کوئی نہیں'} واپسی {شو ویو: شو ، پوشیدہ نظارہ: چھپائیں}

اس فن تعمیر کا فائدہ یہ ہے کہ ہر جزو درخواست کے فنکشن کو ضرورت کے مطابق بنانے میں اپنا الگ کردار ادا کرتا ہے۔

کنٹرولر

کنٹرولرز ماڈل اور آراء کے مابین انٹرمیڈیٹس کی طرح کام کرتے ہیں ، جب صارف اس نظریہ کو جوڑتا ہے تو ماڈل کو اپ ڈیٹ کرنے کا ذمہ دار ہوتا ہے۔ ہماری گیلری ، نگارخانہ ایپلی کیشن کی مذکورہ بالا مثال میں ، ایک کنٹرولر صارف کی کسی خاص تصویر میں ترمیم کے نظارے میں کی جانے والی تبدیلیوں سے نمٹنے کے لئے ذمہ دار ہوگا ، جب صارف کی ترمیم ختم ہو جاتی ہے تو مخصوص فوٹو ماڈل کو اپ ڈیٹ کرتی ہے۔

var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('اپ ڈیٹ'، this.proxy (this.render)) this.item.bind ('تباہ'، this.proxy (یہ .remove))}، رینڈر: فنکشن () {// یہ سنبھالنے کی ہینڈل کریں۔ جگہ (# ('# فوٹو فوٹو ') .tmpl (this.item)) اس کو واپس کریں remove ، ہٹائیں: فنکشن () {this.el.remove () یہ.ریلیز ()}})

یہ مثال آپ کو ماڈل اور نظارے کے درمیان تبدیلیوں کا نظم و نسق کرنے کے ل light ایک انتہائی ہلکا پھلکا ، آسان طریقہ فراہم کرے گی۔

جاوا اسکرپٹ MVC فریم ورک

پچھلے کچھ سالوں میں ، جاوا اسکرپٹ ایم وی سی کی ایک سیریز بنایا جا چکا ہے. ان میں سے ہر ایک فریم ورک ایم وی سی پیٹرن کی کچھ شکلوں کی پیروی کرتا ہے جس کا مقصد ڈویلپرز کو زیادہ ساختہ جاوا اسکرپٹ کوڈ لکھنے کی ترغیب دیتا ہے۔ کچھ فریم ورک یہ ہیں:

• backbone.js
• امبر جے
• AngularJS
• سینچا
• کینڈو UI

اس کے ساتھ ، ہم جاوا اسکرپٹ MVC مضمون کے اختتام پر پہنچے ہیں۔ مجھے امید ہے کہ آپ ایم وی سی فن تعمیر میں شامل تین اجزا کو سمجھ گئے ہوں گے۔

اب جب آپ جاوا اسکرپٹ ایم وی سی کے بارے میں جانتے ہیں تو ، چیک کریں بذریعہ ایڈوریکا۔ ویب ڈویلپمنٹ سرٹیفیکیشن ٹریننگ آپ کو HTML5 ، CSS3 ، ٹویٹر بوٹسٹریپ 3 ، jQuery اور گوگل API کا استعمال کرتے ہوئے متاثر کن ویب سائٹ بنانے کا طریقہ سیکھنے میں مدد دے گی اور اسے ایمیزون سادہ اسٹوریج سروس (S3) میں تعینات کرے گی۔

ہمارے لئے ایک سوال ہے؟ برائے کرم اس کا ذکر 'جاوا اسکرپٹ ایمویسی' کے تبصرے سیکشن میں کریں اور ہم آپ کو واپس ملیں گے۔