Question

我需要帮助来简化我的代码。我正在尝试申请D.R.Y.尽我所能的原则，我遇到了麻烦。任何帮助将不胜感激。

$('document').ready(function(){
    'use strict';

    var body = $('body');

    body.find('#button1').click(function(){
         body.find('#item1').add('#item2').fadeOut();
         body.find('#item3').fadeIn();
         body.find('#button1').removeClass('btn-info').addClass('btn-default');
         body.find('#button2').removeClass('btn-default').addClass('btn-info');
    });

    body.find('#button2').click(function(){
        body.find('#item3').fadeOut();
        body.find('#item1').add('#item2').fadeIn();
        body.find('#button2').removeClass('btn-info').addClass('btn-default');
        body.find('#button1').removeClass('btn-default').addClass('btn-info');
    });
});

提前谢谢！

Answer 1

似乎可以应用的一个DRY项目用于课程部分：

Main
{
    gamethread();
    UIthread:



   while(gameIsRunning)
   {
       UIthread.draw();

      if(gamethread.startAnimationButtonIsPressed)
      {
        UIthread.startAnimation;
      }

   }


}

制作整个代码：

//add event bound to the click of a element with class btn-default
body.on('click', '.btn-default', function () {
    //remove btn-default from this class and add btn-info
    $(this).removeClass('btn-default').addClass('btn-info');
    //remove btn-info from this class and add btn-default
    $('.btn-info').removeClass('btn-info').addClass('btn-default');
});

Answer 2

没有不必要的重复，但是有不必要的代码。例如，无需从$('body')和.find()下一个标记开始。

相反，请遵循以下模式：

（1）删除var body = $('body'); - 不需要它

（2）进行以下更改：

body.find('#button1').click( -- can be -- $('#button1').click(

body.find('#item1').add('#item2').fadeOut(); == $('#item1').add('#item2').fadeOut();

body.find('#item3').fadeIn();  ==  $('#item3').fadeIn();

等

更新：要减少DOM搜索，请缓存整个选择器：

$('document').ready(function(){
    'use strict';
    var $i1 = $('#item1');
    var $i3 = $('#item3')
    var $b1 = $('#button1');
    var $b2 = $('#button2');

    $b1.click(function(){
         $i1.add('#item2').fadeOut();
         $i3.fadeIn();
         $b1.removeClass('btn-info').addClass('btn-default');
         $b2.removeClass('btn-default').addClass('btn-info');
    });

    $b2.click(function(){
        $i3.fadeOut();
        $i1.add('#item2').fadeIn();
        $b2.removeClass('btn-info').addClass('btn-default');
        $b1.removeClass('btn-default').addClass('btn-info');
    });
});

Answer 3

您可以创建一个单独的函数（比如'toggleElements'），它接受一个标志并根据标志的值执行所需的所有操作，然后执行以下操作：

body.find('#button1').click(function() {
    toggleElements(true);
});

Answer 4

我在代码中看不到任何问题，任何更改都不会提高可读性。它并不总是“尽你所能，但不要重复一行代码” - 你需要找到最佳的，你的外表实际上很好。

然而，有一些可能的改进：

如果元素ID是唯一的，为什么要使用body？您只需使用选择器。
您可以组合使用选择器而不是.add。

类似的东西：

$('document').ready(function(){
    'use strict';

    $('#button1').click(function(){
         $('#item1, #item2').fadeOut();
         $('#item3').fadeIn();
         $('#button1').removeClass('btn-info').addClass('btn-default');
         $('#button2').removeClass('btn-default').addClass('btn-info');
    });

    $('#button2').click(function(){
        $('#item3').fadeOut();
        $('#item1,#item2').fadeIn();
        $('#button2').removeClass('btn-info').addClass('btn-default');
        $('#button1').removeClass('btn-default').addClass('btn-info');
    });
});

另一个选项是将此功能与boolean参数组合成一个函数，或者使用CSS类和转换。正如我所说，在我看来，4行代码可以不被“优化”。如果你的功能成长 - 优化它。

Answer 5

除了仅使用private class MyWebChromeClient extends WebChromeClient { //The undocumented magic method override //Eclipse will swear at you if you try to put @Override here // For Android 3.0+ public void openFileChooser(ValueCallback uploadMsg, String acceptType) { mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("*/*"); startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE); } //For Android 4.1+ only protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) { mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("*/*"); startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE); } protected void openFileChooser(ValueCallback<Uri> uploadMsg) { mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("*/*"); startActivityForResult(Intent.createChooser(intent, "File Chooser"), FILECHOOSER_RESULTCODE); } // For Lollipop 5.0+ Devices public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { if (uploadMessage != null) { uploadMessage.onReceiveValue(null); uploadMessage = null; } uploadMessage = filePathCallback; Intent intent = null; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { intent = fileChooserParams.createIntent(); } try { startActivityForResult(intent, REQUEST_SELECT_FILE); } catch (ActivityNotFoundException e) { uploadMessage = null; Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show(); return false; } return true; }访问唯一的元素外，您可能还希望将其作为重用和可读性的改进，

Answer 6

您可以尝试这样的方法，在每个按钮上使用data属性定义要显示的项目。当您需要添加更多按钮或项目时，这样做的好处是需要更少的工作，并适用于任何按钮/项目组合。

jsFiddle

HTML：

<input type="button" id="button1" class="btn-info" value="Button 1" data-show="#item1" />
<input type="button" id="button2" class="btn-default" value="Button 2" data-show="#item2" />
<input type="button" id="button3" class="btn-default" value="Button 3" data-show="#item2, #item3" />

<div id="item1" class="itemClass">Item 1</div>
<div id="item2" class="itemClass">Item 2</div>
<div id="item3" class="itemClass">Item 3</div>

JS：

$('body').on('click', '.btn-default', function() {
  var show = $(this).data('show');
  $('.itemClass').not(show).fadeOut();
  $(show).fadeIn();

  $('.btn-info').addClass('btn-default').removeClass('btn-info');
  $(this).addClass('btn-info').removeClass('btn-default');
});

无法应用D.R.Y.到我的jQuery

6 个答案: