No processo de desenvolvimento de programação orientada a objetos , model-view-controller (MVC) é uma metodologia ou padrão de design que o ajuda a relacionar a interface do usuário aos modelos de dados subjacentes de forma eficiente e bem-sucedida. Neste artigo, aprenderemos sobre o Arquitetura MVC na seguinte sequência:
Arquitetura JavaScript MVC
Nos últimos tempos, o padrão MVC é aplicado a uma ampla gama de linguagens de programação, incluindo . JavaScript consiste em uma série de estruturas para suportar a arquitetura MVC ou variações dela. Ele permite que os desenvolvedores adicionem estrutura aos seus aplicativos facilmente e sem muito esforço.
MVC consiste em três componentes:
- Modelo
- Visão
- Controlador
Agora, vamos seguir em frente e aprofundar esses três componentes JavaScript MVC.
diferença entre aws e azul
Modelos
Os modelos são usados para gerenciar os dados de um aplicativo. Eles não estão preocupados com a interface do usuário ou com as camadas de apresentação. Em vez disso, eles representam formas exclusivas de dados que um aplicativo pode exigir. Quando um modelo é alterado ou atualizado, ele normalmente notifica seus observadores sobre a mudança que ocorreu para que eles possam agir de acordo.
ordenar matriz em c ++
Vamos dar um exemplo de um modelo simplista implementado usando o Backbone:
var Photo = Backbone.Model.extend ({// Atributos padrão para os padrões de fotos: {src: 'placeholder.jpg', legenda: 'Uma imagem padrão', visualizada: false}, // Certifique-se de que cada foto criada tenha um `src`. initialize: function () {this.set ({'src': this.defaults.src})}})Em uma galeria de fotos, o conceito de foto mereceria seu próprio modelo, pois representa um tipo único de dados específicos de domínio. Esse modelo pode conter atributos relacionados, como legenda, fonte de imagem e metadados adicionais. No exemplo acima, uma foto específica seria armazenada em uma instância de um modelo.
Visualizações
As visualizações são uma representação visual de modelos que fornecem uma visualização filtrada de seu estado atual. As visualizações JavaScript são usadas para construir e manter um elemento DOM. Uma visão normalmente observa um modelo e é notificada quando o modelo muda, permitindo que a visão se atualize de acordo. Por exemplo:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Usamos um biblioteca de modelos como Underscore // modelo que gera o HTML para nossa // entrada de foto 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}}O benefício dessa arquitetura é que cada componente desempenha sua própria função separada ao fazer o aplicativo funcionar conforme necessário.
Controladores
Os controladores agem como intermediários entre os modelos e as visualizações, que são responsáveis por atualizar o modelo quando o usuário manipula a visualização. No exemplo acima de nosso aplicativo de galeria de fotos, um controlador seria responsável por lidar com as alterações feitas pelo usuário na visualização de edição de uma foto específica, atualizando um modelo de foto específico quando um usuário tiver terminado a edição.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, render: function () {// Lidar com modelos this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remova: function () {this.el.remove () esta liberação() } })Este exemplo fornecerá uma maneira muito leve e simples de gerenciar as alterações entre o modelo e a visualização.
Frameworks JavaScript MVC
Nos últimos anos, uma série de JavaScript MVC foi desenvolvido. Cada uma dessas estruturas segue alguma forma de padrão MVC com o objetivo de encorajar os desenvolvedores a escrever um código JavaScript mais estruturado. Algumas das estruturas são:
o que é um socket em java
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Com isso, chegamos ao final do artigo JavaScript MVC. Espero que você tenha entendido os três componentes envolvidos na arquitetura MVC.
Agora que você sabe sobre o JavaScript MVC, verifique o por Edureka. O Treinamento de Certificação de Desenvolvimento Web o ajudará a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implementá-lo no Amazon Simple Storage Service (S3).
Tem alguma questão para nós? Mencione isso na seção de comentários de “JavaScript MVC” e entraremos em contato com você.