В этом скринкасте мы рассмотрим понятие моделей.
Приветствую! Модель – это класс (в javascript – функция-конструктор), цель которого хранить интерактивные данные, а так же осуществлять соответствующую логику. Конвертация, валидация, контроль доступа. Все это к моделям.
Итак, сегодня мы напишем модель на нативном js (vanilla js).
Начнем с базовой верстки и подключения файла main.js
<doctype html>
<html>
<head>
<title>Немного о моделях</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/main.js"></script>
</body>
</html>Перейдем в main.js и напишем свою первую модель. Это будет модель человека – персоны. Напишем соответствующую функцию конструктор и укажем ей ожидаемый параметр – объект config, содержащий в себе данные имени, возраста и работы персоны.
var Person = function(config) {
this.name = config.name;
this.age = config.age;
this.job = config.job;
};Теперь создадим экземпляр модели – nick и передадим ей в качестве аргумента объект (он же config) , в котором укажем все необходимые данные.
var nick = new Person({ name: 'Nick', age: 24, job: 'Front-end developer' });Проверим в браузере…ура! Объект создан!
А как же с функциями? И к тому же функциями, которые необходимы в каждом новом объекте ?
Чтобы создать такую функцию, необходимо добавить ее в прототип модели. Таким образом, она будет доступна для любого созданного объекта. Используем нативное свойство каждого объекта – свойство prototype. Опишем в функции действие, которое умеет делать большинство людей и так редко, за день, делают многие программисты – ходьба. Наша функция walk, возвращает имя созданного объекта и конкатенирует со строкой ‘is walking’.
А как же с функциями? И к тому же функциями, которые необходимы в каждом новом объекте ?
Чтобы создать такую функцию, необходимо добавить ее в прототип модели. Таким образом, она будет доступна для любого созданного объекта. Используем нативное свойство каждого объекта – свойство prototype. Опишем в функции действие, которое умеет делать большинство людей и так редко, за день, делают многие программисты – ходьба. Наша функция walk, возвращает имя созданного объекта и конкатенирует со строкой ‘is walking’.
Person.prototype.walk = function() {
return this.name + 'is walking';
};Результат, не заставляет себя ждать. Nick is walking.
Ну что же, сегодня мы рассмотрели понятие модели. Узнали как создавать ее на голом javascript. А так же поняли, что функции или свойства, которые должны быть в каждом созданном объекте следует добавлять к прототипу модели.
Надеюсь вам понравилось. В следующем уроке Дмитрий расскажет вам, как делать тоже самое, но уже на Backbone. Будет интересно! Оставайтесь с нами!
Ну что же, сегодня мы рассмотрели понятие модели. Узнали как создавать ее на голом javascript. А так же поняли, что функции или свойства, которые должны быть в каждом созданном объекте следует добавлять к прототипу модели.
Надеюсь вам понравилось. В следующем уроке Дмитрий расскажет вам, как делать тоже самое, но уже на Backbone. Будет интересно! Оставайтесь с нами!
Источник
