อยู่ในขั้นตอนการพัฒนาของ การเขียนโปรแกรมเชิงวัตถุ model-view-controller (MVC) เป็นวิธีการหรือรูปแบบการออกแบบที่ช่วยคุณในการเชื่อมโยงอินเทอร์เฟซผู้ใช้กับโมเดลข้อมูลพื้นฐานได้อย่างมีประสิทธิภาพและประสบความสำเร็จ ในบทความนี้เราจะเรียนรู้เกี่ยวกับไฟล์ สถาปัตยกรรม MVC ตามลำดับต่อไปนี้:
สถาปัตยกรรม JavaScript MVC
ในช่วงไม่กี่ครั้งที่ผ่านมารูปแบบ MVC ถูกนำไปใช้กับภาษาโปรแกรมที่หลากหลายรวมถึง . JavaScript ประกอบด้วยเฟรมเวิร์กจำนวนมากเพื่อรองรับสถาปัตยกรรม MVC หรือรูปแบบต่างๆ ช่วยให้นักพัฒนาสามารถเพิ่มโครงสร้างให้กับแอปพลิเคชันของตนได้อย่างง่ายดายและไม่ต้องใช้ความพยายามมากนัก
MVC ประกอบด้วยสามองค์ประกอบ:
- รุ่น
- ดู
- ตัวควบคุม
ตอนนี้เรามาดูรายละเอียดขององค์ประกอบ JavaScript MVC ทั้งสามนี้กัน
โมเดล
แบบจำลองใช้สำหรับจัดการข้อมูลสำหรับแอปพลิเคชัน พวกเขาไม่เกี่ยวข้องกับอินเทอร์เฟซผู้ใช้หรือเลเยอร์การนำเสนอ แต่เป็นตัวแทนของรูปแบบข้อมูลเฉพาะที่แอปพลิเคชันอาจต้องการ เมื่อโมเดลมีการเปลี่ยนแปลงหรืออัปเดตโดยทั่วไปจะแจ้งให้ผู้สังเกตการณ์ทราบเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นเพื่อให้สามารถดำเนินการตามนั้นได้
วิธีใช้โฮเวอร์ใน css
เรามาดูตัวอย่างของโมเดลที่เรียบง่ายที่ใช้ Backbone:
var Photo = Backbone.Model.extend ({// แอตทริบิวต์เริ่มต้นสำหรับค่าเริ่มต้นของรูปภาพ: {src: 'placeholder.jpg', คำบรรยาย: 'ภาพเริ่มต้น', ดู: false}, // ตรวจสอบให้แน่ใจว่าแต่ละภาพที่สร้างขึ้นมี `src`. initialize: function () {this.set ({'src': this.defaults.src})}})ในแกลเลอรีรูปภาพแนวคิดของรูปภาพจะเป็นประโยชน์ต่อโมเดลของตัวเองเนื่องจากแสดงถึงข้อมูลเฉพาะโดเมนที่ไม่ซ้ำใคร โมเดลดังกล่าวอาจมีแอตทริบิวต์ที่เกี่ยวข้องเช่นคำอธิบายภาพแหล่งที่มาของรูปภาพและข้อมูลเมตาเพิ่มเติม ในตัวอย่างข้างต้นภาพถ่ายบางภาพจะถูกจัดเก็บไว้ในตัวอย่างของโมเดล
มุมมอง
มุมมองคือการแสดงภาพของโมเดลที่ให้มุมมองที่กรองแล้วของสถานะปัจจุบัน มุมมอง JavaScript ใช้สำหรับสร้างและดูแลองค์ประกอบ DOM โดยทั่วไปมุมมองจะสังเกตโมเดลและได้รับการแจ้งเตือนเมื่อโมเดลมีการเปลี่ยนแปลงทำให้มุมมองสามารถอัปเดตตัวเองได้ ตัวอย่างเช่น:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// เราใช้ a ไลบรารีเทมเพลตเช่น Underscore // templating ซึ่งสร้าง HTML สำหรับ // photo entry photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} ส่งคืน {showView: show, hideView: hide}}ประโยชน์ของสถาปัตยกรรมนี้คือส่วนประกอบแต่ละส่วนมีบทบาทแยกกันในการทำให้แอปพลิเคชันทำงานได้ตามต้องการ
ตัวควบคุม
ตัวควบคุมทำหน้าที่เหมือนตัวกลางระหว่างโมเดลและมุมมองซึ่งมีหน้าที่ในการอัปเดตโมเดลเมื่อผู้ใช้จัดการกับมุมมอง ในตัวอย่างด้านบนของแอปพลิเคชันแกลเลอรีรูปภาพของเราผู้ควบคุมจะต้องรับผิดชอบในการจัดการการเปลี่ยนแปลงที่ผู้ใช้ทำกับมุมมองแก้ไขสำหรับภาพถ่ายหนึ่ง ๆ อัปเดตรูปแบบภาพถ่ายเฉพาะเมื่อผู้ใช้แก้ไขเสร็จแล้ว
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (สิ่งนี้ .remove))}, render: function () {// จัดการ templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) คืนค่านี้}, remove: function () {this.el.remove () this.release ()}})ตัวอย่างนี้จะให้วิธีง่ายๆในการจัดการการเปลี่ยนแปลงระหว่างโมเดลและมุมมองที่มีน้ำหนักเบามาก
JavaScript MVC Frameworks
ในช่วงไม่กี่ปีที่ผ่านมาชุดของ JavaScript MVC ถูกพัฒนา. แต่ละเฟรมเวิร์กเหล่านี้เป็นไปตามรูปแบบ MVC บางรูปแบบโดยมีเป้าหมายเพื่อกระตุ้นให้นักพัฒนาเขียนโค้ด JavaScript ที่มีโครงสร้างมากขึ้น กรอบงานบางส่วน ได้แก่ :
- กระดูกสันหลัง js
- Ember.js
- AngularJS
- เซนฉะ
- Kendo UI
ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความ JavaScript MVC ฉันหวังว่าคุณจะเข้าใจองค์ประกอบทั้งสามที่เกี่ยวข้องกับสถาปัตยกรรม MVC
ตอนนี้คุณรู้เกี่ยวกับ JavaScript MVC แล้วลองดูไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ JavaScript MVC” แล้วเราจะติดต่อกลับไป
การเพิ่มตัวเลขสองตัวใน java