Обертывание элемента DOM внутри объекта JavaScript

StackOverflow https://stackoverflow.com/questions/4743666

Вопрос

Я заметил общий шаблон в JavaScript, который я писал, и мне было интересно, есть ли уже шаблон, который определяет нечто подобное как лучшая практика? По сути, это как получить элемент DOM и обернуть его внутрь / связать его с помощью объекта JavaScript. Возьмите этот пример, где вам нужен фильтр в вашем веб -приложении. Ваша страница выглядит так:

<html>
<head></head>
<body>
    <div id="filter"></div>
</body>
</html>

Затем вы так обертите элемент:

var myFilter = new Filter({
    elem: document.getElementById('filter'),
    prop: 'stacks-test',
    someCallback: function() {
        // specify a callback
    }
});

И JavaScript (где Spec - это объект, переданный конструктору):

var Filter = function(spec) {
    this.elem = spec.elem;
    this.prop = spec.prop;
    this.callback = spec.someCallback;
    this.bindEvents();
};

Filter.prototype.bindEvents = function() {
    var self = this;
    $(this.elem).click(function(e) {
        self.updateFeed();
    };
};

Filter.prototype.updateFeed = function() {
    this.prop; // 'stacks-test'
    this.callback();
    // ...
    // code to interact with other JavaScript objects
    // who in turn, update the document
};

Как называется этот вид подхода, и каковы лучшие практики и предостережения?

Это было полезно?

Решение

Возможно, вас заинтересованы в библиотеке виджетов Dojo, Dijit - если я правильно понимаю ваш вопрос, это, по сути, делает то, что вы спрашиваете, и намного больше.

В Dijit виджет, по существу, инкапсулирует узел DOM, его содержимое, любой JavaScript, который определяет его поведение, и (импортируется отдельно) CSS, чтобы стиль его внешнего вида.

Виджеты имеют свой собственный жизненный цикл, реестр и события (в том числе многие, которые просто отображают события DOM на узле внутри виджета, например, myWidget.onClick может эффективно вызвать myWidget.domNode.onclick).

Виджеты могут (но не обязательно) иметь свое начальное содержание, определяемое в отдельном файле шаблона HTML, с помощью которого также можно связывать события на узлах в шаблоне с методами виджетов, а также установленные свойства на виджет, который ссылается на конкретные узлы в шаблоне.

Я едва царапаю поверхность здесь. Если вы хотите прочитать больше об этом, вы можете начать с этих справочных страниц:

Все сказано, я не знаю, к чему вы в конечном итоге стремитесь, и, возможно, это все немного для ваших целей (учитывая, что я бросаю в вас всю другую библиотеку), но подумал, что это может вызвать ваш интерес, по крайней мере, по крайней мере Анкет

Другие советы

Продолжая от моего комментария по этому вопросу, jQuery - это потенциал Инструмент для работы, так как он уже предоставляет некоторые основы для того, что вам нужно. Однако, сказав это, он вводит свои собственные сложности, и, кроме того, не все «способы jQuery» равны. Я предложу один способ использовать jQuery в качестве «объектной модели», но это может или не может соответствовать вашим потребностям.

Перво -на первый взгляд. Философия jQuery заключается в том, что вы начинаете все, сначала выбирая элемент, используя $(), или эквивалентно jQuery(). Анкет Все операции концептуально начинаются с этого. Это немного другой способ мышления по сравнению с созданием объекта, который завершает элемент и сохраняет ссылку на эту обертку, но, по сути, это то, что JQuery делает для вас. Призыв к $('#some-id') захватывает элемент с удостоверением личности "Some ID" и завершает его в объект jQuery.

В одну сторону: Напишите плагины «Фильтр».

Замените свой конструктор initFilter() jQuery Метод. Вы можете сделать это, изменяя прототип JQUERY и используя объект jQuery в качестве обертки. Прототип jQuery ссылается jQuery.fn, так:

jQuery.fn.initFilter = function (prop, callback) {
    // Save prop and callback
    this.data('filter-prop', prop);
    this.data('filter-callback', callback);

    // Bind events (makes sense to do this during init)
    this.click(function () {
        $(this).updateFeed();
    });
};

Тогда сделайте подобную вещь для updateFeed():

jQuery.fn.updateFeed = function () {
    this.data('filter-prop');
    this.data('filter-callback')();
});

И используйте это так:

$('#filter').initFilter(prop, callback);

Обратите внимание, что updateFeed может просто быть встроено в обработчик кликов, чтобы предотвратить ненужное загрязнение пространства имен JQUERY. Тем не менее, одно преимущество использования jQuery, подобного этому, заключается в том, что вам не нужно сохранять ссылку на объект, если вам нужно вызовать некоторую функцию позже, поскольку jQuery связывает все ссылки на фактические элементы. Если вы хотите позвонить updateFeed программно, тогда:

$('#filter').updateFeed();

тогда будет вызван правильным объектом.

Некоторые вещи, которые следует учитывать

У этого метода, безусловно, есть недостатки. Одним из них является то, что все свойства, которые мы сохранили против элемента, используя .data(), разделяются между всеми функциями jQuery, которые действуют на этот элемент. Я попытался облегчить это, префикс и названия свойств с помощью «Фильтр-», но в зависимости от сложности ваших объектов, это может быть не подходит.

Кроме того, этот точный метод может быть не таким подходящим для объектов, которые требуют большого количества манипуляций (т.е. объектов со многими функциями), поскольку все эти функции становятся общими для всех объектов jQuery. Есть способы инкапсулировать все это, в чем я не буду здесь заниматься, но JQuery-Ui делает это со своими виджетами, и я экспериментирую с еще одной альтернативой в библиотеке, которую я создаю.

Тем не менее, немного отступая, единственная причина, по которой я предложил использовать jQuery, заключается в том, что ваш объект фильтра, по -видимому, сильно связан с DOM. Он связывает события с DOM, он изменяет DOM на основе взаимодействия с пользователем, в основном он, по-видимому, живет в DOM, поэтому используйте что-то на основе DOM, то есть jQuery.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top