0

低解像度デバイス用のレスポンシブ デザインを処理し、全幅メニューの代わりにトグル メニューを表示する小さなスクリプトを作成しました。次のスクリプトは私にとっては問題なく機能していますが、これは少し面倒に見えます。このコードをより最小限に抑えて効率的にするには、どのような略記または実践が必要ですか?

resetMenu() 関数は、ブラウザーが通常モードからトグル モードにサイズ変更されている間、特定の解像度の css を保持するように処理しています。そうするのは良い習慣ですか?

$(document).ready(function($) {
function resetMenu() {
    $('#top-menu li, #search-form, .social').css({"display":"block"});
    $('#top-menu li').css({"display":"inline-block"});
};
$(window).resize(function () { 
if($(window).width() > 640){
    $(resetMenu());
}
else{
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
    $('#top-menu li:nth-child(2)').css({"display":"none"});
}
});

$(".togglebutton").toggle(
function () {
    if($(window).height() < 360){
        $('#top-menu li').css({"display":"inline-block"}).fadeIn(500);
        $('#top-menu li:nth-child(2)').css({"display":"none"});
        $('#search-form, .social').css({"display":"block"}).fadeIn(500);
        $('#top-menu li').css({"border":"none"});
    }
    else{
        $('#top-menu li, #search-form, .social').css({"display":"block"}).fadeIn(1000);
        $('#top-menu li:nth-child(2)').css({"display":"none"});
    }
},
function () {
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
    $('#top-menu li:nth-child(2)').css({"display":"none"});
}

)});
4

2 に答える 2

0

あなたのコードがそれほど面倒だとは思いません。必要に応じて、これらの匿名関数を別の場所で定義して名前を付け、イベント ハンドラーに渡すことができます。ウィンドウ プロパティの追跡を担当するオブジェクトを定義し、応答関数をそのオブジェクトに移動できます。WindowTracker、またはあなたがそれを呼ぶものは何でも、ビルダーおよび/またはオブザーバーパターンを実装して、イベントハンドラーにさらに追加することになった場合、懸念の分離とよりモジュール化されたコードを可能にするような方法でそれを行うことができます.

それがより最小限になるかどうかはわかりませんが、読みやすく論理的かもしれません。効率を求めている場合は、少なくとも関数呼び出しのために、jquery 検索の結果を保存する必要があります。 後で使用するために jquery セレクターを保存する方法

于 2013-01-13T03:14:41.660 に答える
0

私は通常、異なるモジュールに宣言部分と実行部分があるコードを好みます。そのため、一部は次のようになります。

var one = $('#top-menu li')
var two = $('#top-menu li, #search-form, .social');
var three = $('#top-menu li:nth-child(2)');
var four = $('#search-form, .social')

function toggleIn() {
    if($(window).height() < 360){
        one.css({"display":"inline-block"}).fadeIn(500);
        three.css({"display":"none"});
        four.css({"display":"block"}).fadeIn(500);
        one.css({"border":"none"});
    }
    else{
        two.css({"display":"block"}).fadeIn(1000);
        three.css({"display":"none"});
    }
},

function toggleOut() {
    two.css({"display":"none"}).fadeOut(1000);
    three.css({"display":"none"});
}

function resetMenu() {
    one.css({"display":"block"});
    two.css({"display":"inline-block"});
};

そして、もう一方は次のとおりです。

$(window).resize(function () { 
    if($(window).width() > 640){
        $(resetMenu());
    }
    else{
        two.css({"display":"none"}).fadeOut(1000);
        three.css({"display":"none"});
    }
});

 $(".togglebutton").toggle(toggleIn, toggleOut);

ですから、私の見方では、その 2 番目の部分は「最小限の」コードになります。また、コードの各機能部分を個別に評価できるため、デバッグ目的に役立ちます。

于 2013-01-13T03:37:46.497 に答える