Fourth, there is a function to add the product item to the shopping cart and display the refactoring codeLet's break down the code so that the code can be stored in their own objects. For this reason, we refer to the Event Aggregator theory of martinfowler to process the code so that the objects can communicate with each other.
First, let's implement the Event aggregation function. This function is divided into two parts: one is Event, the code used for Handler callback, and the other is EventAggregator used to subscribe to and publish events. The Code is as follows:
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) { 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); }; }
Then, declare the Product object. The Code is as follows:
function Product(id, description) { this.getId = function () { return id; }; this.getDescription = function () { return description; };}
Then declare the Cart object. In the addItem function of this object, we will trigger the release of an event itemAdded and then pass the item as a parameter.
function Cart(eventAggregator) { var items = []; this.addItem = function (item) { items.push(item); eventAggregator.publish(itemAdded, item); };}
CartController is mainly used to accept cart objects and event aggregators. By subscribing to itemAdded, A li element node is added and added by subscribing to productSelected events.Product.
function CartController(cart, eventAggregator) { eventAggregator.subscribe(itemAdded, function (eventArgs) { var newItem = $('
-
- 'Hangzhou.html (eventArgs. getDescription ()). attr ('Id-cart', eventArgs. getId ()). appendTo (# cart) ;}); eventAggregator. subscribe (productSelected, function (eventArgs) {cart. addItem (eventArgs. product );});}
The purpose of Repository is to obtain data (which can be obtained from ajax) and then expose the get data method.
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; }}
ProductController defines an onProductSelect method, which is mainly used to publish and trigger the productSelected event. forEach is mainly used to bind data to the product list. The Code is as follows:
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.forEach(function (product) { var newItem = $('
-
- 'Your .html (product. getDescription (). attr ('id', product. getId (). dblclick (onProductSelected). appendTo (# products );});}
Finally, declare the anonymous function (make sure that the HTML is fully loaded before this code can be executed, for example, in the ready method of jQuery ):
(function () { var eventAggregator = new EventAggregator(),cart = new Cart(eventAggregator),cartController = new CartController(cart, eventAggregator),productRepository = new ProductRepository(),productController = new ProductController(eventAggregator, productRepository);})();
We can see that the code of the anonymous function is much reduced, mainly because of the instantiation code of an object. In the code, we introduce the concept of Controller, which accepts information and passes it to action, we also introduced the concept of Repository, which is mainly used to process the display of product. The result of refactoring is to write a lot of object declarations, but the advantage is that each object has its own clear responsibilities, this shows the data presentation, and changes the processing set of the processing set, so that the coupling degree is very low.
Final code SummaryLooking at the reconstruction result, some bloggers may ask, is it really necessary to make it so complicated? I can only say: whether or not to do so depends on your project.
If your project is a very small project with less code, there is no need to refactor it so complicated, however, if your project is a very complex and large project, or your small project may grow rapidly in the future, you have to consider the SRP principle for separation of duties in the early stage, this will facilitate future maintenance.