のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,627,171人
昨日:no data人
今日:
最近の注目
人気の最安値情報

私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

元スレ+ JavaScript の質問用スレッド vol.113 +

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
レスフィルター : (試験中)
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
451 : Name_Not - 2014/02/18(火) 17:45:35.43 ID:??? (+43,-30,-24)
>>441 [].indexOf.call(nodeList, node)
>>449 obj.key4 || (obj.key4 = true); じゃないとエラーになるよ
>>450 NodeListがArrayインタフェースを持つかはまだ確定してないんじゃないの?
452 : Name_Not - 2014/02/18(火) 17:48:02.59 ID:??? (-1,-29,-18)
指定id以下の要素をremoveChildしたいんですが可能でしょうか
453 : 449 - 2014/02/18(火) 21:02:56.25 ID:??? (+70,+29,-52)
どうやらプロパティ in objectでシンプルに書けそうです
>>449は取り下げます、ありがとうございました

>>451
指摘ありがとうございます
短絡評価というのは知りませんでした、気を付けたいと思います
455 : Name_Not - 2014/02/18(火) 21:31:08.09 ID:N3YK+MBc (+1,-30,-209)
>>444
このコードが複雑。
なぜなら、今回はstopだけでいいかもしれないが、
その他の処理も扱おうとしたらどうなる?

document.addEventLIstener('click', function (event) {
 var target = event.target;
 
 if (target.className === 'stop') {
  // 処理
 }
 if (target.className === 'a') {
  // 処理
 }  
 if (target.className === 'b') {
  // 処理
 }  
 if (target.className === 'c') {
  // 処理
 }
}, false);

こうなるのは目に見えてるよね?
この時問題になるのは、新しい要素の新しいイベントを扱う処理を増やした時、
無関係であるはずのコード(つまり上のクロージャー部分)を修正しなければいけないということ。
無関係なはずなののに依存関係を作ってしまっている。
こういうのはコードが増えるにつれて、追加しづらく修正しづらく削除しづらいコードになる。
456 : Name_Not - 2014/02/18(火) 21:35:18.82 ID:N3YK+MBc (-7,+30,-78)
>>442
> 「修正してあげた」にしては未修正部分が多すぎるから指摘を受けるんじゃない?

俺の言い方が気に食わない人は、俺がどんなコード書いたっていちゃもんつけるよw

俺の修正は、コードの量を減らす(もちろん可読性は犠牲にしない)ことを
目的としているのでもっと良い書き方があるのなら、
そんな口でわーわーいわないで、訂正したコードを書いてくれ。
457 : Name_Not - 2014/02/18(火) 21:47:25.32 ID:??? (-15,-29,-8)
>>454
2つそろったときのnums[0] == nums[2]のパターンが抜けてる
458 : Name_Not - 2014/02/18(火) 21:52:00.56 ID:??? (+54,+29,-37)
>>455
>444ではないが、俺もよくそう書いてもやもやしてるわ・・・
typeごと振り分けた上でさらにidで分岐とかくそ面倒くさくなってくる
JQuery使えじゃなくて、もう少しいい方法はないものか
460 : Name_Not - 2014/02/18(火) 21:56:37.44 ID:N3YK+MBc (-22,+29,-18)
>>457
ほんとだねw コピペしてよく見ていなかった。

それで、比較を一回にするコードに直すことで、
どうシンプルになるだろうか。早く見てみたい。
461 : Name_Not - 2014/02/18(火) 21:57:48.61 ID:N3YK+MBc (-13,+29,-77)
>>458
> JQuery使えじゃなくて、もう少しいい方法はないものか

「JQueryと同じ仕組みを作れ。」じゃない?w

まあ車輪の再発明するぐらいなら、
jQuery使えって話だよ。
463 : Name_Not - 2014/02/18(火) 22:06:07.04 ID:??? (-27,-29,-1)
>>458
{'stop':function (){}}みたいな、テーブルつかえばいい
465 : Name_Not - 2014/02/18(火) 22:19:00.92 ID:??? (-9,-21,-14)
ビット演算
466 : Name_Not - 2014/02/18(火) 22:20:19.83 ID:N3YK+MBc (-23,+27,-26)
>>465
興味深いね。

