3

コードをdocument.ready（）から自己実行無名関数に移動しています。私はすでにいくつかの大きなコードを作成しましたが、ほとんどの場合、小さなコードに苦労しています。このように：

/**
Advanced properties toggle
**/
$('a.toggle-link').click(function (e) {
    $(this).next().slideToggle('slow');
    e.preventDefault();
});

これをリファクタリングして、セレクターa.toggle-link（関数に何でも渡すことができるようにする）、（、、、 ...を渡すことができるようにする）、および.slideToggle？の変数を導入できるようにするにはどうすればよいですか？.slideDown.slideUpslow

4

1 に答える 1

3

このアプローチでは jQuery を使用しますが、ほとんどの部分でネイティブ DOM メソッドを使用しています。

function actOnElem(el, method, duration) {
    // if no passed 'el' or 'method' return
    if (!el || !method) {
        return false;
    }
    else {
        // if 'el' is an element-node, use 'el' else assume it's an id
        el = el.nodeType == 1 ? el : document.getElementById(el);
        // duration is used if passed, otherwise 'slow' is used as the default
        duration = duration || 'slow';
        // create a jQuery object from 'el',
        // call the method, if it exists,
        // and use the 'duration'
        $(el)[method](duration);
    }
}

actOnElem(document.getElementById('two'), 'slideDown', 1000);

JS フィドルのデモ。

健全性チェックがないことに注意してください。そのため、要素が既に表示されていて、関数を呼び出してslideDownも何も起こりません。これはあなたの質問に答えると思いますが、jQueryメソッドを直接呼び出すのではなく、なぜこのアプローチを採用したいのか完全にわかりません.

(信じられないほど単純な) 障害レポートを可能にするために、わずかに改訂された関数:

function actOnElem(el, method, duration, debug) {
    if (!el || !method) {
        return false;
    }
    else {
        el = el.nodeType == 1 ? el : document.getElementById(el);
        duration = duration || 'slow';
        if ($(el)[method]) {
            $(el)[method](duration);
        }
        else if (debug) {
            console.log('Did you make a typo? There seems to be no "' + method + '" method.');
        }
    }
}

actOnElem(document.getElementById('two'), 'slidedown', 1000, true);
//                                              ^
//                                              +--- typo, should be 'slideDown'

JS フィドルのデモ。

于 2012-11-12T15:17:10.757 に答える