ifステートメント内のロジックを最小限にリファクタリングする

debugcn 投稿 Dev

ここに

少し前に、SVG（会社のクローズドソース）を使用して教育用JavaScriptアプリケーションを作成しました。最も基本的な形式では、アプリケーションは2つの列（左と右）で構成され、各列にはさまざまな幾何学的形状（正方形、三角形、円など）が含まれていました。

1つの列の各幾何学的形状は、（線を引くことによって）反対側の列の別の幾何学的形状に接続できます。ただし、いずれかの列の形状は、その設定に応じて、その列との間で1つまたは複数の接続を持つことができます。

したがって、の設定を持つシェイプは、{multiple: false}それへの接続または接続からの接続を1つだけ持つことができます。接続がそれから発生したのか、別の形状から発生したのかは関係ありません。1つの接続とは、発信元に関係なく1つの接続のみを意味します。

線を引くことによって形状を接続するコードの部分は、非常に複雑なifステートメントです。ここにあります：

if ((!sourceHasLines && !targetHasLines) ||
  (sourceHasLines && sourceCanMultiply && !targetHasLines) ||
  (sourceHasLines && sourceCanMultiply && targetHasLines && targetCanMultiply) ||
  (!sourceHasLines && !sourceCanMultiply && targetHasLines && targetCanMultiply) || 
  (!sourceHasLines && sourceCanMultiply && targetHasLines && targetCanMultiply)) {
    // Create a line only if one of the above comparisons succeeds
    connection = self.connect($source, $target);
}

ソースは1つの列の形状を指し、ターゲットは反対の列の形状を指します。
ユーザーは、最初に最初の列の1つの図形をクリックし、次に2番目の列の別の図形をクリックすることで、どちらの列からも接続を開始できます。
同じ列の図形を接続することはできません。

今コードを見ると、ifステートメント内のロジックはおそらく圧縮できると思います。すでにいくつかのアイデアがあります。ただし、これは順列または離散数学などの他のCS関連ロジックのいずれかに関係していると感じています。私はほとんど独学なので、誰かがこれにどのようにアプローチし、上記のifステートメントをリファクタリングするかを確認したいと思います。

コードはうまく機能しますが、どうすれば改善できるのでしょうか。これは、左/右の列の代わりに上/下の行を持つプロトタイプのスクリーンショットです。

上のオブジェクトを下のオブジェクトに接続します

フレル

どうですか：

if ((!SL || SM) && (!TL || TM)) ...

つまり、ソースは空であるか複数行である必要があり、ターゲットは空であるか複数行である必要があります

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-30

コメントを追加

サインイン

分類Dev

Related 関連記事

記事