浅谈前端组合模式

说说前端最简单的组合模式

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();