Міністерство освіти і науки України
НУ »Львівська політехніка»
Звіт 3
З дисципліни: Архітектура проектування ПЗ
Розробив:
Група ПІм-41з
Перевірив:
Климаш Т.С.
м. Хмельницький
2012
Тема: реалізація MVC моделі на платформі Doc Net.
Мета: навчитись реалізовувати MVC модель на платформі Doc Net.
У класичній реалізації MVC основні принципи такі: слабке зв'язування. Модель нічого не знає ні про кого. Модель розсилає оповіщення, які може слухати, наприклад, Вид, якщо хоче. Вид знає про модель але не може її змінювати, вид може маніпулювати контролером. Контролер знає про Моделі і може її змінювати, а також знає про Вид (або видах) і може його (їх) міняти. В даному випадку відмінності наступні:Модель нічого не знає ні про кого. Може розсилати оповіщенняВид знає тільки про моделі Контролер знає і про Вид і про Моделі.
Завдання: створити найпростішу інтерактивну сторінку - список значень, і дві кнопки - додавання та видалення значень. Традиційний підхід досить простий - створюємо html файл. Для списку використовується select, для маніпуляцій - button. В атрибуті onClick у кнопок прописуємо виклик JavaScript функції. Для видалення значення з select звертаємося до DOM об'єкту select, запитуємо властивість selectedIndex і видаляємо відповідний об'єкт.
<html><head><script>
// <![CDATA[
function addItem (value) {
if (!value) {
return;
}
var myselect = document.getElementById('myselect');
var newoption = myselect.appendChild(document.createElement('option'));
newoption.value = value;
newoption.innerHTML=value;
}
function removeCurrentItem () {
var myselect = document.getElementById('myselect');
if (myselect.selectedIndex === -1) {
return;
}
var selectedOption = myselect.options[myselect.selectedIndex];
selectedOption.parentNode.removeChild(selectedOption);
}
// ]]>
</script>
</head>
<body>
<select id="myselect" size="4"></select>
<button onClick="addItem(prompt('enter value'))">+</button>
<button onClick="removeCurrentItem()" />-</button>
</body>
</html>
Все просто і відмінно працює. Навіщо ж потрібно ще щось? Для даного додатка проблем не очікується, однак, за статистикою, власне, написання коду займає близько 25% часу, а інші 75% програміст займається розвитком, підтримкою проекту, додавання нових функцій. І в міру ускладнення програми та збільшення кількості підтримувати код стає все складніше і складніше, кількість багів збільшується.
«Я зроблю через Jquery / Dojo / MooTools / Моя_любимая_аякс_библиотека». Наприклад так:
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function(){
$('#plus').bind('click', function(){
var value = prompt('add value');
if (!value) {
return;
}
$('<option>').html(value).appendTo($('#myselect'));
});
$('#minus').bind('click', function(){
var myselect = $('#myselect');
if (myselect.attr('selectedIndex') === -1) {
return;
}
myselect.children().remove(':selected');
});
});
// ]]>
</script>
</head>
<body>
<select id="myselect" size="4"></select>
<button id="plus">+</button>
<button id="minus"/>-</button>
</body>
</html>
Стало ще краще, код став більш компактний і він виглядає дуже круто. Однак це не вирішило основну проблему: дані (список) зберігається всередині користувальницького інтерфейсу, всередині html елемента select. Другий недолік - у нас мішанина з html і javascript коду. Незважаючи на простоту, він погано розвивається. До прикладу до нас підходить начальник і говорить найпростішу прохання: «хочу щоб кнопка 'мінус' з'являлася тільки коли щось виділено в списку.». Відразу у вас, як у програміста, виникає питання: де робити це зміна - в html або в JavaScript. «Хм, мабуть вимкну кнопку в html" - скажете ви. А ваш колега, поки ви у відпустці, зробить схожу операцію всередині JavaScript. Виходить що, здавалося б, проста зміна починає дуже сильно заплутувати код, цього хотілося б уникнути.
Висновок: на лабораторній роботі навчились реалізовувати MVC модель на платформі Doc Net.