конвертировать MooTools js-скрипт в jquery

Question

Я изо всех сил пытался понять это правильно!Может кто-нибудь помочь мне преобразовать этот кусок скрипта MooTools js в jquery?Скрипт представляет собой динамический конструктор запросов.Реализация в реальном времени: http://opl.bibliocommons.com/search.

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

var AdvancedSearch = new Class({
    Implements: [Options],
    options: {
        disable_form_message: "Editing this field means you won't be able to use the constructor form. Continue?"
    },
    initialize: function (instance, options) {
        this.setOptions(options);
        this.instance = $(instance);
        this.query_chunks = this.instance.getElements('div.query_chunk');
        this.not_chunks = this.instance.getElements('div.not_chunk');

        this.instance.addEvent('submit', this.do_search.bindWithEvent(this));

        this.term_count = this.query_chunks.length;
        this.not_term_count = this.not_chunks.length;

        this.query_field = $('custom_query');
        if ($('custom_edit').value == 'false') {
            this.query_field.removeEvents('focus');
            this.query_field.addEvent('focus', this.disable_form_elements.bindWithEvent(this));
        }

        this.operation = $('operator');
        if (this.operation) {
            this.operation.addEvent('change', this.construct_query.bindWithEvent(this));
        }


        this.query_chunks.each(function (el, i) {
            el.getElement('select.parameter').addEvent('change', this.construct_query.bindWithEvent(this));
            el.getElement('input.operand').addEvent('keyup', this.construct_query.bindWithEvent(this));
            el.getElement('input.operand').addEvent('mouseup', this.construct_query.bindWithEvent(this));
            el.getElement('a.remove_btn').removeEvents('click');
            el.getElement('a.remove_btn').addEvent('click', this.remove_query_part.bindWithEvent(this));
        } .bind(this));

        this.add_keywords = $('add_query_part');

        if (this.add_keywords) {
            this.add_keywords.addEvent('click', this.add_query_part.bindWithEvent(this));
        }
        this.not_chunks.each(function (el, i) {
            el.getElement('select.not_parameter').addEvent('change', this.construct_query.bindWithEvent(this));
            el.getElement('input.not_operand').addEvent('keyup', this.construct_query.bindWithEvent(this));
            el.getElement('input.not_operand').addEvent('mouseup', this.construct_query.bindWithEvent(this));
            el.getElement('a.not_remove_btn').removeEvents('click');
            el.getElement('a.not_remove_btn').addEvent('click', this.remove_not_part.bindWithEvent(this));
        } .bind(this));


        this.add_not_keywords = $('add_not_part');

        if (this.add_not_keywords) {
            this.add_not_keywords.addEvent('click', this.add_not_part.bindWithEvent(this));
        }

    },

    add_query_part: function (ev) {
        if (ev) ev.stop();
        this.query_chunks[0].addClass('removable');
        var query_chunk = this.query_chunks[0].clone().set({ 'class': 'query_chunk query_piece', 'id': "query_chunk_" + (++this.term_count) }).inject($('query_parts'));
        var search_param_select = query_chunk.getElement('select').set({
            'class': 'parameter',
            'id': 'parameter_' + this.term_count,
            'style': 'margin-right:3px'
        });
        var keyword = query_chunk.getElement('input[type=text]').set({
            'class': 'operand text',
            'id': 'keyword_' + (this.term_count),
            'style': 'margin-right:3px',
            'value': ''
        });
        var remove_btn = query_chunk.getElement('a').set({
            'class': 'remove_btn',
            'id': 'remove_' + (this.term_count)
        });
        $("query_chunk_" + this.term_count).addClass('removable');
        this.query_chunks.push(query_chunk);
        remove_btn.addEvent('click', this.remove_query_part.bindWithEvent(this));
        keyword.addEvent('keyup', this.construct_query.bindWithEvent(this));
        keyword.addEvent('mouseup', this.construct_query.bindWithEvent(this));
        search_param_select.addEvent('change', this.construct_query.bindWithEvent(this));
        return query_chunk;
    },


    remove_query_part: function (ev) {
        ev.stop();
        var remove_index = ev.target.getParent('div').id.split("_")[2];
        this.query_chunks.splice(this.query_chunks.indexOf($('query_chunk_' + remove_index)), 1);
        if ($('query_chunk_' + remove_index)) {
            $('query_chunk_' + remove_index).dispose();
        }
        this.construct_query();
        if (this.query_chunks.length == 1) this.query_chunks[0].removeClass('removable');
    },


    add_not_part: function (ev) {
        if (ev) ev.stop();
        this.not_chunks[0].addClass('removable');
        var query_chunk = this.not_chunks[0].clone().set({ 'class': 'not_chunk query_piece', 'id': 'not_chunk_' + (++this.not_term_count) }).inject($('not_parts'));
        var search_param_select = query_chunk.getElement('select').set({ 'class': 'not_parameter', 'id': "not_parameter_" + (this.not_term_count), 'style': 'margin-right:3px' });
        var keyword = query_chunk.getElement('input[type=text]').set({ 'class': 'not_operand text', 'id': 'not_keyword_' + (this.not_term_count), 'style': 'margin-right:3px', 'value': '' });
        var remove_btn = query_chunk.getElement('a').set({
            'class': 'not_remove_btn',
            'id': 'not_remove_' + (this.not_term_count)
        });
        $("not_chunk_" + this.not_term_count).addClass('removable');
        this.not_chunks.push(query_chunk);
        remove_btn.addEvent('click', this.remove_not_part.bindWithEvent(this));
        keyword.addEvent('keyup', this.construct_query.bindWithEvent(this));
        keyword.addEvent('mouseup', this.construct_query.bindWithEvent(this));
        search_param_select.addEvent('change', this.construct_query.bindWithEvent(this));
        return query_chunk;
    },


    remove_not_part: function (ev) {
        ev.stop();
        var remove_index = ev.target.getParent('div').id.split("_")[2];
        this.not_chunks.splice(this.not_chunks.indexOf($('not_chunk_' + remove_index)), 1);
        $('not_chunk_' + remove_index).dispose();
        this.construct_query();
        if (this.not_chunks.length == 1) this.not_chunks[0].removeClass('removable');
    },

    disable_form_elements: function (ev) {
        if (confirm(this.options.disable_form_message)) {
            disable_form(this);
        } else {
            ev.stop();
            $('advanced_search').getElement('div.queryBox').getElements('input')[1].focus();
        }
    },


    construct_query: function (ev) {
        Messages.clear();
        var query_string = "";
        var part_pattern = "{param}({keyword})";
        var not_pattern = "-{param}({keyword})";
        var operation_pattern = "{operation}";

        if (this.query_chunks.length > 1) {
            query_string += "(";
        }
        var operands = new Array();
        for (var i = 0; i < this.query_chunks.length; i++) {
            if (this.query_chunks[i].getElement('input.operand').value != "") {
                var myObject = {
                    param: (this.query_chunks[i].getElement('select.parameter').value != "anywhere") ? this.query_chunks[i].getElement('select.parameter').value + ":" : "",
                    keyword: this.query_chunks[i].getElement('input.operand').value
                };
                operands.push(part_pattern.substitute(myObject));
            }
        }
        query_string += operands.join(" " + this.operation.value + " ");
        if (this.query_chunks.length > 1) {
            query_string += ")";
        }

        var not_operands = new Array();
        for (var j = 0; j < this.not_chunks.length; j++) {
            if (this.not_chunks[j].getElement('input.not_operand').value != "") {
                myObject = {
                    param: (this.not_chunks[j].getElement('select.not_parameter').value != "anywhere") ? this.not_chunks[j].getElement('select.not_parameter').value + ":" : "",
                    keyword: this.not_chunks[j].getElement('input.not_operand').value
                };
                not_operands.push(not_pattern.substitute(myObject));
            }
        }
        if (query_string != "") query_string += " ";
        query_string += not_operands.join(" ");


        if (query_string != "") query_string += " ";
        query_string.trim();
        this.query_field.value = query_string;
    }
});

