0

私はこの醜いコードの塊を持っており、ウェブサイトにサブナビゲーションを配置する役割を果たしています。私でもそれが地獄のように醜いことを認めているので、どうすればそれを改善できるかについて意見が欲しいです:)

複雑なロジックが原因ではないので、誰かがより良い構造化のアイデアを持っているかもしれません：

positionSubItems : function() {
        var $that = $(this),
            $parent = $that.parents().eq(1),
            $elements = $parent.find(' > li'),
            $activeElements = $parent.find(' > li.active'),
            $container = $that.parent().find(".expandedViewContainer"),

            highestBoundary = $($elements[0]).offset().top - $($elements[0]).outerHeight(true),
            lowestBoundary = $($elements[$elements.length - 1]).offset().top + $($elements[$elements.length - 1]).outerHeight(true),
            containerHeight = $container.outerHeight(true),
            elementHeight = $that.outerHeight(true),

            returnIndex = function(selector) {
                return $(selector).parent().index();
            };

        if($that.data().subItemsPositioned !== true) {

            $container.css({
                'margin-top' : - ( containerHeight / 2 + (elementHeight / 2) )
            });

            if((lowestBoundary - highestBoundary) <= containerHeight) {
                $container.css({
                    'margin-top' : - ((elementHeight * 2) + (elementHeight * returnIndex($that)) + ($activeElements.find(" > ul").outerHeight(true) || 0))
                });
            }

            if($container.offset().top < highestBoundary) {
                $container.css({
                    'margin-top' : - ((elementHeight * 2) + (elementHeight * returnIndex($that)))
                });

                if((lowestBoundary - highestBoundary) < containerHeight) {
                    $container.css({
                        'margin-top' : - ((elementHeight * 2) + (elementHeight * returnIndex($that)) + ($activeElements.find(" > ul").outerHeight(true) || 0))
                    });
                }
            }

            if(($container.offset().top + containerHeight) >= lowestBoundary) {
                $container.css({
                    'margin-top' : - ( containerHeight - (elementHeight * ($elements.length - returnIndex($that))) )
                });

                if((lowestBoundary - highestBoundary) <= containerHeight) {
                    $container.css({
                        'margin-top' : - ((elementHeight * 2) + (elementHeight * returnIndex($that)) + ($activeElements.find(" > ul").outerHeight(true) || 0))
                    });
                }
            }

            $that.data().subItemsPositioned = true;
        }

    }

それで、それが何をするのか簡単に説明させてください。左側の垂直ナビゲーション（の垂直リスト）があるとしましょうli。それらliの中には、リンクと、アイテムの別のリストを含む別のdivがあります。したがって、この関数が実行する必要があるのはli、いくつかのルールに従ってこのサブレベルのsを配置することです。

  • li2つの境界があります。1つは最初のレベルの最も高い「li」アイテムにそれ自体の高さを加えたものに対応し、もう1つは最初のレベルの最も低いものにそれ自体の高さを加えたものに対応します。
  • 最初の条件は、コンテナによって保持され、親の右側に表示されるサブアイテムを常に配置することですli。したがって、親はそのコンテナの中央に表示されます。
  • 上記のルールに基づいて、結果として得られるコンテナの配置のオフセットが上限を超える場合は、コンテナの上部オフセットが上限と同じレベルになるようにコンテナを再配置します。
  • 最初のルールに従って残りのアイテムをクリックし続け、その場合は2番目のルールを適用し、次の条件が満たされている場合はそれを適用します。コンテナの下部のオフセットが最低境界を超えたら、再配置します。コンテナの底部は常に最低境界と同じレベルにあります
  • 上記のすべてのルールと条件を通過した後、コンテナの高さが上限と下限の間の高さよりも大きいかどうかも確認する必要があります。その場合は、最初のルールを適用し、コンテナを上限
  • 親が少なくli、コンテナの高さが境界間の高さの高さを再び超える場合は、別のシナリオが発生するため、上記のルールを適用する必要があります。
  • すでに詳細を掘り下げているので、説明しない別のシナリオがあります