具体的なコードを教えて下さい。
467 : Name_Not - 2014/02/19(水) 00:16:37.49 ID:??? (+62,+29,-49)
みんなjQuery以前に自分でquerySelectorっぽいもの作ったじゃろ?
その時のことを思い出そう

いろいろ考れば、無駄は省いていけるけど
NodeListを篩に掛けるコスト自体はなくならない
468 : Name_Not - 2014/02/19(水) 00:28:24.92 ID:??? (+1,-30,-121)
>>454

var result;

if (nums[0] === nums[1]) {
 result = nums[1] === nums[2] ? '全部そろった!' : '2つそろった!';
} else {
 result = (nums[0] === nums[2] || nums[1] === nums[2]) ? '2つそろった!' : '残念';
}

alert(result);
469 : Name_Not - 2014/02/19(水) 00:34:20.83 ID:??? (+68,+29,-123)
>>455
switch文か配列を使えばいいだろう
それでも複雑だと思うなら内部処理を関数に分ければいい
あるいは、addEventListner を複数定義してもいい

逆に聞くが、あなたが好むjQueryではこの場合はどうする?
バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか?
あなたがイベントを分けるほうがいいと思うなら、addEventListenerでも分ければいいだけ
難しく考えすぎなんじゃないか?
470 : Name_Not - 2014/02/19(水) 00:40:02.81 ID:??? (-11,-29,-34)
>>462
classListを使えばいいだけでしょ
jQueryばかり使ってるから標準APIを覚えないんだよ
471 : Name_Not - 2014/02/19(水) 00:57:31.35 ID:??? (+11,-30,-79)
classListがなかった頃はこんな書き方もあった。

(' ' + element.className + ' ').indexOf(' hoge ') !== -1

しかし、ID:N3YK+MBc は本当にjQueryしか知らないんだな。
こんなのちょっと考えればわかるし、今までの経験からコードが蓄積されているのが普通だと思うんだが。
472 : Name_Not - 2014/02/19(水) 01:02:20.66 ID:??? (+32,-29,-11)
>>471
classNameがhogehogeとかだと詰むんじゃ?
473 : Name_Not - 2014/02/19(水) 01:05:02.83 ID:??? (+62,+29,-1)
>>472
なぜ詰むのかわからないので理由を詳しく
475 : Name_Not - 2014/02/19(水) 11:04:35.37 ID:??? (+62,+29,-84)
documentでイベントを一括管理するのって良くないと思う
関数の登録/解除ができないし、要素が削除された時もリスナが削除されないから
逆にそれを整備するなら個別に設定するのと結局変わらない

