Шаблон JS singleton "Шаблон проектирования JavaScript и практика разработки" заметки для чтения

JavaScript

В этой статье отражены только мои текущие ощущения от чтения «Шаблоны проектирования и практика разработки JavaScript», и я благодарю автора за написание такой хорошей книги. Если есть какие-либо нарушения или ошибки, пожалуйста, свяжитесь со мной: luogao_lg@sina.com для обработки.

Эта глава научила меня тому, что ядром шаблона singleton является:Гарантирует наличие только одного экземпляра класса и предоставляет к нему глобальную точку доступа. Однако одноэлементный режим в JavaScript отличается от применения в традиционных объектно-ориентированных языках.Ленивый одноэлементный режим имеет множество применений в реальной разработке, например, для повышения производительности страницы и предотвращения ненужных операций с DOM.

Почему одноэлементный шаблон

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

Реализовать простой одноэлементный шаблон

Следующий код взят из книги

var CreateDiv = (function(html) {
    var instance
    var CreateDiv = function() {
        if (instance) {
            return instance
        }
        this.html = html
        this.init()
        return instance = this
    }
    CreateDiv.prototype.init = function() {
        var div = document.createElement('div')
        div.innerHTML = this.html
        document.appendChild(div)
    }
    return CreateDiv
})()

Приведенный выше код инкапсулирует экземпляр с самовыполняющимися функциями и замыканиями. и возвращает истинуSingletonСпособ построения.

Найдено, соблюдая приведенный выше кодCreateDivВыполняются две операции:

  • 1. Создайте объект и выполнитеinitметод.
  • 2. Убедитесь, что только один объект. Здесь выставляет проблему.

Если однажды нам понадобится использовать этот метод для создания дополнительных элементов на странице. Тогда мы должны переписатьCreateDiv, если мы объединим "Принцип единой ответственности", мы знаем, что нам нужно изменить операцию, гарантирующую наличие только одного объекта изCreateDivВытаскивать. Эта цель может быть достигнута по доверенности.

Одноременный вариант осуществления агент

Сначала мы помещаем приведенный выше кодCreateDivМетод переписан в класс, который отвечает только за создание DIV

var CreateDiv = function(html) {
    this.html = html
    this.init()
}

CreateDiv.prototype.init = function() {
    var div = document.createElement('div')
    div.innerHTML = this.html
    document.appendChild(div)
}

Затем введите прокси-класс

var ProxysingletonCreateDiv = (function() {
    var instance
    return function(html) {
        if (!instance) {
            instance = new CreateDiv(html)
        }
        return instance
    }
})()
var a = new ProxysingletonCreateDiv('test1')
var b = new ProxysingletonCreateDiv('test2')

alert(a === b) // true

До сих пор одноэлементный шаблон был реализован с использованием прокси-класса. Но пока что обсуждаемый нами одноэлементный шаблон близок к реализации в традиционных объектно-ориентированных языках. Далее давайте взглянем на шаблон singleton в JavaScript.

Паттерн Singleton в JavaScript — Lazy Singleton

После понимания некоторых методов реализации одноэлементного шаблона. Мы можем взглянуть на реализацию ленивого синглтона, который очень удобен в реальном программировании на JavaScript.

ленивый синглтон

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

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

<html>
    <body>
        <button id="loginBtn">登录</button>
    </body>
    <script>
        var createLoginLayer = (function() {
            var div
            return function() {
                if (!div) {
                    var div = document.createElement('div')
                    div.innerHTML = '我是登录弹窗'
                    div.style.display = 'none'
                    document.appendChild(div)
                }
                return div
            }
        })()
        document.getElementById('loginBtn').onclick = function() {
            var loginLayer = createLoginLayer()
            loginLayer.style.display = 'block'
        }
    </script>
</html>

Выше мы реализовали всплывающее окно режима singleton. Но мы все еще можем выделить операцию, которая управляет только одним объектом, и давайте реализуем общий ленивый синглтон.

Общий ленивый синглтон

Реализация универсального ленивого синглтона заключается в том, чтобы абстрагироваться от всех одноэлементных шаблонов и управлять только одним объектом. Итак, давайте посмотрим, как выглядит абстрагирование операции управления только одним объектом:

var obj 
if (!obj) {
    obj = xxx
}

Таким образом, логика этой операции может быть заключена вgetSinglefunction, а затем передайте функцию, которую нужно выполнить, в качестве параметра:

var getSingle = function(fn) {
    var result
    return function() {
        result || (result = fn.apply(this, arguments))
    }
}

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

var createLoginLayer = function() {
    var div = document.createElement('div')
    div.innerHTML = '我是登录弹窗'
    div.style.display = 'none'
    document.appendChild(div)
    return div
}

var createSingleLoginLayer = getsingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    var loginLayer = createSingleLoginLayer()
    loginLayer.style.display = 'block'
}

На данный момент мы достиглиgetSingleчтобы помочь нам достичь цели иметь только один объект-экземпляр и разделить обвинения, которые должны быть сделаны объектом-экземпляром, и эти два метода не мешают друг другу.

наконец

Оригинал изRoy's Blog

Ссылаться на

«Шаблоны проектирования JavaScript и практика разработки» — Цзэн Тан

Категории