Анатомия JavaScript MV * Framework

Вы заметите, что это очень похоже на предыдущий пример маршрутизации с добавлением привязки данных, чтобы показать, как шаблоны могут помочь в вашем приложении. Все шаблоны включены в теги scripttemplateUrl$routeProvider

Предпочтительный способ обработки шаблонов в более масштабных приложениях, где важна производительность, — это объединить и зарегистрировать ваши шаблоны AngularJS в Angular $templateCacheэта .

Пример Ember

Ниже приведен пример шаблонов в Ember.

Маршрут Ember — это объект, который сообщает шаблону, какую модель он должен отображать. Я думаю о нем как о самом простом контроллере для вашего шаблона и ресурса (URL), основной задачей которого является загрузка модели. Если вам нужно выглядеть модно и сохранять состояние приложения, вам нужен контроллер.

Пример магистрали

Теперь давайте рассмотрим простой пример шаблонов в Backbone.

Это модификация примера маршрутизации, но вместо того, чтобы жестко кодировать HTML в свойстве шаблона объекта представления, теперь разметка находится на странице HTML внутри тега scriptid Чтобы получить шаблон (фрагмент HTML), мы используем селектор jQuery, чтобы найти элемент по scriptidinnerHTML

модели

Модели являются клиентской версией того, что обычно называют бизнес-объектами, объектами домена или объектами. В общем, идея, лежащая в основе моделей в клиентских средах MV *, состоит в том, чтобы установить центральную точку для данных в приложении, а также любое поведение, которое должно быть заключено в эти данные. Эту модель можно сравнить с серверной архитектурой MVC плюс jQuery, в которой данные модели обычно хранятся в DOM. При наличии модели цель состоит в том, чтобы удалить эти данные и состояние из DOM и поместить их в общее место, где они могут быть использованы повторно.

Пример магистрали

Модели хранят данные и хранят их вне DOM, а также генерируют такие события, как change Это дает вам один источник правды, а не пользовательский интерфейс.

Я изменил пример привязки данных из предыдущего, добавив новый шаблон и представление, которое смотрит на тот же объект модели Person. Ранее я объявил модель Person на лету, чтобы все было просто, но теперь я добавил вызов Backbone.Model.extend() Обратите внимание, как оба представления прослушивают один и тот же объект модели человека (событие изменения) и обновляют себя. Имея этот единственный источник данных, многочисленные обращения к определенным элементам DOM могут быть инкапсулированы в их собственные аккуратные представления, и одна модель может обслуживать их все.

Пример AngularJS

Идея единой модели, которая является правдой о состоянии в вашем приложении, существует в AngularJS, но Angular позволяет вам использовать простые старые объекты JavaScript в качестве модели, а затем добавляет наблюдатели «под капот» к любому свойству, которое связано с данными в представлении. с директивой ng-model Затем эти наблюдатели автоматически предупреждают другие части приложения, связанные с той же моделью, и эти элементы DOM знают, как обновить себя.

Вот обновленный пример привязки данных AngularJS, показывающий две части обновляемого представления.

Доступ к данным

Доступ к данным — это способ получения и сохранения данных для вашего приложения. В общем случае фреймворки предполагают, что вы вызываете API, который возвращает вам JSON.

Пример AngularJS

AngularJS обрабатывает данные двумя различными способами. Во-первых, предоставляя поддержку для ручных вызовов Ajax очень похоже на функциональность jQuery $.ajax$http Кроме того, если ваш бэкэнд является строго RESTful-сервисом, AngularJS предоставляет класс $resource

Пример $http

 app.factory('myService', function($http) {
  return {
    getFooOldSchool: function(callback) {
      $http.get('foo.json').success(callback);
    }
  };
});

app.controller('MainCtrl', function($scope, myService) {
  myService.getFooOldSchool(function(data) {
    $scope.foo = data;
  });
});

$resource

 //create a todo
var todo1 = new Todo();
todo1.foo = 'bar';
todo1.something = 123;
todo1.$save();

//get and update a todo
var todo2 = Todo.get({id: 123});
todo2.foo += '!';
todo2.$save();

//delete a todo
Todo.$delete({id: 123});

Пример магистрали

Backbone предполагает, что вы взаимодействуете с RESTful API, но позволяет вам переопределить один метод, Backbone.sync() Вы указываете своей модели, где находится ресурс на сервере (URL), а затем можете просто вызвать save()

 var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});
var user = new Usermodel();
// Notice that we haven't set an `id`
var userDetails = {
  name: 'Craig',
  email: '[email protected]'
};
// Because we have not set an `id` the server will call
// POST /user with a payload of {name:'Craig', email: '[email protected]'}
// The server should save the data and return a response containing the new `id`
user.save(userDetails, {
  success: function (user) {
    alert(user.toJSON());
  }
});

Пример Ember

У Ember есть Ember Data, которые технически не являются частью базовой структуры, но стремятся обеспечить более надежную историю постоянного хранения / хранения данных. Он предоставляет множество возможностей, которые вы найдете в серверных ORM, таких как ActiveRecord, но разработан специально для уникальной среды JavaScript в браузере. На момент написания Ember Core Team была близка к выпуску v1.0, но этого не произошло, и многие проекты Ember просто используют методы $.ajax$http

Вывод

В этом посте были разбиты фреймворки JavaScript MV * с помощью функций, позволяющих понять, какие функциональные возможности предоставляются этими фреймворками, и донести до читателей понимание того, что они на самом деле очень похожи. Как только вы поймете особенности фреймворка и то, как они сочетаются друг с другом, становится намного проще быстро изучить несколько фреймворков и найти подходящую для вашего проекта.