Паттерны проектирования — Кто не сталкивался с несколькими одноэлементными паттернами (1)

Шаблоны проектирования
Паттерны проектирования — Кто не сталкивался с несколькими одноэлементными паттернами (1)

1. Что такое одноэлементный шаблон

Определение шаблона singleton состоит в том, чтобы гарантировать наличие только одного экземпляра класса и предоставить к нему глобальную точку доступа.

Есть некоторые объекты, такие как пул потоков/глобальный кеш/в браузереwindowОбъекты и так далее, нам просто нужен экземпляр. Следующее будет представлено в соответствии с реальной сценой.

Во-вторых, реальная сцена

1. Плавающее окно входа в систему

Когда мы нажимаем кнопку входа, на странице появляется плавающее окно входа, и это плавающее окно входа уникально, независимо от того, сколько раз мы нажимаем кнопку входа, это плавающее окно будет создано только один раз, затем это плавающее окно входа. Для создания подходит использование шаблона singleton.

1.1 Традиционная практика

Традиционный метод заключается в создании плавающего окна входа в систему при загрузке страницы. Когда пользователь нажимает кнопку входа, отображается плавающее окно входа. Код реализации выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
  
	<button id="loginBtn">登录</button>
	<script type="text/javascript" src="index.js">
		
	</script>
            
</body> 
 
</html>

var loginLayer = (() => {
	let div = document.createElement('div')
	div.innerHTML = '我是登录弹窗'
	div.style.display = 'none'

	document.body.appendChild(div)

	return div
})()

document.getElementById('loginBtn').onclick = () => {
	loginLayer.style.display = 'block'
}

Адрес источника

Приведенный выше код имеет следующие недостатки:

  1. В случае отсутствия входа в систему также будет добавлено окно входа.DOMNode, пустая трата производительности.

Теперь оптимизируйте его и измените код, чтобы добавить новое окно входа только после того, как пользователь нажмет кнопку входа.DOMузел.

код показывает, как показано ниже:

var createLoginLayer = () => {
	let div = document.createElement('div')
	div.innerHTML = '我是登录弹窗'
	div.style.display = 'none'

	document.body.appendChild(div)

	return div
}

document.getElementById('loginBtn').onclick = () => {
	const loginLayer = createLoginLayer()
	loginLayer.style.display = 'block'
}

Адрес источника

Приведенный выше код также имеет следующие недостатки:

  1. Каждый раз, когда нажимается кнопка входа в систему, будет создаваться окно входа в систему, которое часто создаетсяDOMУзлы еще более расточительны по производительности.

На самом деле нам нужно создать всплывающее окно для входа только один раз.

1.2 Одноэлементный шаблон

Рефакторинг приведенного выше кода с помощью шаблона singleton.

const createLoginLayer = () => {
	const div = document.createElement('div')
	div.innerHTML = '我是登录弹窗'
	div.style.display = 'none'
	console.log(123)

	document.body.appendChild(div)
	return div
}

const createSingle = (function () {
	var instance = {}
	return function (fn) {
		if (!instance[fn.name]) {
			instance[fn.name] = fn.apply(this, arguments)
		}
		return instance[fn.name]
	}
})()

const createIframe = function () {
	const iframe = document.createElement('iframe')
	document.body.appendChild(iframe)
	iframe.style.display = 'none'
	return iframe
}

const createSingleLoginLayer = createSingle(createLoginLayer)
const createSingleIframe = createSingle(createIframe)

document.getElementById('loginBtn').onclick = () => {
	const loginLayer = createSingleLoginLayer
	const iframe = createSingleIframe
	loginLayer.style.display = 'block'
	iframe.style.display = 'block'
}

Адрес источника

После рефакторинга код был оптимизирован следующим образом:

  1. объект экземпляра будет созданcreateLoginLayer / createIframeОбязанности и управление одноэлементными объектамиcreateSingleразделение обязанностей в соответствии с принципом единой ответственности;
  2. Сохраните экземпляр через замыкание и примите решение, независимо от того, сколько раз была нажата кнопка входа в систему,Создайте только один экземпляр всплывающего окна для входа;
  3. Легко расширить, в следующий раз вам нужно будет создать единственный на страницеiframe / scriptПри ожидании других тегов эту логику можно повторно использовать напрямую.

3. Резюме

Одноэлементный шаблон — это простой, но очень практичный шаблон, особенно ленивый одноэлементный метод, когда объекты создаются, когда это необходимо, и создается только один из них. Что еще более удивительно, так это то, что ответственность за создание объектов и управление синглтонами распределяется между двумя разными методами, и комбинация этих двух методов обладает мощью шаблона синглтона.

· Прекрасное прошлое ·

[Шаблоны проектирования - Кто никогда не встречал несколько одноэлементных шаблонов (1)]

【Шаблон проектирования - что такое Happy Planet и что такое шаблон стратегии (2)】

[Шаблон проектирования — это прокси-шаблон (3)]

[Шаблон проектирования — простой и понятный шаблон наблюдателя (4)]

[Режим дизайна - нет, нет, есть еще люди, которые не знают режим декоратора (5)]

Категории