<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function Event(name) {
var handlers = [];
this.getName = function () {
return name;
};
this.addHandler = function (handler) {
handlers.push(handler);
};
this.removeHandler = function (handler) {
for (var i = 0; i < handlers.length; i++) {
if (handlers[i] == handler) {
handlers.splice(i, 1);
break;
}
}
};
this.fire = function (eventArgs) { //执行事件的处理函数 可以是多个 （案例中都是一个处理函数）
handlers.forEach(function (h) {
// alert(h) ;
h(eventArgs);
});
};
}
function EventAggregator() {
var events = [];
//获取事件
function getEvent(eventName) {
return $.grep(events, function (event) {
return event.getName() === eventName;
})[0];
}
//发布事件
this.publish = function (eventName, eventArgs) {
var event = getEvent(eventName);
if (!event) {
event = new Event(eventName);
events.push(event);
}
event.fire(eventArgs);
};
//订阅事件
this.subscribe = function (eventName, handler) {
var event = getEvent(eventName);
if (!event) {
event = new Event(eventName);
events.push(event);
}
event.addHandler(handler);
};
}
function Product(id, description) {
this.getId = function () {
return id;
};
this.getDescription = function () {
return description;
};
}
function Cart(eventAggregator) {
var items = [];
this.addItem = function (item) {
items.push(item);
eventAggregator.publish("itemAdded", item);
};
}
/**
* 购物车控制器
*/
function CartController(cart, eventAggregator) {
//往事件数据event[]添加了一个itemAdded的事件 事件对应的处理为下面的function
eventAggregator.subscribe("itemAdded", function (eventArgs) {
var newItem = $(‘<li></li>‘).html(eventArgs.getDescription()).attr(‘id-cart‘, eventArgs.getId()).appendTo("#cart");
});
//添加一个 productSelected 事件 事件处理为往购物车中增加一个product
eventAggregator.subscribe("productSelected", function (eventArgs) {
cart.addItem(eventArgs.product);
});
}
function ProductRepository() {
var products = [new Product(1, "Star Wars Lego Ship"),
new Product(2, "Barbie Doll"),
new Product(3, "Remote Control Airplane")];
this.getProducts = function () {
return products;
}
}
function ProductController(eventAggregator, productRepository) {
var products = productRepository.getProducts();
function onProductSelected() {
var productId = $(this).attr(‘id‘);
var product = $.grep(products, function (x) {
return x.getId() == productId;
})[0];
eventAggregator.publish("productSelected", {
product: product
});
}
/**
* 获取到所有的产品以后 添加到products的div中 同时为每个product提供一个双击事件 事件名称为 onProductSelected
* onProductSelected的作用为 调用 事件聚合器中的 publish 方法 该方法会去调用 事件对应的handler 即 cart.addItem(eventArgs.product);
*/
products.forEach(function (product) {
var newItem = $(‘<li></li>‘).html(product.getDescription())
.attr(‘id‘, product.getId())
.dblclick(onProductSelected)
.appendTo("#products");
});
}
function init(){
var eventAggregator = new EventAggregator(), //创建事件聚合器
cart = new Cart(eventAggregator), //创建购物车
cartController = new CartController(cart, eventAggregator), //此时已经有两个事件了
productRepository = new ProductRepository(), //获取products
productController = new ProductController(eventAggregator, productRepository);
}
</script>
</head>
<body onload="init();">
<h2>购物车JS</h2><hr style="margin:0 auto;width:600px;">
产品：<div id="products"></div>
<br>
我的购物车:<div id="cart"></div>
</body>
</html>
JAVASCRIPT基础09-购物车(02),布布扣,bubuko.com
时间： 2024-10-06 11:50:42