JAVASCRIPT基础09-购物车(02)

时间：2014-07-08 00:24:57 阅读：215 评论：0 收藏：0 [点我收藏+]
<!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
标签：des style blog http java color
原文地址：http://www.cnblogs.com/liaokailin/p/3829970.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行