1

jQueryの透かしプラグインを使用して、関数をjslintして最小化しようとしていますが、実際に割り当てまたは関数呼び出しが必要な式がある、これまでに見たことのない構文に出くわしました:

(function($) {

    $.fn.watermark = function(css, text) {

        return this.each(function() {

            var i = $(this), w;

            i.focus(function() {
                w && !(w=0) && i.removeClass(css).data('w',0).val('');
            })
                .blur(function() {
                    !i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
                })
                .closest('form').submit(function() {
                    w && i.val('');
                });

            i.blur();
        });
    };

    $.fn.removeWatermark = function() {

        return this.each(function() {

            $(this).data('w') && $(this).val('');
        });
    };
})(jQuery);

私は特に次の行に興味があります。

w && !(w=0) && i.removeClass(css).data('w',0).val('');

と

!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);

誰かがこの速記を説明し、これらの関数を比較して自分で速記をよりよく理解できるように書き直すことができますか?

ありがとうございました。

4

6 に答える 6

3

&&「ガード」として使用できます。基本的に、オペランドの1つが「偽の」値を返す場合、式の評価を停止することを意味します。

式を否定すると、ブール値に変換されます。具体的には、「真実」か「虚偽」かによる表現の否定です。

w && !(w=0) && i.removeClass(css).data('w',0).val('');

基本的に言う：

w is "truthy" (defined, true, a string, etc.)
AND set w to zero + convert the expression to true (because (w=0) would evaluate to 0, which is falsy)
AND evaluate i.removeClass(css).data('w',0).val('')
于 2010-10-04T22:00:49.360 に答える
2

質問している各ステートメントをそのコンポーネントに分解してみましょう。

w && !(w=0) && i.removeClass(css).data('w',0).val('');
  • w- w「本当」ですか？!= 0（この場合はチェックし ています）
  • !(w=0)- に設定wし0、結果の逆を取り、&&チェーンが継続するようにします
  • i.removeClass(css).data('w',0).val('')- クラスを削除し、データを設定し0て値をクリアします。
!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
  • !i.val()- 入力は空ですか?
  • (w=1)-wに設定1
  • i.addClass(css).data('w',1).val(text);- クラスを追加し、データを1設定し、透かしテキストが何であれテキストを設定します。

これらは両方とも、確かに読みやすさを犠牲にして、コードを実際に削減するための単なるステートメントです。非縮小バージョンを見ている場合、これは非常に一般的です。そうでない場合、これがオリジナルである場合は、サラダ フォークで作者を追跡してください。オリジナルは、この IMO よりも読みやすいはずですが、それでも問題ありません。縮小版の場合。

于 2010-10-04T21:58:57.660 に答える
1

これらは次のように書き換えることができます。

// w && !(w=0) && i.removeClass(css).data('w',0).val('');
if (w) {
    if (!(w=0)) {
        i.removeClass(css).data('w',0).val('');
    }
}

//!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
if (!i.val()) {
    if (w=1) {
        i.addClass(css).data('w',1).val(text);
    }
}

この&&ように使用することは、ネストされた s を使用することの単なる省略形ですif。その利点は次のとおりです。

  1. 展開されたネストされたifs よりもわずかに少ない文字を使用して、ブラウザーに配信されるペイロードを減らします。
  2. 訓練された目で読む方が速くなる可能性があります。

ただし、使用されている条件がかなり複雑であるため、上記の例はこの省略形の乱用であると言わざるを得ません。次の例のように、一連の単純なものをチェックする必要がある場合にのみ、この省略形に頼ります。

function log(s) {
    window.console && console.log && console.log(s);
}
于 2010-10-04T21:59:23.023 に答える
0

&& は And です。比較/複合条件文用です。if ステートメントの両方の条件が true である必要があります。それを書き直す別の方法はないと思います - それが And の構文です。

于 2010-10-04T21:55:53.767 に答える
0

に関して：

w && !(w=0) && i.removeClass(css).data('w',0).val('');

コード：

!(w=0) && i.removeClass(css).data('w',0).val('');

場合にのみ実行されます

w

真実です。

于 2010-10-04T21:58:18.497 に答える
0

使用する

w && !(w=0) && i.removeClass(css).data('w',0).val('');

この説明では、それぞれが true であることを確認しながら、複数のコマンドを一緒に並べることができます。

これは、次のように表すこともできます。

if (w) {

    w = 0;
    i.removeClass(css).data('w',0).val('');
}

最初に がwtrue と評価されることを確認し、そうである場合w=0は true でないかどうかをチェックします ( w != 0)。これも当てはまる場合は、実際のコマンドに進みます。

これは、遅延評価を使用する多くの言語で一般的な省略表現です。次の評価がand( &&) で囲まれている場合、false を返す場合、次のコマンドは実行されません。これは、次のように、前のステートメントが true を返す場合にのみ何かに対してアクションを実行したいような状況で役立ちます。

if (object != null && object.property == true)

オブジェクトを使用する前に null でないことを確認してください。そうしないと、null ポインターにアクセスすることになります。

于 2010-10-04T22:01:05.647 に答える