Structural design pattern

Structural design patterns focus on how to combine classes or objects into larger and more complex knot structures to simplify design

1, Appearance mode

Appearance mode: it provides a more advanced unified interface for a group of complex subsystem interfaces, which makes the results of the subsystem easier to access
emm, the first thing I think of here is the front-end encapsulation of axios, and the api interface of a role or function is written in a js file separately, and the file can be directly referenced when calling.

1.1. Introduction: add a click event

Code example

document.onclick = function (e) {
	e.preventDefault()
	if (e.target !== document.getElementById('myinput')){
		hidePageAlert()
	}
}

function hidePageAlert(){}

Question 1: onclick is a DOM 0 element. When others bind methods for document, the original methods will be overwritten.
Question 2: for question 1, the method addEventListener provided by the DOM2 level event handler should be used. However, browser compatibility needs to be considered here
Question 3: e.preventDefault() and e.target() also need to consider compatibility

1.2 compatibility mode

event processing

// Appearance mode implements event handling
function addEvent(dom,type,fn) {
	// For browsers that support the addEventListener method of DOM2 level event handlers
	if (dom.addEventListener){
		dom.addEventListener(type,fn,false)
	}
	// For browsers that support attachEvents
	else if (dom.attachEvents){
		dom.attachEvents('on' + type,fn)
	}
	// For, addEvent... And attach... Are not supported, but on + 'event name' is supported
	else {
		dom['on'+type]=fn
	}
}

e.target and e.preventDefault, etc

//Get event object
var getEvent = function (event){
	// Under IE is window.event
	return event || window.event
}

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

var preventDefault = function (event) {
	var event = getEvent(event)
	if (event.preventDefault()) {
		event.preventDefault()
	}	else{
		event.returnValue = false
	}
}

2, Adapter mode

Adapter mode: convert the interface of one class (object) into another interface, so that the incompatibility of interfaces between classes can be solved through the adapter

2.1 adapting heterogeneous frameworks

A frame code

var A = A || {}
a.g = function (id) {
	return document.getElementById(id)
}


A.on = function (id,type,fn){
	var dom = typeof id === 'string' ? this.g(id) : id
	if (dom.addEventListener) {
		dom.addEventListener(type, fn, false)
	}
	else if (dom.attachEvents) {
		dom.attachEvents('on' + type, fn)
	}
	else {
		dom['on' + type] = fn
	}
}

Adapting jquery

A.g = function (id) {
	return $(id).get(0)
}

A.on = function (id, type, fn) {
	var dom = typeof id === 'string' ? $('#' + id) : $id
	dom.on(type,fn)
}

2.2 parameter adapter

Purpose 1: if the method needs to pass multiple parameters, it can be passed in as a parameter object
Purpose 2: when calling, I don't know whether the passed parameters are complete. At this time, the adapter can be used to adapt the incoming object

// Adapt incoming objects
function doSomeThing(obj) {
	var _adapter = {
		name:'wjyGrit',
		title:'Design pattern',
		age:19,
		color:'blue',
		size:100,
		prize:50
	}
	for (var i in _adapter){
		_adapter[i] = obj[i] || _adapter[i]
	}
	// do things
}

Decorator mode [God]

The decorator mode can make the original object meet the more complex requirements of application by packaging and expanding it without changing the original object
Requirements: add some requirements to the user information input box. You need to change more than one, but you still don't change the original functions. If you change one by one, it's not very good

Code display
In this way, whether the input box is bound with an input event or not, the requirements can be easily completed, and it is also convenient to change later

var decorator = function (input, fn) {
	var input = document.getElementById(input) //Get event source
	// If the event source has bound the event [you can do this!!!]
	if (typeof input.onclick === 'function') {
		// Cache the original callback function of the event source
		var oldClickFn = input.onclick
		// Define a new event for the event source
		input.onclick = function () {
			// Event source callback function
			oldClickFn()
			fn(0)
		}
	} else {
		// The event source is not bound to an event. Add a new callback function directly for the event source
		input.onclick = fn
	}
	//others
}


decorator('tel_input',function () {
	document.getElementById('tel_demo_text').style.display = 'none'
})