Bridge Pattern (ok)

https://app.gitbook.com/@javascriptuse/s/advanced/chem-gio-ve-javascript-design-pattern-part-3

Nếu bạn muốn lập trình JS theo hướng sự kiện, event-driven programming, hoặc xây dựng JavaScript API, pattern này khác hữu dụng, khiến code của bạn gọn nhẹ, dễ bảo trì Dưới đây là 1 số ví dụ về Bridge Pattern Event Listeners Khi lập trình xử lý sự kiện, bạn quen thuộc với các hàm callback. Ví dụ, như user click vào 1 nút thì 1 hàm sẽ được gọi

addEvent(element, 'click', getBeerById);
function getBeerById(e) {
  var id = this.id;
  asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
    // Callback response.
    console.log('Requested Beer: ' + resp.responseText);
  });
}

Với cách code như trên, event object sẽ được pass vào method getBeerById, object ở đây có thể là 1 nút, 1 text box trên web page mà user click vào. Sau đó method này sẽ lấy thuộc tính id của object để xử lý tiếp. Tuy nhiên nếu như object không có thuộc tính id sẽ gây lỗi, cách truyền tham số trên không optimize, ngoài ra bạn sẽ gặp khó khăn trong việc lấy kết quả trả về khi gọi method trên trong chương trình của bạn. Dưới đây là cách cải tiến, truyền thẳng id vào method, kết quả trả về qua hàm callback

addEvent(element, 'click', getBeerById);
function getBeerById(e) {
  var id = this.id;
  asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
    // Callback response.
    console.log('Requested Beer: ' + resp.responseText);
  });
}
// ====
function getBeerById(id, callback) {
  // Make request for beer by ID, then return the beer data.
  asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
    // callback response
    callback(resp.responseText);
  });
}

Cách code trên thì bạn có thể gọi API getBeerById ở bất kì đâu như ở dưới

getBeerById(this.id, function(beer) {
  console.log('Requested Beer: ' + beer);
});