W procesie tworzenia programowanie obiektowe , model-view-controller (MVC) to metodologia lub wzorzec projektowy, który pomaga w wydajnym i pomyślnym powiązaniu interfejsu użytkownika z bazowymi modelami danych. W tym artykule dowiemy się o Architektura MVC w następującej kolejności:
Architektura JavaScript MVC
W ostatnim czasie wzorzec MVC jest stosowany w wielu różnych językach programowania, w tym w . JavaScript składa się z wielu frameworków obsługujących architekturę MVC lub jej odmiany. Pozwala programistom łatwo i bez większego wysiłku dodawać strukturę do swoich aplikacji.
MVC składa się z trzech elementów:
- Model
- Widok
- Kontroler
Teraz przejdźmy dalej i zagłębmy się w te trzy komponenty JavaScript MVC.
jak zrobić jframe w java
Modele
Modele służą do zarządzania danymi aplikacji. Nie zajmują się interfejsem użytkownika ani warstwami prezentacji. Zamiast tego reprezentują unikalne formy danych, których może wymagać aplikacja. Kiedy model jest zmieniany lub aktualizowany, zazwyczaj powiadamia swoich obserwatorów o zaistniałej zmianie, aby mogli odpowiednio działać.
Weźmy przykład uproszczonego modelu zaimplementowanego przy użyciu Backbone:
var Photo = Backbone.Model.extend ({// Domyślne atrybuty domyślnych ustawień zdjęć: {src: 'placeholder.jpg', caption: 'Obraz domyślny', seen: false}, // Upewnij się, że każde utworzone zdjęcie ma `src`. initialize: function () {this.set ({'src': this.defaults.src})}})W galerii zdjęć koncepcja zdjęcia zasługiwałaby na własny model, ponieważ reprezentuje unikalny rodzaj danych specyficznych dla domeny. Taki model może zawierać powiązane atrybuty, takie jak podpis, źródło obrazu i dodatkowe metadane. W powyższym przykładzie określone zdjęcie byłoby przechowywane w instancji modelu.
wzorzec projektowy mvc w java
Wyświetlenia
Widoki to wizualna reprezentacja modeli, które zapewniają przefiltrowany widok ich bieżącego stanu. Widoki JavaScript służą do tworzenia i utrzymywania elementu DOM. Widok zazwyczaj obserwuje model i jest powiadamiany o zmianie modelu, co pozwala widokowi na odpowiednią aktualizację. Na przykład:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Używamy biblioteka szablonów, taka jak Underscore // szablony, która generuje kod HTML dla naszego // wpisu do zdjęcia 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'} return {showView: show, hideView: hide}}Zaletą tej architektury jest to, że każdy komponent odgrywa własną, odrębną rolę w dostosowywaniu aplikacji do potrzeb.
Kontrolery
Kontrolery działają jak pośredniki między modelami i widokami, które są odpowiedzialne za aktualizację modelu, gdy użytkownik manipuluje widokiem. W powyższym przykładzie naszej aplikacji do galerii zdjęć, kontroler byłby odpowiedzialny za obsługę zmian wprowadzonych przez użytkownika w widoku edycji dla danego zdjęcia, aktualizację konkretnego modelu zdjęcia po zakończeniu edycji przez użytkownika.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('niszcz', this.proxy (this .remove))}, render: function () {// Obsługa szablonów this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Ten przykład zapewni bardzo lekki i prosty sposób zarządzania zmianami między modelem a widokiem.
sql i pl sql tutorial
Struktury JavaScript MVC
W ciągu ostatnich kilku lat seria JavaScript MVC zostały opracowane. Każdy z tych frameworków jest zgodny z pewną formą wzorca MVC w celu zachęcenia programistów do pisania bardziej ustrukturyzowanego kodu JavaScript. Niektóre z ram to:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
W ten sposób dotarliśmy do końca artykułu JavaScript MVC. Mam nadzieję, że zrozumiałeś trzy komponenty związane z architekturą MVC.
Teraz, gdy wiesz już o JavaScript MVC, zapoznaj się z przez Edureka. Szkolenie z zakresu certyfikacji w zakresie tworzenia aplikacji internetowych pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w usłudze Amazon Simple Storage Service (S3).
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w „JavaScript MVC”, a my skontaktujemy się z Tobą.