По мере того, как программы JavaScript становятся все более и более сложными, им часто требуется команда для развития в сотрудничестве, и модуляризация кода и организационных спецификаций становится чрезвычайно важной. Паттерн MVC является классической моделью организации кода.
(… Введение в MVC.)
(1) Модель
Модель представляет уровень данных, то есть источник данных, требуемый программой, и обычно представлен в формате JSON.
(2) Просмотр
View представляет уровень презентации, который является пользовательским интерфейсом. Для веб -страниц это HTML -код веб -страницы, который можно увидеть пользователями.
(3) контроллер
Контроллер представляет контрольный уровень, используемый для обработки исходных данных (модель) и передачи его в представление.
Поскольку веб-программирование отличается от клиентского программирования, основанного на MVC, сообщество JavaScript создало различные варианты Frameworks MVP (Model-Vesentter), MVVM (модель-View-ViewModel) и т. Д. Некоторые люди в совокупности называют все различные способы этого типа Framework MV*.
Преимущество структуры заключается в том, что он организует код разумно, облегчает командную работу и будущее обслуживание, и недостаток заключается в том, что он имеет определенные затраты на обучение и ограничивает вас написать ее.
Загрузка магистрали
Кода -копия выглядит следующим образом:
<script src = "/javascripts/lib/jquery.js"> </script>
<script src = "/javascripts/lib/underscore.js"> </script>
<script src = "/javascripts/lib/backbone.js"> </script>
<script src = "/javascripts/jst.js"> </script>
<script src = "/javascripts/router.js"> </script>
<script src = "/javascripts/init.js"> </script>
Backbone.view
Основное использование
Метод Backbone.view используется для определения класса представления.
Кода -копия выглядит следующим образом:
var appview = backbone.view.extend ({
render: function () {
$ ('main'). Append ('<h1> Title первого уровня </h1>');
}
});
Приведенный выше код определяет Appview класса View с помощью метода Extend Backbone.view. В этом классе есть метод рендеринга, чтобы разместить представление на веб -странице.
При использовании его необходимо создать новый экземпляр класса View, а затем вызовать метод рендеринга через экземпляр, чтобы представление было отображаться на веб -странице.
Кода -копия выглядит следующим образом:
var appview = new appview ();
appview.render ();
Приведенный выше код создает новый экземпляр Encement Appview of appview Class Class, а затем вызовет appview.render, и указанный контент будет отображаться на веб -странице.
При создании нового экземпляра представления вам обычно нужно указать модель.
Кода -копия выглядит следующим образом:
var document = новый документ ({
Модель: Док
});
Инициализировать метод
Представление также может определить метод инициализации. При генерации экземпляра метод будет автоматически вызван для инициализации экземпляра.
Кода -копия выглядит следующим образом:
var appview = backbone.view.extend ({
инициализировать: function () {
this.render ();
},
render: function () {
$ ('main'). Append ('<h1> Title первого уровня </h1>');
}
});
var appview = new appview ();
После того, как приведенный выше код определяет метод инициализации, он устраняет шаг вручную вызов appview.render () после генерации экземпляра.
el attribute, $ el attribute
В дополнение к указанию элемента веб -страницы, связанного с «просмотром» непосредственно в методе рендеринга, вы также можете указать элемент веб -страницы, используя атрибут EL представления.
Кода -копия выглядит следующим образом:
var appview = backbone.view.extend ({
el: $ ('main'),
render: function () {
это. $ el.Append ('<h1> Title первого уровня </h1>');
}
});
Приведенный выше код напрямую связывает элементы веб -страницы с методом рендеринга, и эффект точно такой же. В приведенном выше коде, в дополнение к атрибуту EL, это также атрибут $ EL. Первый представляет указанный элемент DOM, а последний представляет объект jQuery, соответствующий элементу DOM.
Атрибут Tagname, атрибут ClassName
Если атрибут EL не указан, он также может быть указан через атрибут Tagname и атрибут ClassName.
Кода -копия выглядит следующим образом:
var document = backbone.view.extend ({
Tagname: "li",
ClassName: «документ»,
render: function () {
// ...
}
});
Метод шаблона
Свойство шаблона представления используется для указания шаблона веб -страницы.
Кода -копия выглядит следующим образом:
var appview = backbone.view.extend ({
Шаблон: _.template ("<h3> hello < %= who %> <h3>"),
});
В приведенном выше коде функция шаблона библиотеки функций подчеркивания принимает строку шаблона в качестве параметра и возвращает соответствующую функцию шаблона. С помощью этой функции шаблона, до тех пор, пока предоставляется конкретное значение, может быть сгенерирован код веб -страницы.
Кода -копия выглядит следующим образом:
var appview = backbone.view.extend ({
el: $ ('#inceply'),
Шаблон: _.template ("<h3> hello < %= who %> <h3>"),
инициализировать: function () {
this.render ();
},
render: function () {
это. $ el.html (this.template ({who: 'world!'}));
}
});
Рендеринг приведенного выше кода вызывает метод шаблона для создания конкретного кода веб -страницы.
В практических приложениях шаблоны обычно помещаются в теги сценария. Чтобы предотвратить анализ браузеров в соответствии с кодом JavaScript, атрибут типа устанавливается на текст/шаблон.
Кода -копия выглядит следующим образом:
<script type = "text/template" data-name = "templateName">
<!-Содержимое шаблона иди сюда->
</script>
Вы можете использовать следующий код для составления шаблона.
Кода -копия выглядит следующим образом:
window.templates = {};
var $ sources = $ ('script [type = "text/template"]');
$ sources.empore (function (index, el) {
var $ el = $ (el);
шаблоны [$ el.data ('name')] = _.template ($ el.html ());
});
Атрибут событий
Атрибут событий используется для указания события представления и соответствующих функций обработки.
Кода -копия выглядит следующим образом:
var document = backbone.view.extend ({
события: {
"Нажмите .icon": "Открыть",
"Click .button.edit": "OpenEditDialog",
"Нажмите .button.delete": "уничтожить"
}
});
Один из вышеперечисленных кодов определяет событие Click трех селекторов CSS и его соответствующие три функции обработки.
Метод ListEnto
Метод ListEnto используется для указания функции обратного вызова для конкретного события.
Кода -копия выглядит следующим образом:
var document = backbone.view.extend ({
инициализировать: function () {
this.ListEnto (this.Model, «изменение», this.Render);
}
});
Приведенный выше код является событием изменения модели, а функция обратного вызова указана как рендеринг.
Удалить метод
Метод удаления используется для удаления вида.
Кода -копия выглядит следующим образом:
UpdateView: function () {
view.remove ();
view.render ();
};
Подвеска
Вид ребенка может быть вызван в родительском взгляде. Ниже приведен способ написания.
Кода -копия выглядит следующим образом:
render: function () {
это. $ el.html (this.template ());
this.child = new Child ();
this.child.appendto ($. ('.. Контейнер-держатель'). render ();
}
Backbone.Router
Маршрутизатор - это объект маршрутизации, предоставляемый Backbone, который используется для соответствия URL -адресу, запрашиваемому пользователем с функцией обработки бэкэнд один за другим.
Во -первых, определяется новый класс маршрутизатора.
Кода -копия выглядит следующим образом:
Router = backbone.router.extend ({
Маршруты: {
}
});
маршруты атрибут
Самая важная вещь в основе. Разобравшийся объект - это свойство маршрутов. Он используется для установки метода обработки пути.
Атрибут маршрутов является объектом, и каждый его член представляет правило обработки пути. Ключевое имя - это правило пути, а значение ключа - это метод обработки.
Если имя ключа является пустой строкой, оно представляет путь к корне.
Кода -копия выглядит следующим образом:
Маршруты: {
'': 'Phonesindex',
},
phonesindex: function () {
new PhonesIndexView ({el: 'Раздел#main'});
}
Звездочка представляет любой путь, и вы можете установить параметры пути для захвата конкретных значений пути.
Кода -копия выглядит следующим образом:
var Approuter = backbone.router.extend ({
Маршруты: {
"*Действия": "Defaultroute"
}
});
var app_router = new Assuster;
app_router.on ('route: defaultroute', function (actions) {
console.log (действия);
})
В приведенном выше коде параметры, лежащих в основе корневого пути, будут захвачены, и функция обратного вызова будет передана.
Как написать правила пути.
Кода -копия выглядит следующим образом:
var myrouter = backbone.router.extend ({
Маршруты: {
«Помогите»: «Помогите»,
«Поиск/: запрос»: «Поиск»
},
помощь: function () {
...
},
Поиск: функция (запрос) {
...
}
});
Маршруты: {
"Help/: Page": "Помогите",
"Скачать/*path": "Скачать",
"Папка/: имя": "OpenFolder",
"Папка/: name-: mode": "OpenFolder"
}
router.on ("route: help", function (page) {
...
});
BACKBONE.History
После настройки маршрутизатора вы можете запустить приложение. Объект Backbone.history используется для мониторинга изменений в URL -адресах.
Кода -копия выглядит следующим образом:
App = new Router ();
$ (document) .ready (function () {
Backbone.history.start ({pushstate: true});
});
Откройте метод pushstate. Если приложение не находится в корневом каталоге, вам необходимо указать корневой каталог.
Кода -копия выглядит следующим образом:
Backbone.history.start ({pushstate: true, root: "/public/search/"})
Backbone.Model
Модель представляет единый объект объекта.
Кода -копия выглядит следующим образом:
var user = backbone.model.extend ({
по умолчанию: {
имя: '',
электронная почта: ''
}
});
var user = new user ();
Приведенный выше код использует метод Extend для генерации пользовательского класса, который представляет шаблон модели. Затем используйте новую команду для генерации экземпляра модели. Атрибут по умолчанию используется для установки атрибута по умолчанию. Приведенный выше код указывает на то, что пользовательский объект имеет два атрибута имени и электронную почту по умолчанию, а его значения равны пустой строке.
При генерации экземпляра вы можете предоставить конкретные значения для каждого атрибута.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({
ID: 1,
Имя: «Имя»,
Электронная почта: '[email protected]'
});
Приведенный выше код предоставляет конкретные значения каждого атрибута при генерации экземпляра.
атрибут Idattribute
Модельные экземпляры должны иметь свойство, которое служит основным ключом для различения других экземпляров. Имя этого атрибута устанавливается атрибутом IdatTribute и обычно устанавливается на ID.
Кода -копия выглядит следующим образом:
var music = backbone.model.extend ({
Idattribute: 'id'
});
Получить метод
Метод GET используется для возврата значения определенного свойства экземпляра модели.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({name: "name", возраст: 24});
var age = user.get ("age"); // 24
var name = user.get ("name"); // "имя"
Установить метод
Метод SET используется для установки значения определенного свойства экземпляра модели.
Кода -копия выглядит следующим образом:
var user = backbone.model.extend ({
купить: function (newcarsname) {
this.set ({car: newcarsname});
}
});
var user = новый пользователь ({name: 'bmw', model: 'i8', type: 'car'});
user.buy ('porsche');
var car = user.get ("car"); // 'porsche'
на методе
Метод ON используется для прослушивания изменений в объектах.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({name: 'bmw', model: 'i8'});
user.on ("изменение: name", function (model) {
var name = model.get ("name"); // "Porsche"
console.log ("Изменил имя моей машины на" + name);
});
user.set ({name: 'porsche'});
// изменил имя моей машины на Porsche
Метод ON в приведенном выше коде используется для прослушивания событий, а «изменение: имя» означает, что атрибут имени изменился.
Урлрут атрибуты
Это свойство используется для указания пути для работы на модели на стороне сервера.
Кода -копия выглядит следующим образом:
var user = backbone.model.extend ({
urlroot: '/user'
});
Приведенный выше код указывает, что путь к серверу, соответствующий модели, является /пользователем.
Событие
Событие Fetch используется для извлечения модели с сервера.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({id: 1});
user.fetch ({
Успех: функция (пользователь) {
console.log (user.tojson ());
}
})
В приведенном выше коде экземпляр пользователя содержит атрибут идентификатора (значение 1). Метод FETCH использует HTTP -глагол, чтобы выпустить запрос на URL «/user/1» и извлекает экземпляр с сервера.
Сохранить метод
Метод сохранения используется для уведомления сервера для создания или обновления модели.
Если экземпляр модели не содержит атрибута идентификатора, метод сохранения создаст экземпляр, используя метод POST.
Кода -копия выглядит следующим образом:
var user = backbone.model.extend ({
urlroot: '/user'
});
var user = new user ();
var userdetails = {
Имя: «Имя»,
Электронная почта: '[email protected]'
};
user.save (userdetails, {
Успех: функция (пользователь) {
console.log (user.tojson ());
}
})
Приведенный выше код сначала указывает, что соответствующий URL -адрес модели является /пользователь в классе, затем создает новый экземпляр и, наконец, вызовет метод сохранения. У него есть два параметра. Первый - это конкретный атрибут объекта экземпляра, а второй - это объект функции обратного вызова, который устанавливает функцию обратного вызова для события успеха (успешно сохранить). В частности, метод сохранения выпустит запрос на сообщение /пользователь и предоставит {name: 'name', email: '[email protected]'} в качестве данных.
Если экземпляр модели содержит атрибут идентификатора, метод сохранения будет обновлять экземпляр, используя метод PUT.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({
ID: 1,
Имя: 'Zhang San',
Электронная почта: '[email protected]'
});
user.save ({name: 'li si'}, {
Успех: функция (модель) {
console.log (user.tojson ());
}
});
В приведенном выше коде экземпляр объекта содержит атрибут идентификатора (значение 1), сохранение будет использовать метод PUT для выполнения запроса в URL «/user/1» для обновления экземпляра.
уничтожить метод
Метод уничтожения используется для удаления экземпляра на сервере.
Кода -копия выглядит следующим образом:
var user = новый пользователь ({
ID: 1,
Имя: «Имя»,
Электронная почта: '[email protected]'
});
user.destroy ({
Успех: function () {
console.log ('уничтожен');
}
});
Метод уничтожения в приведенном выше коде будет использовать HTTP -глагол Delete для выпуска запроса на URL «/user/1» и удалить соответствующий экземпляр модели.
Backbone.collection
Коллекция - это коллекция моделей того же типа. Например, модель - это животное, коллекция - зоопарк; Модель - это один человек, коллекция - это компания.
Кода -копия выглядит следующим образом:
var song = backbone.model.extend ({});
var Album = backbone.collection.extend ({
Модель: песня
});
В приведенном выше коде Song Is Model, Album is Collection, а альбом имеет модельный атрибут, равный Song, так что это означает, что альбом - это коллекция песни.
Добавить метод, удалить метод
Экземпляр модели может быть помещен непосредственно в экземпляр сбора или добавлен с использованием метода добавления.
Кода -копия выглядит следующим образом:
var song1 = новая песня ({id: 1, name: "Песня название 1", исполнитель: "Zhang San"});
var song2 = новая музыка ({id: 2, name: "Название песни 2", артист: "li si"});
var myalbum = новый альбом ([Song1, Song2]);
var song3 = новая музыка ({id: 3, name: "Название песни 3", исполнитель: "Zhao Wu"});
myalbum.add (song3);
Метод удаления используется для удаления экземпляра модели из экземпляра сбора.
Кода -копия выглядит следующим образом:
myalbum.remove (1);
Приведенный выше код показывает, что параметром метода удаления является атрибут ID экземпляра модели.
Получить метод набора методов
Метод GET используется для получения экземпляра модели указанного идентификатора из коллекции.
Кода -копия выглядит следующим образом:
myalbum.get (2))
Метод извлечения
Метод Fetch используется для извлечения данных сбора с сервера.
Кода -копия выглядит следующим образом:
var songs = new Backbone.collection;
songs.url = '/songs';
songs.fetch ();
Backbone.Events
Кода -копия выглядит следующим образом:
var obj = {};
_.extend (obj, backbone.events);
obj.on ("show-message", function (msg) {
$ ('#display'). Text (msg);
});
obj.trigger ("Show-Message", "Hello World");