javascript - よりエレガント/ドライ/メンテナンス可能なJSソリューションはここにありますか？

Question

私は最初、このコードを書くときにJSのベストプラクティスを使用することからタスクを開始しましたが、苦労していたので、それを機能させるために大きなずさんな混乱として記述し、事後にクリーンアップしようとしました。（それは良い考えではなかったと主張するかもしれませんが、それは私が今いる場所でできる最善のことでした。）

上司は、カスタムトリガーとイベントを使用するように提案しましたが、それは実際には最善の方法ではありませんでした。OOJSのRebeccaMurphyによるこの記事も読んだのですが、答えがあるように見えましたが、そこにたどり着くことができませんでした。

私はこれを書くためのよりエレガントな（そしてステートメントに依存しない場合はネストされていない）方法を明確に探しており、その問題に関する助けを間違いなく感謝している一方で、役立つパターンも探していることを覚えておいてください私はここで私のより大きな文体の欠点に取り組み、より良いプログラマーになります。たとえば、これがDOMをトラバースするための最も不格好で最も遅い方法であることを私は知っています。

重要な注意事項：この状況では、マークアップの多くを制御できません（JS / CSSフックとしてクラスを追加することを除いて）。これは、SimpleForm Ruby gemによって生成されているためです（私の低さのためにリンクできません）スコア）。そして、CSSは無関係です。つまり、実際にはJSだけです。

コンテクスト

選択ボタンまたはラジオボタンの選択に基づいて、特定のものが表示/非表示になります。

編集：申し訳ありませんが、ここでHTMLがおかしくなったので、jsFiddleを作成しました。

編集2：私たちはjQuery 1.6.4を使用しているので、なぜ私がの.delegate代わりに使用したのか疑問に思っているのなら.on、それが理由です。

Answer 1

重複したコードを削除してアイテムを表示/非表示にすることで、物事をドライに保つこともできます。これは、物事を改善する非常に単純なアプローチです。

function changeElements (show_elements, hide_elements) {
    if (show_elements === null) {
        // code to hide all
    }

    container.siblings(show_elements).slideDown();
    container.siblings(hide_elements).slideUp();
}

次に、関数を使用するには、表示するセレクターと非表示にするセレクターを指定するだけです。

changeElements('.deceased', '.living, .other-illnesses, .cancer-info');

Answer 2

明らかなことがいくつかあります。

1. 繰り返し評価しない$(this)でください-一度実行して、結果をキャッシュしてください
2. 同様にselected.index()
3. .slideUpとの単純なラッパーを使用して、.slideDown('fast')それらを何度も繰り返さないようにし、必要に応じて1か所でアニメーションを変更できるようにします。

最後のブロックは次のように書くことができます：

var $next = $(this).closest('.control-group').next();
if ($(this).val() === 'true') {
    $next.slideUp();
} else {
    $next.slideDown();
}

実際、ブロック全体は次のifように書くことができますが、これは少し簡潔すぎると感じる人もいます。

$next[$(this).val() === 'true') ? 'slideDown' : 'slideUp']();

Answer 3

2つの小さなこと（言及された2つのAlnitak以外）：

1）ライブを使用しないでください（http://bitovi.com/blog/2011/04/why-you-should-never-use-jquery-live.html、またはトピックに関するSO投稿のいずれかを参照してください）

2 $(document).ready(function(){）$(function(){

それはさておき、コードには根本的な問題はありません。正直なところ、このような小さなチャンクについては、おそらく考えすぎだと思います。これらの要素のそれぞれにたとえばバックボーンビューを使用している場合は、イベント駆動型のアプローチに切り替えたいと思うかもしれませんが、それはあなたが持っているものと同じくらい小さい/単純なものにはやり過ぎでしょう。

Answer 4