JS appearance mode

JS appearance mode

1 Introduction

Appearance mode (Facade) subsystem provides a set of interfaces in a consistent interface, this module defines a high-level interface that is worth the subsystem easier to use. Appearance mode is often used in JS to solve browser compatibility issues.

2. Realization

The appearance mode not only simplifies the interface in the class, but also decouples the interface and the caller. Appearance mode is often considered necessary for developers. It can encapsulate some complex operations and create a simple interface for invocation. The appearance mode is often used in JavaScript class libraries, through which some interfaces are encapsulated for compatibility with multiple browsers. The appearance mode allows us to indirectly call the subsystem, thereby avoiding unnecessary errors due to direct access to the subsystem.

The advantage of the appearance mode is that it is easy to use, and it is also relatively lightweight. But there are also shortcomings when the appearance mode is continuously used by developers, which will cause certain performance problems, because the usability of the function must be checked every time it is called. The following is a piece of unoptimized code. We used the appearance mode to create a cross-browser usage method by detecting browser characteristics.

For example, documentadd to the objectclick , when event :

function addEvent(dom, type, fn) {
  if (dom.addEventListener) {//Browsers that support DOM2 event processing methods
    dom.addEventListener(type, fn, false)
  } else if (dom.attachEvent) {//Does not support DOM2 level but supports attachEvent
    dom.attachEvent('on' + type, fn)
  } else {
    dom['on' + type] = fn//browsers that are not supported
  }
}

const myInput = document.getElementById('myinput')
addEvent(myInput,'click', function() {console.log('Binding click event')})

It can also be used to solve some other browser compatibility issues:

const getEvent = function(event) {//Get event object
  return event || window.event//window.event under IE
}

const getTarget = function(event) {//Get event element
  const event = getEvent(event)
  return event.target || event.srcElement//event.srcElement under IE
}

const preventDefault = function(event) {//prevent the default event
  const event = getEvent(event)
  if (event.preventDefault) {event.preventDefault()}
  else {event.returnValue = false}//under IE
}

const cancelBubble = function(event) {
  const event = getEvent(event)
  if (event.stopPropagation) {event.stopPropagation()}
  else {event.cancelBubble = true}//under IE
}

document.onclick = function(e) {
  preventDefault(e)
  if (getTarget(e) !== document.getElementById('myinput')) {console.log('hehe')}
}

3. Summary

So when to use appearance mode? Generally speaking, there are three stages:

  1. In the initial design stage, the two different layers should be consciously separated, such as the classic three-tier structure, and the facade should be established between the data access layer and the business logic layer, and the business logic layer and the presentation layer.
  2. In the development stage, subsystems often become more and more complex due to continuous reconstruction and evolution. Increasing the facade can provide a simple interface and reduce the dependence between them.
  3. When maintaining a large legacy system, the system may be difficult to maintain. At this time, it Facadeis also very suitable to use the appearance . Develop an appearance Facadeclass for the system to provide a clearer interface for the legacy code with rough design and high complexity. The new system Facadeinteracts Facadewith objects, interacts with all the complex work of the legacy code.

This article is a series of articles, you can refer to each other to confirm and make progress together~

  1. JS abstract factory pattern
  2. JS factory pattern
  3. JS builder mode
  4. JS prototype mode
  5. JS singleton mode
  6. JS callback mode
  7. JS appearance mode
  8. JS adapter mode
  9. JS uses higher-order functions to implement function caching (memo mode)
  10. JS state mode
  11. JS bridge mode
  12. JS observer mode

Most of the posts on the Internet are of different depths, and even some are inconsistent. The articles below are summaries of the learning process. If you find errors, please leave a message to point out~

Reference: Appearance Mode of Design Pattern "Javascript Design Pattern"-Zhang Rongming

Reference: https://cloud.tencent.com/developer/article/1356690 JS Appearance Mode-Cloud + Community-Tencent Cloud