一括管理はターゲットが不定で、要素を区別しなくていい時にすべきで
要素で区別する必要があるなら個別に設定した方が間違いなくスマート
また、その場合でもdocumentではなくてターゲットの1つ親要素にした方がいいね
476 : Name_Not - 2014/02/19(水) 11:22:40.29 ID:??? (+57,+29,-15)
どっちかっていうと、要素を追加した時にハンドラの設定のし直しをしなくてすむってのが目的じゃね?
477 : Name_Not - 2014/02/19(水) 12:54:18.16 ID:??? (+57,+29,-44)
まあ適材適所でいいじゃん
あとjQuery使う・使わないも、ケースによるだろうし
いつでもjQuery使うべきって言う論は原理主義者みたいで嫌いだな
478 : Name_Not - 2014/02/19(水) 16:05:49.69 ID:??? (+39,-30,-152)
selectionオブジェクトの
anchorOffsetは、anchorNodeが非テキストノードの場合は、
anchorNode.childNodesに対する添字として機能すると思っていたのですが
IEで、contenteditableな要素でshift+enterを使ってBRを入力すると、
anchorOffsetはanchorNode.childNodesをはみ出てしまいます。
childNodesが1つしかない(つまり最大添え字は0)のに、
anchorOffsetが1になります
これはバグでしょうか?
それともこの動作が正しいのでしょうか?
479 : Name_Not - 2014/02/19(水) 16:21:47.28 ID:??? (+3,-30,-53)
ちなみにfirefoxでは、enterを入力した時、
<BR><BR>が入力され、anchorOffsetは一つ目のbrを指します
これは分かりやすい動作だと思います
しかしブラウザによってanchorNode, anchorOffsetの挙動が変わるとすれば
非常にやっかいになると思います
480 : Name_Not - 2014/02/19(水) 18:15:22.31 ID:??? (-1,-29,-16)
ブラウザのデバッガのキー操作が
F10,F11,F12あたり統一されているのは何故ですか?
481 : Name_Not - 2014/02/19(水) 18:31:51.68 ID:??? (+42,+24,+0)
偶然
482 : Name_Not - 2014/02/19(水) 18:53:51.13 ID:??? (+3,-30,-29)
selectionやrangeを抽象化するライブラリrangy
http://code.google.com/p/rangy/
を使ってみても、
IEでのanchorNodeとanchorOffsetの値は同じでした
483 : Name_Not - 2014/02/19(水) 19:53:28.61 ID:??? (+49,+21,-21)
javascript系ブログでこいつのコードは綺麗だなって人いますか?
484 : Name_Not - 2014/02/19(水) 21:13:48.96 ID:??? (+4,-29,-44)
配列の統合はconcatを使えば行えますが
連想配列の場合はfor inでチマチマやるしかないんでしょうか
485 : Name_Not - 2014/02/19(水) 21:17:42.95 ID:??? (+12,-17,-14)
lodashで出来る
はい論破
486 : Name_Not - 2014/02/19(水) 21:21:33.68 ID:??? (+6,+28,-1)
http://jsperf.com/variables-local-cache/2
なんでキャッシュしないほうが高速なんだろう
487 : Name_Not - 2014/02/19(水) 21:26:24.90 ID:??? (-1,-29,-29)
>>486 withCacheはcalがグローバル変数になってる
488 : Name_Not - 2014/02/19(水) 21:26:54.97 ID:??? (+4,-29,-14)
>>471
そういうのをバッドノウハウっていうんだよ。

クラス名が、'hoge' and 'bar' の場合はどうするの?
489 : Name_Not - 2014/02/19(水) 21:29:18.63 ID:??? (+63,+30,-60)
バッドノウハウの何がダメかっていうのは、

なんで「最初からそのコードを書かなかったのか?」
の一言で説明できる。

そのコードはわかりにくいから書かなかった。
わかりにくいコードは悪。
後から後から対応に追われることになる。
何度も同じ間違いをすることになる。

そういうのを防ぐ仕組みを作りなさい。
490 : Name_Not - 2014/02/19(水) 21:30:44.79 ID:??? (+57,+29,-36)
仕組みを作る(自作ライブラリ)ぐらいなら
jQueryを普通に使えばいいだろう。

なんで他人の成果を利用することを
極端に嫌がるんだ?
491 : Name_Not - 2014/02/19(水) 21:35:45.97 ID:??? (+37,-30,-142)
>>468
ひどいコードだねw
日本語の部分を隠して、穴埋め問題にでもしてみようか。

var result;

if (n0 === n1) {
 result = n1 === n2 ? ○: ☆;
} else {
 result = (n0 === n2 || n1 === n2) ? △ : □;
}


このコードは何をしているのか答えなさい。
△には下記の三つのうちなにが当てはまるか答えなさい。
「全部そろった」「2つそろった!」「残念」
492 : Name_Not - 2014/02/19(水) 21:37:33.86 ID:??? (+4,-30,-36)
>>478の件ですが
anchorNode.childNodes[anchorOffset]がnullなら
offsetを-1するようにしたら、
プログラムが動くようにはなりました
MSDNにも情報は少ないし、仕様なのか何なのかは分かりませんが・・
493 : Name_Not - 2014/02/19(水) 21:38:44.89 ID:??? (+18,-30,-225)
>>469
> 逆に聞くが、あなたが好むjQueryではこの場合はどうする?
> バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか?

