浅谈前端组合模式

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,441评论 0 44
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,199评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 第一章 认识jQuery jQuery 能做什么 1. 取得文档中的元素 2. 修改页面的外观 CSS虽然为影响文...
    七弦桐语阅读 492评论 0 1
  • 8月21日作业雨完成情况 作业:应交67人,实交66人(迟交1人,未交1人,围观3人)点评:应交66人,实交65人...
    HahnPRO阅读 244评论 0 1