@ledsun blog

無味の味は佳境に入らざればすなわち知れず

JavaScript メモ

JSLintは使おう

「閉じ括弧が抜けている」とかのクソエラーを実行前に見つけてくれる

関数内の定義順

  1. プライベートプロパティ
  2. プライベート関数
  3. 処理
//プライベートプロパティ
//メッセージ
var msg = 'hello',

//プライベート関数
//メッセージを表示
show = function () {
    window.alert(msg);
};

//処理
show();

長い匿名関数に名前を付ける

15行超えたら一回しか使わなくても名前を付ける

高階関数でラップしてコンテキストを渡す。

var show = function (msg) {
    return function (event) {
        window.alert($(msg + event.target).val());
    }
}

$(':text').on('blur', show('welcome! '));

オブジェクト返すときはreturn{ hoge: hoge }

事前にオブジェクトを作らない
どこで何を入れているのか分からなくなる

$.dataにはDOMを指定

jQueryオブジェクトを指定しても別インスタンスだと値が取れない

require.jsのモジュールの実行順序を指定するときは関数を返す

利用側で関数を呼べば各自に制御できる

define([], function () {
    return function () {
      //初期化処理
    };
});

define(['init1', 'init2'], function (init1, init2) {
    init1();
    init2();
});

嘘かな?というか違う方法の方がよさげ。
依存モジュールの取り込みが終わるまでは実行されないので、それを活用する、とか?

jQuery.validation plugin に対する愚痴

  1. メソッド名がいまいち。validateメソッドが初期化で、formメソッドがform単位のバリデーション実行で、elementメソッドが要素単位のバリデーション実行
  2. validateメソッドに渡していいのはformだけ、ほかのを入れるとバリデーション実行時にエラーが起きる
  3. checkメソッドはtrue/false以外も返してくる。必須でない要素が空の時はundefinedを返す
  4. 決まった要素しか監視しない。しかし、そのセレクターは外部に公開されていない
  5. 初期値が入っているとrequiredが効かない
  6. changeイベントは監視しない。datepickerで値を入れても反応しない
  7. バリデーション状態が変わってもイベントを投げてくれない
  8. 二回初期化するとオプションが初期化される。メッセージが英語になったり
  9. エラーラベルは最初に表示するときに追加して、非表示にするときは削除じゃなくて非表示にする。(これはただのメモ)

IE9のpasteイベントでキャレット(カーソル)位置を設定しても反映されない

keyupイベントなら反映される
ペースト実行時に値を変更するとキャレットが最後に移動する。
元の位置に戻そうとしても反映されない。

callの置き換え

this参照を引数参照に置き換えればcallは無くせる。
イベントハンドラーに使わないならcallは無い方が美しい。

(function (){
    alert($(this).val)
}).call($hoge);
(function (target){
    alert($(target).val)
})($hoge);