将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实例基本上都是增强的类数组，其中您正在进行交互的实例的行为有点像一个集合，但您可以通过[]（例如，在jQuery中，var list = $('.xyz');为您提供实际底层DOM元素的索引）一个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'); 
    }