浅谈前端组合模式

说说前端最简单的组合模式 HTML文档的DOM结构就是天生的树形结构,最基本的元素组成DOM树,最终形成DOM文档,非常适用组合模式。
谈谈jquery最简单的一个组合模式

$(".test").addClass("noTest").remove("test");

这句简单的代码就是获取class包含test的元素,然后进行addClass和removeClass处理,其中不论$(“.test”)是一个元素,还是多个元素,最终都是通过统一的addClass和removeClass接口进行调用。
举例说明 【浅谈前端组合模式】场景:假设我们开发一个旅游产品网站,其中包含机票和酒店两种子产品
// 机票订单 function FlightOrder() { } FlightOrder.prototyp.create = function () { console.log("flight order created"); }// 酒店 function HotelOrder() { } HotelOrder.prototype.create = function () { console.log("hotel order created"); }// 总订单 function TotalOrders() { this.orderList = []; }// 添加订单 TotalOrders.prototype.addOrder = function (order) { this.orderList.push(order); } // 创造订单 TotalOrders.prototype.create = function (order) { for (var i = 0, length = this.orderList.length; i < length; i++) { this.orderList[i].create(); } }var orders = new TotalOrders(); orders.addOrder(new FlightOrder()); orders.addOrder(new HotelOrder()); orders.create();

    推荐阅读