>>455をjQueryにすればいいんだよね?

$(document).on('click', '.stop', function(event) {
 //処理
});
$(document).on('click', '.a', function(event) {
 //処理
});
$(document).on('click', '.b', function(event) {
 //処理
});
$(document).on('click', '.c', function(event) {
 //処理
});
494 : 493 - 2014/02/19(水) 21:43:47.93 ID:??? (+3,-30,-138)
補足しておくと、

イベントハンドラを4つ、つまり document.addEventLIstener を
4回実行していると思うかもしれないがしていない。
jQueryが内部で一つだけイベントハンドラを割り当てて振り分けている。

そしてonメソッドの第二引数の、.stop というのは当然 "stop button" にも当てはまるし、
CSSセレクタなので、.sotp.buttonという書き方もできる。
もちろん#id.classとかtag[name=hoge]とかいう書き方もできるから
idが~で、さらにクラスが~とかタグが~とかにも対応できる。
495 : Name_Not - 2014/02/19(水) 21:48:09.88 ID:??? (+125,-30,-183)
>>444は訂正して欲しい。

document.addEventLIstener('click', function (event) {
 var target = event.target;
 
 if ((' ' + element.className + ' ').indexOf(' stop ') !== -1 ) {
  // 処理
 }
}, false);

と同等のjQueryコード

$(document).on('click', 'stop', function (event) {
  // 処理
});

この二つを比べてみよう。と>>444に言って欲しいw
496 : Name_Not - 2014/02/19(水) 21:51:49.98 ID:??? (+4,-30,-116)
>>484
> 配列の統合はconcatを使えば行えますが
> 連想配列の場合はfor inでチマチマやるしかないんでしょうか

>>485が正解。lodashでできる。
http://lodash.com/docs#merge

var names = {
'characters': [
{ 'name': 'barney' },
{ 'name': 'fred' }
]
};

var ages = {
'characters': [
{ 'age': 36 },
{ 'age': 40 }
]
};

_.merge(names, ages);
// → { 'characters': [{ 'name': 'barney', 'age': 36 }, { 'name': 'fred', 'age': 40 }] }
497 : Name_Not - 2014/02/19(水) 22:45:23.91 ID:??? (+99,+29,-4)
>>495
それ、前者の方が速いよね?
498 : Name_Not - 2014/02/19(水) 22:55:09.84 ID:??? (+109,+29,-28)
>>497
0.0001秒ぐらい速いんじゃない?

開発速度であれば後者のほうが圧倒的に速いけど。
前者は長い上に柔軟性もなく間違いやすい。
まず多くの人がclassName=~って書き方をするだろうしね
実際に>>444がやらしかしてしまったように。
499 : Name_Not - 2014/02/19(水) 23:06:24.44 ID:??? (+16,-30,-152)
>>416
そこがわからないです。function startSlotの中で
runSlot(0);
runSlot(1);
runSlot(2);
と呼び出していますが何故それで function runSlot(n)が実行されるのでしょうか?
0, 1, 2 と n の関係がわからないです

>>418
timers[n] を timers と書いてしまったら [n] がないので区別がつかない(一致しない)のはわかりますが
私には書いている文字が違うから区別がつかないという認識しかありません
なんと言えばいいのかわかりませんが、添え字の[n] がないと何がどういう風に一致しなくなるのでしょうか?

>>419
書いていただいて申し訳ないのですが、どこを見ればいいのでしょうか?

あと、引数の例えで海水の話が出てきましたがこれは合っているのでしょうか?
500 : Name_Not - 2014/02/19(水) 23:06:24.79 ID:??? (+119,+29,-15)
>>498
あ、いやそういう話じゃなくてさ

$の中にはいっぱい関数があるじゃん
だから>>495みたいな二つを比べてみるなら
見たままじゃなくて、$の中のコードと比較しないと
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド


トップメニューへ / →のくす牧場書庫について