Я хотел бы создать служебный объект / функцию size, которому дан элемент dom myDom и вызываем другую функцию как big или small, чтобы изменить встроенный стиль {{X4} } } .

В настоящее время меня интересует решение для фактической передачи myDom в функцию big или small, чтобы там могла произойти модификация встроенного стиля.

Я хотел бы знать, какой шаблон JS может помочь мне достичь этого результата, и краткий пример.

window.size(myDom).big();

window.size(myDom).small();
0
Radex 12 Дек 2016 в 14:49

3 ответа

Лучший ответ

Вы можете просто вернуть объект с помощью методов big и small и использовать замыкание для доступа к myDom:

function size(myDom) {
    return {
        big: () => { myDom.style.... }
        small: () => { .... }
    };
}

Или вы можете создать класс с myDom в качестве параметра конструктора (который хранит его в поле) и соответствующих методов.

2
oryol 12 Дек 2016 в 11:59

Если вы хотите использовать классы ES6, вы можете вернуть экземпляр класса, который окружает ваш элемент:

class Sizeable {
    constructor(el) {
        this.el = el;
    }

    big() {
        // do something with this.el
    }

    small() {
        // do something with this.el
    }
}

window.size = function(el) {
    return new Sizeable(el);
};

Что, конечно, примерно эквивалентно:

function Sizeable(el) {
    this.el = el;
}

Sizeable.prototype.big = function() {
    // do something with this.el
}

Sizeable.prototype.small = function() {
    // do something with this.el
}

window.size = function(el) {
    return new Sizeable(el);
};
2
fstanis 12 Дек 2016 в 13:02

Метод size должен иметь объект в качестве возвращаемого значения.

Этот объект должен иметь свойства с именами big и small.

Он также должен иметь любые дополнительные данные (хранящиеся в других свойствах), которые вы хотите сделать доступными для

Значения каждого из этих свойств должны быть functions .

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

0
Quentin 12 Дек 2016 в 11:57