将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

你可能会更好地看看脚本的功能，并在“grokked”jQuery之后重新实现它。

但如果你想翻译......

您将遇到的第一个挑战是jQuery没有MooTools的Class功能的类似物。我已经完成了Class的实现，它与Prototype（MooTools的基础）非常相似，除了我添加了一个功能，使超级调用显着更高效;你可以在this blog post进行调整。你必须翻译Implements事物（相当肯定，它只是一个超类参数）。

然后：

• 根本区别在于MooTools 扩展元素实例，但jQuery 包装它们。所有jQuery实例基本上都是增强的类似数组的东西，你正在与之交互的实例有点像集合，但是你可以通过[]索引到实际的底层DOM元素（例如，在jQuery中） ，var list = $('.xyz');为您提供了一个jQuery实例list，该实例具有length并且可以通过[]索引（list[0]是第一个基础原始DOM元素因此，无论您在MooTools增强型实例上访问DOM元素的原始属性（例如，您从$或$$获得的内容），都可以找到jQuery等效函数或者索引到jQuery对象以获取原始DOM实例。例如，在上面，如果我想要list中第一个匹配的ID，我会做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');
    }