Главная страница   /   16.1. Рассматриваем пример рефакторинга (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

16.1. Рассматриваем пример рефакторинга

В главе 11 я использовал базовые возможности jQuery, чтобы сделать рефакторинг примера, включая DOM манипуляции, эффекты и события. В листинге 16-1 показан документ, которым мы закончили. Он станет отправной точкой для этой главы, когда вы будете интегрировать сюда возможности из этой части книги.

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

Листинг 16-1: Отправная точка для этой главы
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<style type="text/css">
		a.arrowButton {
			background-image: url(leftarrows.png);
			float: left;
			margin-top: 15px;
			display: block;
			width: 50px;
			height: 50px;
		}

		#right {
			background-image: url(rightarrows.png);
		}

		h1 {
			min-width: 0px;
			width: 95%;
		}

		#oblock {
			float: left;
			display: inline;
			border: thin black solid;
		}

		form {
			margin-left: auto;
			margin-right: auto;
			width: 885px;
		}

		#bbox {
			clear: left;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function () {
			var fNames = ["Carnation", "Lily", "Orchid"];
			var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
			var fTemplate = $('<div class=dcell><img/><label/><input/></div>');
			for (var i = 0; i < fNames.length; i++) {
				fTemplate.clone().appendTo(fRow).children()
				.filter('img').attr('src', fNames[i] + ".png").end()
				.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
				.filter('input').attr({
					name: fNames[i],
					value: 0, required: "required"
				})
			}
			$('<a id=left></a><a id=right></a>').prependTo('form')
			.addClass("arrowButton").click(handleArrowPress).hover(handleArrowMouse);
			$('#right').appendTo('form');
			$('#row2, #row3').hide();
			var total = $('#buttonDiv')
			.prepend("<div>Total Items: <span id=total>0</span></div>")
			.css({ clear: "both", padding: "5px" });
			$('<div id=bbox />').appendTo("body").append(total);
			$('input').change(function (e) {
				var total = 0;
				$('input').each(function (index, elem) {
					total += Number($(elem).val());
				});
				$('#total').text(total);
			});
			function handleArrowMouse(e) {
				var propValue = e.type == "mouseenter" ? "-50px 0px" : "0px 0px";
				$(this).css("background-position", propValue);
			}
			function handleArrowPress(e) {
				var elemSequence = ["row1", "row2", "row3"];
				var visibleRow = $('div.drow:visible');
				var visibleRowIndex = jQuery.inArray(visibleRow.attr("id"), elemSequence);
				var targetRowIndex;
				if (e.target.id == "left") {
					targetRowIndex = visibleRowIndex - 1;
					if (targetRowIndex < 0) { targetRowIndex = elemSequence.length - 1 };
				} else {
					targetRowIndex = (visibleRowIndex + 1) % elemSequence.length;
				}
				visibleRow.fadeOut("fast", function () {
					$('#' + elemSequence[targetRowIndex]).fadeIn("fast")
				});
			}
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post" action="http://node.jacquisflowershop.com/order">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" />
					</div>
					<div class="dcell">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" />
					</div>
					<div class="dcell">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" />
					</div>
				</div>
				<div id="row2" class="drow">
					<div class="dcell">
						<img src="peony.png" /><label for="peony">Peony:</label>
						<input name="peony" value="0" />
					</div>
					<div class="dcell">
						<img src="primula.png" /><label for="primula">Primula:</label>
						<input name="primula" value="0" />
					</div>
					<div class="dcell">
						<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
						<input name="snowdrop" value="0" />
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Это не совсем тот же документ, как в главе 11. Я скорректировал много CSS дополнений, добавив элемент style, вместо того чтобы использовать метод css для отдельных выборок. Вы можете посмотреть, как выглядит этот документ, на рисунке 16-1, и конечно, пример из главы 11 претерпевает ряд изменений, которые я применил к документу, чтобы это получилось.

Рисунок 16-1: Отправная точка для примера документа этой главы