JQueryのクマっ対策備忘録

コンソールログをどうにかしたい

Javascriptのデバッグでconsole.logは強力な主力武器ですが、本番環境でたまたま残ってしまっていたコンソールログが動くのは避けたいところ。
そこでとったのが、コンソールログのメソッドを無名関数で代入して上書きするという最終手段。
logメソッド自体を無くしてしまうと、今度はエラーが出るようになってしまうのでメソッドは残す必要があります。

<script type="text/javascript">
    console.log = function () {}
</script>

スタイルのないクラスを作っても動く

グルーピングして一部だけ一括取得できるようにしたい、みたいなときにスタイルのないクラスを付与して、そのクラス名でJQueryにて要素を取得できます。
下記の例ではテーブルの特定の列にclickイベント設定をしています。

<script type="text/javascript">
    $(".sortable").on('click', function (e) {
        /* ...中略... */
    });
</script>

<!-- ...中略... -->

<th class="sortable" data-column="columnA">カラム１</th>
<th>カラム２</th>
<th class="sortable" data-column="columnB">カラム３</th>

独自のカスタムイベントが動かない

Ajaxで動的に要素を書きだした場合などによくみます。
最初にクラス指定をして一括で要素に独自のカスタムイベントを登録していても、Javascriptで後からそのクラス名を持った要素を追加すると、その要素ではカスタムイベントが動きません。
追加した要素にイベントをつけてあげる必要があります。
再度クラス全体に再登録をすると既存の要素に多重登録されるため、一旦カスタムイベントを破棄して付け直すとうまく動きます。
同じロジックを方々にちりばめるとカオス旋風が巻き起こりますので、外部切り出しておくとよいかもしれません。

<script type="text/javascript">
    function defSortEvents () {
        $(".sortable").off('click').on('click', function () {
            /* ...中略... */
        });
    }
    $(function(){
        defSortEvents ();
        /* ...中略... */
        $("#table").append("<th class="sortable" data-column="columnC">カラム４</th>");
        //このままだとカラム４でソートイベントが起きないので再設定をする
        defSortEvents ();
    });
</script>

イベントをグループ分けしたい

イベント名の名前空間という仕様を使うといいかんじです。

<script type="text/javascript">
    $(function(){
        $(".alert").off('click.alert').on('click.alert', function () {
            alert("実はリンクなんです");
        });
        $(".link").off('click.link').on('click.link', function () {
            location.href = $(this).data("url");
        });
    });
</script>

<!-- ...中略... -->

<span data-url="/sample/method/" class="alert link">実はリンク機能があるSPANタグ</span>