こういうの、WEB アプリケーションが本業の人には常識なんだろうなぁ。
まだまだ javascript そのものも jQuery もずっと不慣れで、学ぶことが多過ぎて悲鳴が止まらないわけなんだけれどもね。
javascript なプログラミングの共通で尽きない悩みというのが、「名前空間の隔離」なわけよね。ワタシのように、「遊びだとしょっぱなは常に「雑モード」で始めてしまう」スタイルでも、そうでなくても、どうしても「名前衝突にヒヤヒヤしながらもグローバル変数」に安直に頼ってしまう。「命名規則」である程度は回避出来たとしても、これが完全な解ではないことは明らかで。
随分前にWordPress なネタで名前衝突回避の技について書いたけれど、さすがに「全部をこれで」とやるほどのもんでもないわいな、ということで、やっぱり作り始めの頃ほどグローバルに頼っちゃう。
「prototype 指向を活用して」結構改善するところはもちろんあるけれど、それでも「その class のようにまとめたもの」をインスタンス化して変数に持つとなれば、やっぱり同じ名前問題にはぶち当たる。
ということはずっと頭の片隅にありつつやってたんだけど、それとは全然関係ない、「入力インターフェイスコンポーネントの change に反応するとして、その「変化前」を取れないかしら?」と思うことがあってヒットしたのがこの Stackoverflow の質問と回答。結局ここにあった回答を使うことはなかったんだけれど、回答の中で人気があるのが jquery.data() を活用するアプローチだったのね。ほぉ、これは…、と。
実際まさにワタシは二つ前でグローバル変数に頼ってる。こういうとこで使えるかしら?
単なる DOM アクセスのショートカットに過ぎないのは明らかだけれど、「すぐに使える」のはやっぱありがてぇ。で、二つ前の「オレだオレだオレだオレだオレだ」を維持しときたい場所は、#producers-list ということになるな。やってみる:
1 //var __producers_list_triggered = null; // こういうのをやめたいのだ
2 $("#producers-list").tabulator({
3 // ...
4 rowSelectionChanged: function(data, rows) {
5 var target = null;
6 /* 元々こうしてた
7 if (__producers_list_triggered == "open-filters-producer-incl-list") {
8 target = $("#producers-incl");
9 } else {
10 target = $("#producers-excl");
11 }
12 */
13 if ($("#producers-list").data("triggered") == "open-filters-producer-incl-list") {
14 target = $("#producers-incl");
15 } else {
16 target = $("#producers-excl");
17 }
18 // ...
19 target.val(newlist.join(", "));
20 target.trigger("change");
21 },
22 });
23 $(".open-filters-producer-list").on("click", function(ev) {
24 // 酸素欠乏症型おれだおれだおれだおれだぁ
25 //__producers_list_triggered = $(this).attr("id");
26 // ニュータイプおれだおれだおれだおれだぁ
27 $("#producers-list").data("triggered", $(this).attr("id"));
28 $("#filters-producer-list").dialog({
29 // ...
30 open: function(ev, ui) {
31 $("#search-producers").val("");
32 $("#producers-list").tabulator("clearData");
33 },
34 });
35 });
うん、いいね。日常使いにしよう、jquery.data()。上のコードの場合、「target」を直接書き込んでしまってもいいよね、すはらしい。
まぁこれも雑に使うと今度は「コードの可読性」を著しく落とすことになるので、そこは注意深く、てことではあるけれども。(あと当たり前だが $("#body").data("...") のように、よりグローバルなノードに突っ込みまくってたら問題はほとんど何も解決しない。)
07:30追記:
ドキュメントをざーっと読んでた。HTML5 data-* Attributes。「不慣れで学ぶことが多い」と最初に言った通りで、というよりはもっと正確には「ワタシの元から持ってた知識が非常に古い」てことね、HTML 5 の知識なんかほっとんどない。ゆえ、はじめて知った、HTML5 data-* Attributes そのものについて。
最近よく「これまで見かけなかった属性を付けてるサイトが多いなぁ、HTML 5 なんだろうなぁ」という程度で「よく見かけてはいた」。今ワタシが相手してる MyAnimeList.net もそう。サムネイル画像の列挙で data-srcs なんてのを使ってて、これも多分 HTML 5 data-* attributes なんだよね?
ともあれ jquery.data はこれとの関連付けを自動でやってくれるそうだ。そっちの使い方を主食にするのも結構ありがちな気がするわね。(そして上であげたワタシの使い方と衝突しないように気をつけないといけない、ということも意味する。)
