Using JQUERY Val(); as Multiple Element Getter

答えを見つけたら滅茶苦茶当たり前の解だった。

一つ前の話と根っこは同じで、「整理したい」の一環。まさにこれがやだ:

  1 function _cyanimenode_vis_filter(detail) {
  2     var aired_min_thr;
  3     var aired_max_thr;
  4     [aired_min_thr, aired_max_thr] = implhelper.build_yyyymm_range_from_ui(
  5         $("#aired-year-min-thr").val(),
  6         $("#aired-month-min-thr").val(),
  7         $("#aired-year-max-thr").val(),
  8         $("#aired-month-max-thr").val(),
  9         "-");
 10     var prem_min_thr;
 11     var prem_max_thr;
 12     [prem_min_thr, prem_max_thr] = implhelper.build_yyyymm_range_from_ui(
 13         $("#prem-year-min-thr").val(),
 14         $("#prem-season-min-thr").val(),
 15         $("#prem-year-max-thr").val(),
 16         $("#prem-season-max-thr").val(),
 17         "");
 18     var popularity_min_thr = $("#popularity-min-thr").val();
 19     var popularity_max_thr = $("#popularity-max-thr").val();
 20     var ranked_min_thr = $("#ranked-min-thr").val();
 21     var ranked_max_thr = $("#ranked-max-thr").val();
 22     var episodes_min_thr = $("#episodes-min-thr").val();
 23     var episodes_max_thr = $("#episodes-max-thr").val();
 24     var duration_min_thr = $("#duration-min-thr").val();
 25     var duration_max_thr = $("#duration-max-thr").val();
 26     var anime_favorites_min_thr = $("#anime-favorites-min-thr").val();
 27     var anime_favorites_max_thr = $("#anime-favorites-max-thr").val();
 28     var animetypes = null;
 29     var animetypesincl = $("#animetypes-incl-or-excl-incl").is(":checked");
 30     var animetypes_sel = animetypesincl ? "#animetypes-incl" : "#animetypes-excl";
 31     if ($(animetypes_sel).val().trim()) {
 32         animetypes = $(animetypes_sel).val().split(",").map(function (e) {
 33             return e.trim().toUpperCase();
 34         });
 35     }
 36     var genres = null;
 37     var genresincl = $("#genres-incl-or-excl-incl").is(":checked");
 38     var genres_sel = genresincl ? "#genres-incl" : "#genres-excl";
 39     if ($(genres_sel).val().trim()) {
 40         genres = $(genres_sel).val().split(",").map(function (e) {
 41             let k = Object.keys(_datmng.master["gnr"]).find(
 42                 (key) => (key.toLowerCase() === e.trim().toLowerCase()));
 43             return _datmng.master["gnr"][k];
 44         });
 45     }
 46     var producers = null;
 47     var producersincl = $("#producers-incl-or-excl-incl").is(":checked");
 48     var producers_sel = producersincl ? "#producers-incl" : "#producers-excl";
 49     if ($(producers_sel).val().trim()) {
 50         producers = $(producers_sel).val().split(",").map(function (e) {
 51             return _datmng._urlbuilder.malid2id(e.trim());
 52         });
 53     }
 54     if (!implhelper.JST_yyyymm_range_is_in_range(
 55         detail["aird"],
 56         aired_min_thr, aired_max_thr)) {
 57         return false;
 58     }
 59     if (detail["prem"] && !implhelper.is_in_range(
 60         detail["prem"][0],
 61         prem_min_thr, prem_max_thr)) {
 62         return false;
 63     }
 64     if (!implhelper.is_in_range(
 65         detail["popl"],
 66         popularity_min_thr, popularity_max_thr)) {
 67         return false;
 68     }
 69     if (!implhelper.is_in_range(
 70         detail["rnk"], ranked_min_thr, ranked_max_thr)) {
 71         return false;
 72     }
 73     if (!implhelper.is_in_range(
 74         detail["eps"],
 75         episodes_min_thr, episodes_max_thr)) {
 76         return false;
 77     }
 78     if (!implhelper.is_in_range(
 79         detail["dur"],
 80         duration_min_thr, duration_max_thr)) {
 81         return false;
 82     }
 83     if (!implhelper.is_in_range(
 84         detail["fav"],
 85         anime_favorites_min_thr, anime_favorites_max_thr)) {
 86         return false;
 87     }
 88     if (animetypes && animetypesincl !== animetypes.includes(detail["type"].toUpperCase())) {
 89         return false;
 90     }
 91     if (genres) {
 92         let found = detail["gnr"].findIndex(function (e) {
 93             return genres.includes(e);
 94         }) >= 0;
 95         if (found !== genresincl) {
 96             return false;
 97         }
 98     }
 99     if (producers) {
100         let found = false;
101         ["prod", "stdi"].forEach(function (k) {
102             if (!found && k in detail) {
103                 found = detail[k].findIndex(function (e) {
104                     return producers.includes(e);
105                 }) >= 0;
106             }
107         });
108         if (found !== producersincl) {
109             return false;
110         }
111     }
112     if (detail["ratg"]) {
113         let inc = false;
114         [
115             "#rating-g",
116             "#rating-pg",
117             "#rating-pg13",
118             "#rating-r",
119             "#rating-rp",
120             "#rating-rx",
121             "#rating-none",
122         ].some(function (sel) {
123             if ($(sel).val() === detail["ratg"]) {
124                 inc = $(sel).is(":checked");
125                 return true;
126             }
127         });
128         return inc;
129     }
130     return true;
131 }

implhelper なんて小さなユーティリティを書いたので少しマシには(これでも)なってるけど、いやぁ長過ぎるし、何より圧迫感があって読みづらいし、メンテナンスが大変。ここを少しでもどうにかならないかしら、と。

ご覧のとおり「min~max」という入力がかなり多いので、implhelper#xxx_is_in_range 系が Array で受け取れつつ、そして見出しの通りの「Using JQUERY Val(); as Multiple Element Getter」れれば、マシになるか? と、まぁそういう話。

こういうこと:


フレームのソースの表示ね、例によって。

これを適用することによって最初にあげた「やだなぁ」が劇的によくなる…かどうかはまとめ方次第だけれど、まぁ多分良く出来るでしょ…。



Related Posts