浅谈前端组合模式
说说前端最简单的组合模式
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();
推荐阅读
- Jsr303做前端数据校验
- 21天|21天|羊多多组合《书都不会读,你还想成功》
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- 2018-08-29|2018-08-29 - 草稿 - 草稿
- 性能测试中QPS和TPS的区别
- R语言|R语言 函数
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- 浅谈教育与医学之本质和医学生培养之三观