এর উন্নয়ন প্রক্রিয়াতে অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং , মডেল-ভিউ-কন্ট্রোলার (এমভিসি) এমন একটি পদ্ধতি বা ডিজাইনের প্যাটার্ন যা আপনাকে ব্যবহারকারী ইন্টারফেসকে দক্ষতার সাথে এবং সাফল্যের সাথে অন্তর্নিহিত ডেটা মডেলের সাথে সম্পর্কিত করতে সহায়তা করে। এই নিবন্ধে, আমরা শিখব নিম্নলিখিত ক্রমানুসারে এমভিসি আর্কিটেকচার:
জাভাস্ক্রিপ্ট এমভিসি আর্কিটেকচার
সাম্প্রতিক সময়ে, এমভিসি প্যাটার্নটি সহ বিভিন্ন ধরণের প্রোগ্রামিং ভাষার ক্ষেত্রে প্রয়োগ করা হয় । এমভিসি আর্কিটেকচার বা এর বিভিন্নতা সমর্থন করার জন্য জাভাস্ক্রিপ্টে বেশ কয়েকটি ফ্রেমওয়ার্ক রয়েছে। এটি বিকাশকারীদের সহজেই এবং অনেক প্রচেষ্টা ছাড়াই তাদের অ্যাপ্লিকেশনগুলিতে কাঠামো যুক্ত করতে দেয়।
এমভিসি তিনটি উপাদান নিয়ে গঠিত:
- মডেল
- দেখুন
- নিয়ামক
এখন, এগিয়ে চলুন এবং এই তিনটি জাভাস্ক্রিপ্ট এমভিসি উপাদানগুলির গভীরতায় .ুকি।
মডেল
মডেলগুলি কোনও অ্যাপ্লিকেশনটির জন্য ডেটা পরিচালনার জন্য ব্যবহৃত হয়। তারা ব্যবহারকারী-ইন্টারফেস বা উপস্থাপনা স্তরগুলির সাথে সম্পর্কিত নয়। পরিবর্তে, তারা এমন কোনও অনন্য ফর্মের ডেটা উপস্থাপন করে যা কোনও অ্যাপ্লিকেশনটির প্রয়োজন হতে পারে। যখন কোনও মডেল পরিবর্তন বা আপডেট করা হয়, তখন এটি সাধারণত পর্যবেক্ষকদেরকে পরিবর্তিত পরিবর্তন সম্পর্কে অবহিত করবে যাতে তারা সেই অনুযায়ী কাজ করতে পারে।
গোটো কমান্ড সি ++
আসুন ব্যাকবোন ব্যবহার করে কার্যকর করা সরল মডেলের উদাহরণ নিই:
var ফটো = ব্যাকবোন.মোডেল.একসেট ({// ছবির ডিফল্টগুলির জন্য ডিফল্ট বৈশিষ্ট্য: {src: 'placeholder.jpg', ক্যাপশন: 'একটি ডিফল্ট চিত্র', দেখা হয়েছে: মিথ্যা}, // নিশ্চিত করুন যে তৈরি প্রতিটি ফটোতে একটি রয়েছে) `src`। আরম্ভ করুন: ফাংশন ()। this.set ({'src': this.defaults.src})}})কোনও ফটো গ্যালারিতে কোনও ছবির ধারণাটি তার নিজস্ব মডেলের যোগ্যতা অর্জন করবে, কারণ এটি অনন্য ধরনের ডোমেন-নির্দিষ্ট ডেটা উপস্থাপন করে। এই জাতীয় মডেলটিতে ক্যাপশন, চিত্র উত্স এবং অতিরিক্ত মেটাডেটার মতো সম্পর্কিত বৈশিষ্ট্য থাকতে পারে। উপরের উদাহরণে একটি নির্দিষ্ট ছবি কোনও মডেলের উদাহরণে সংরক্ষণ করা হবে।
ভিউ
দর্শনগুলি এমন মডেলের ভিজ্যুয়াল উপস্থাপনা যা তাদের বর্তমান অবস্থার ফিল্টার করা ভিউ সরবরাহ করে। জাভাস্ক্রিপ্ট ভিউগুলি একটি ডিওএম উপাদান তৈরি এবং রক্ষণাবেক্ষণের জন্য ব্যবহৃত হয়। একটি ভিউ সাধারণত একটি মডেল পর্যবেক্ষণ করে এবং যখন মডেল পরিবর্তন হয় তখন অবহিত হয়, সেই অনুযায়ী দর্শনটি নিজেকে আপডেট করার অনুমতি দেয়। উদাহরণ স্বরূপ:
var buildPhotoView = ফাংশন (ফটোমোডেল, ফটো কন্ট্রোলার) base var বেস = ডকুমেন্ট.ক্রেটএলিমেন্ট ('ডিভ'), ফটোএল = ডকুমেন্ট.ক্রিয়েটেলমেন্ট ('ডিভ') বেস.অ্যাপেন্ডচিল্ড (ফটোএল) রেন্ডার = ফাংশন () {// আমরা একটি ব্যবহার করি টেম্প্লেটিং লাইব্রেরি যেমন অ্যান্ডস্কোর // টেম্প্লেটিং যা আমাদের // ফটো এন্ট্রি ফটোএল.ইন.এইচটিএমএল = _.টিম্পলেট ('# ফোটো টেম্পলেট', {এসসিআর: ফটোমোডেল.জেটসিআরসি ()})} ফটোমোডেল.এডসসসক্রাইবার (রেন্ডার) ফটোএল তৈরি করে। addEventListener ('ক্লিক', ফাংশন () {photoController.handleEvent ('ক্লিক', ফটোমোডেল) show) var শো = ফাংশন () {ফটোএল.স্টাইল.ডিসপ্লে = ''} ওয়ার লুকো ফাংশন () {ফটোএল.স্টাইল.ডিসপ্লে = 'কিছুই নয়'} রিটার্ন {শো ভিউ: শো, হাইডভিউ: লুকান}এই আর্কিটেকচারের সুবিধাটি হ'ল প্রতিটি উপাদান প্রয়োজনীয়ভাবে অ্যাপ্লিকেশনটি তৈরি করতে তার নিজস্ব পৃথক ভূমিকা পালন করে।
নিয়ন্ত্রক
কন্ট্রোলাররা মডেল এবং দর্শনগুলির মধ্যে মধ্যস্থতার মতো কাজ করে যা ব্যবহারকারী যখন ভিউটি পরিচালনা করে তখন মডেলটি আপডেট করার জন্য দায়বদ্ধ। আমাদের ফটো গ্যালারী অ্যাপ্লিকেশনের উপরের উদাহরণে, একজন নিয়ামক ব্যবহারকারী কোনও নির্দিষ্ট ফটোতে সম্পাদনা দৃশ্যে সম্পাদিত পরিবর্তনগুলি পরিচালনার জন্য দায়বদ্ধ হন, যখন কোনও ব্যবহারকারী সম্পাদনা শেষ করে নির্দিষ্ট ফটো মডেল আপডেট করে।
var PhotosController = Spine.Controller.sub ({init: ফাংশন () {this.item.bind ('আপডেট', this.proxy (this.render)) this.item.bind ('ধ্বংস', this.proxy (এটি । রিমুভ))}, রেন্ডার: ফাংশন () {// টেম্পলেটিং হ্যান্ডল এটি.রেপ্লেস ($ ('# ফোটো টেম্পলেট') .tmpl (this.item)) এই ফিরিয়ে দেয় remove, সরান: ফাংশন () {this.el.remove () this. রিলিজ ()}})এই উদাহরণটি আপনাকে একটি খুব হালকা ওজনের, মডেল এবং দর্শনের মধ্যে পরিবর্তনগুলি পরিচালনা করার সহজ উপায় সরবরাহ করবে।
জাভাস্ক্রিপ্ট এমভিসি ফ্রেমওয়ার্কস
গত কয়েক বছরে, জাভাস্ক্রিপ্ট এমভিসি একটি সিরিজ উন্নত করা হয়েছে. বিকাশকারীদের আরও কাঠামোগত জাভাস্ক্রিপ্ট কোড লিখতে উত্সাহিত করার লক্ষ্য সহ এই ফ্রেমওয়ার্কগুলির প্রতিটি এমভিসি প্যাটার্নের কিছু ফর্ম অনুসরণ করে। ফ্রেমওয়ার্কগুলির কয়েকটি হ'ল:
- backbone.js
- এমবার.জেএস
- AngularJS
- সেনচা
- কেন্ডো ইউআই
এটির সাহায্যে আমরা জাভাস্ক্রিপ্ট এমভিসি নিবন্ধের শেষে এসেছি। আমি আশা করি আপনি এমভিসি আর্কিটেকচারের সাথে জড়িত তিনটি উপাদান বুঝতে পেরেছেন।
এখন আপনি জাভাস্ক্রিপ্ট এমভিসি সম্পর্কে জানেন, এটি পরীক্ষা করে দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে help
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'জাভাস্ক্রিপ্ট এমভিসি' এর মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।
মেশিন লার্নিংয়ে কী বেশি over