首页 > 代码库 > JAVASCRIPT基础09-购物车(02)
JAVASCRIPT基础09-购物车(02)
<!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=http://www.mamicode.com/"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 onl oad="init();"> <h2>购物车JS</h2><hr style="margin:0 auto;width:600px;"> 产品：<div id="products"></div> <br> 我的购物车:<div id="cart"></div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。