したがって、上記のように、誰かがすべてのロジックを実行するためのより良い方法と、おそらくよりクリーンな方法を持っていることを願っています:)

4

3 に答える 3

1

基礎となるロジックが理にかなっているかどうかをテストせずに、これは私の意見では少し読みやすいです

if(!$that.data().subItemsPositioned)  {
  var  offset=0;
  var ulOuterHeight = (elementHeight * 2) + (elementHeight * returnIndex($that)) + ($activeElements.find("  >  ul").outerHeight(true) ||  0);
  switch(true)  {
    case (lowestBoundary - highestBoundary)  <=  containerHeight  :
      offset = ulOuterHeight;  
      break;
    case $container.offset().top  <  highestBoundary  :
      if((lowestBoundary - highestBoundary)  <  containerHeight)  {
        offset = ulOuterHeight; 
      }
      else offset = (elementHeight * 2) + (elementHeight * returnIndex($that))
      break;
    case ($container.offset().top + containerHeight)  >=  lowestBoundary  :
      if((lowestBoundary - highestBoundary)  <=  containerHeight)  {
        offset = ulOuterHeight; 
      }
      else offset = containerHeight - (elementHeight * ($elements.length - returnIndex($that)));  
      break;
    default: offset = containerHeight/2 + (elementHeight/2);
  }
  $container.css({'margin-top'  : - offset  });
  $that.data().subItemsPositioned = true;
}
于 2012-11-23T07:49:52.990 に答える
1

ここにある種の例があります（関数が何をするかを正確に読むことなく、この関数を少し乾かすためのリファクタリングだけです

これはまだある種の醜いですが、それがあなたを正しい方向に押し進めるのに役立つことを願っています

positionSubItems : function() {
    var $that = $(this),
    $parent = $that.parents().eq(1),
    $elements = $parent.find(' > li'),
    $activeElements = $parent.find(' > li.active'),
    $container = $that.parent().find(".expandedViewContainer"),

    highestBoundary = $($elements[0]).offset().top - $($elements[0]).outerHeight(true),
    lowestBoundary = $($elements[$elements.length - 1]).offset().top + $($elements[$elements.length - 1]).outerHeight(true),
    containerHeight = $container.outerHeight(true),
    elementHeight = $that.outerHeight(true),

    returnIndex = function(selector) {
        return $(selector).parent().index();
    },

    containerCSS = function(marginTop) {
        $container.css({
            'margin-top' : - marginTop
        });
    },

    doTheMarginTop = function() {
        containerCSS((elementHeight * 2) + (elementHeight * returnIndex($that)) + ($activeElements.find(" > ul").outerHeight(true) || 0));
    };

if($that.data().subItemsPositioned !== true) {

    containerCSS(containerHeight / 2 + (elementHeight / 2));

    if((lowestBoundary - highestBoundary) <= containerHeight) {
        doTheMarginTop();
    }

    if($container.offset().top < highestBoundary) {
        containerCSS(((elementHeight * 2) + (elementHeight * returnIndex($that))));

        if((lowestBoundary - highestBoundary) < containerHeight) {
            doTheMarginTop();
        }
    }

    if(($container.offset().top + containerHeight) >= lowestBoundary) {
        containerCSS( containerHeight - (elementHeight * ($elements.length - returnIndex($that))) );
        if((lowestBoundary - highestBoundary) <= containerHeight) { doTheMarginTop(); }
    }

    $that.data().subItemsPositioned = true;
}

}

于 2012-11-22T15:53:24.743 に答える
1

このコードは常に同じように見えます。if条件から外して（おそらく関数に）入れてみてください。

$container.css({
    'margin-top' : - ((elementHeight * 2) + (elementHeight *     returnIndex($that)) + ($activeElements.find(" > ul").outerHeight(true) || 0))
});

それが出発点として良いと思います。重複するコード行を探す

于 2012-11-22T15:44:07.073 に答える