function disable_form(o)
{
    o.query_field.removeEvents('focus');
  $('custom_edit').value = 'true';
  $('advanced_search').getElement('div.queryConstructor').addClass('hide');
}

Answer 1

Вам, возможно, будет лучше посмотреть, что делает скрипт, и переопределить его после того, как он «укротил» jQuery.

Но если вы хотите перевести ...

Первая проблема, с которой вы столкнетесь, состоит в том, что jQuery не имеет аналога функции Class MooTools. Я сделал реализацию Class, которая очень похожа на Prototype (на которой был основан MooTools), за исключением того, что я добавил функцию, чтобы сделать суперзвезд значительно более эффективным; это в этом блоге , которое вы, вероятно, могли бы адаптировать. Вам придется перевести Implements (вполне точно, что он просто становится параметром суперкласса для моего эквивалента).

Тогда:

• Принципиальное отличие состоит в том, что MooTools расширяет экземпляров элементов, но jQuery оборачивает их. Все экземпляры jQuery в основном представляют собой расширенные объекты, подобные массивам, где экземпляр, с которым вы взаимодействуете, действует как набор, но вы можете индексировать фактические базовые элементы DOM с помощью [] (например, в jQuery, var list = $('.xyz'); дает вам экземпляр jQuery, list, который имеет length и может быть проиндексирован с помощью [] (list[0] - это первый базовый элемент DOM в необработанном виде). ​​Так что, где бы вы ни обращались к необработанным свойствам элемента DOM в расширенном экземпляре MooTools (например, что-то, что вы получили от $ или $$), либо найдите эквивалентную функцию jQuery или индекс в объекте jQuery, чтобы получить его в необработанном экземпляре DOM. Например, в приведенном выше примере, если мне нужен идентификатор первого совпадения в list, я бы сделал либо list.attr('id'), либо (зная меня) более вероятно list[0].id.
• $('foo') становится $('#foo') (или $(document.getElementById('foo')), но это неудобно). (Только когда это строка [обратите внимание на кавычки]; когда это DOM-объект, оставьте его - отсюда и вторая форма.)
• $$ становится $.
• getElements и getElement оба становятся find. (jQuery на самом деле не имеет понятия отдельных обернутых элементов, просто экземпляр jQuery с одним элементом внутри него.)
• addEvent становится bind.
• removeEvents становится unbind.
• bind становится proxy.
• jQuery не имеет прямого аналога bindWithEvent, но вы, вероятно, в порядке с proxy для того, где вы его используете. Дважды проверьте, что вы получаете аргументы в порядке, который вы ожидаете.
• .value становится .val().
• set, вероятно, становится attr, но с именами классов вместо этого используйте addClass.

Answer 2

Может быть, попытаться разделить класс на более мелкие куски и решать проблемы по одному?

Также оставляйте функциональность mootools при конвертации и вместо $ () используйте "jQuery ()"

Пример

    function disable_form_jquery(o)
    {
      jQuery(o.query_field).unbind('focus');
      jQuery('#custom_edit').val('true');
      jQuery('#advanced_search').children('div.queryConstructor').addClass('hide');
    }