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

JavaScript覧

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

451 = :

>>441 [].indexOf.call(nodeList, node)
>>449 obj.key4 || (obj.key4 = true); じゃないとエラーになるよ
>>450 NodeListがArrayインタフェースを持つかはまだ確定してないんじゃないの？

453 = :

どうやらプロパティ in objectでシンプルに書けそうです
>>449は取り下げます、ありがとうございました

>>451
指摘ありがとうございます
短絡評価というのは知りませんでした、気を付けたいと思います

455 = 427 :

>>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);

こうなるのは目に見えてるよね？
この時問題になるのは、新しい要素の新しいイベントを扱う処理を増やした時、
無関係であるはずのコード（つまり上のクロージャー部分）を修正しなければいけないということ。
無関係なはずなののに依存関係を作ってしまっている。
こういうのはコードが増えるにつれて、追加しづらく修正しづらく削除しづらいコードになる。

458 = :

>>455
>444ではないが、俺もよくそう書いてもやもやしてるわ・・・
typeごと振り分けた上でさらにidで分岐とかくそ面倒くさくなってくる
JQuery使えじゃなくて、もう少しいい方法はないものか

467 = :

みんなjQuery以前に自分でquerySelectorっぽいもの作ったじゃろ？
その時のことを思い出そう

いろいろ考れば、無駄は省いていけるけど
NodeListを篩に掛けるコスト自体はなくならない

468 = :

>>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 = :

>>455
switch文か配列を使えばいいだろう
それでも複雑だと思うなら内部処理を関数に分ければいい
あるいは、addEventListner を複数定義してもいい

逆に聞くが、あなたが好むjQueryではこの場合はどうする？
バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか？
あなたがイベントを分けるほうがいいと思うなら、addEventListenerでも分ければいいだけ
難しく考えすぎなんじゃないか？

471 = :

classListがなかった頃はこんな書き方もあった。

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

しかし、ID:N3YK+MBc は本当にjQueryしか知らないんだな。
こんなのちょっと考えればわかるし、今までの経験からコードが蓄積されているのが普通だと思うんだが。

472 = :

>>471
classNameがhogehogeとかだと詰むんじゃ？

473 = :

>>472
なぜ詰むのかわからないので理由を詳しく

475 = :

documentでイベントを一括管理するのって良くないと思う
関数の登録／解除ができないし、要素が削除された時もリスナが削除されないから
逆にそれを整備するなら個別に設定するのと結局変わらない

一括管理はターゲットが不定で、要素を区別しなくていい時にすべきで
要素で区別する必要があるなら個別に設定した方が間違いなくスマート
また、その場合でもdocumentではなくてターゲットの１つ親要素にした方がいいね

476 = :

どっちかっていうと、要素を追加した時にハンドラの設定のし直しをしなくてすむってのが目的じゃね?

477 = :

まあ適材適所でいいじゃん
あとjQuery使う・使わないも、ケースによるだろうし
いつでもjQuery使うべきって言う論は原理主義者みたいで嫌いだな

478 = :

selectionオブジェクトの
anchorOffsetは、anchorNodeが非テキストノードの場合は、
anchorNode.childNodesに対する添字として機能すると思っていたのですが
IEで、contenteditableな要素でshift+enterを使ってBRを入力すると、
anchorOffsetはanchorNode.childNodesをはみ出てしまいます。
childNodesが1つしかない（つまり最大添え字は0）のに、
anchorOffsetが1になります
これはバグでしょうか？
それともこの動作が正しいのでしょうか？

479 = :

ちなみにfirefoxでは、enterを入力した時、
<BR><BR>が入力され、anchorOffsetは一つ目のbrを指します
これは分かりやすい動作だと思います
しかしブラウザによってanchorNode, anchorOffsetの挙動が変わるとすれば
非常にやっかいになると思います

481 = :

偶然

482 = :

selectionやrangeを抽象化するライブラリrangy
http://code.google.com/p/rangy/
を使ってみても、
IEでのanchorNodeとanchorOffsetの値は同じでした

483 = :

javascript系ブログでこいつのコードは綺麗だなって人いますか？

484 = :

配列の統合はconcatを使えば行えますが
連想配列の場合はfor inでチマチマやるしかないんでしょうか

485 = :

lodashで出来る
はい論破

486 = :

http://jsperf.com/variables-local-cache/2
なんでキャッシュしないほうが高速なんだろう

488 = :

>>471
そういうのをバッドノウハウっていうんだよ。

クラス名が、'hoge' and 'bar' の場合はどうするの？

489 = :

バッドノウハウの何がダメかっていうのは、

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

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

そういうのを防ぐ仕組みを作りなさい。

490 = :

仕組みを作る（自作ライブラリ）ぐらいなら
jQueryを普通に使えばいいだろう。

なんで他人の成果を利用することを
極端に嫌がるんだ？

491 = :

>>468
ひどいコードだねｗ
日本語の部分を隠して、穴埋め問題にでもしてみようか。

var result;

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


このコードは何をしているのか答えなさい。
△には下記の三つのうちなにが当てはまるか答えなさい。
「全部そろった」「2つそろった！」「残念」

492 = :

>>478の件ですが
anchorNode.childNodes[anchorOffset]がnullなら
offsetを-1するようにしたら、
プログラムが動くようにはなりました
MSDNにも情報は少ないし、仕様なのか何なのかは分かりませんが・・

493 = :

>>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 = :

補足しておくと、

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

そしてonメソッドの第二引数の、.stop というのは当然 "stop button" にも当てはまるし、
CSSセレクタなので、.sotp.buttonという書き方もできる。
もちろん#id.classとかtag[name=hoge]とかいう書き方もできるから
idが～で、さらにクラスが～とかタグが～とかにも対応できる。

495 = :

>>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に言って欲しいｗ

496 = :

>>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 = :

>>495
それ、前者の方が速いよね？

498 = :

>>497
0.0001秒ぐらい速いんじゃない？

開発速度であれば後者のほうが圧倒的に速いけど。
前者は長い上に柔軟性もなく間違いやすい。
まず多くの人がclassName=～って書き方をするだろうしね
実際に>>444がやらしかしてしまったように。

499 = :

>>416
そこがわからないです。function startSlotの中で
runSlot(0);
runSlot(1);
runSlot(2);
と呼び出していますが何故それで function runSlot(n)が実行されるのでしょうか？
0, 1, 2 と n の関係がわからないです

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

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

あと、引数の例えで海水の話が出てきましたがこれは合っているのでしょうか？

500 = :

>>498
あ、いやそういう話じゃなくてさ

$の中にはいっぱい関数があるじゃん
だから>>495みたいな二つを比べてみるなら
見たままじゃなくて、$の中のコードと比較しないと

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ

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

• + JavaScript の質問用スレッド vol.113 + (1001) - [100%] - 2014/1/25 12:46
• + JavaScript の質問用スレッド vol.118 + (1002) - [97%] - 2014/8/29 22:30
• + JavaScript の質問用スレッド vol.116 + (1002) - [97%] - 2014/7/1 0:45
• + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
• + JavaScript の質問用スレッド vol.114 + (1001) - [97%] - 2014/5/3 10:45
• + JavaScript の質問用スレッド vol.119 + (1002) - [97%] - 2014/10/3 15:30
• + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
• + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
• + JavaScript の質問用スレッド vol.111 + (1001) - [97%] - 2013/11/4 6:00
• + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
• + JavaScript の質問用スレッド vol.117 + (1009) - [97%] - 2014/8/5 3:30
• + JavaScript の質問用スレッド vol.123 + (966) - [97%] - 2020/10/20 2:30
• + JavaScript の質問用スレッド vol.103 + (1001) - [97%] - 2012/11/9 15:30
• + JavaScript の質問用スレッド vol.123 + (1002) - [97%] - 2015/4/27 23:30
• + JavaScript の質問用スレッド vol.143 + (753) - [97%] - 2020/4/19 5:00
• + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2015/1/1 18:30
• + JavaScript の質問用スレッド vol.120 + (1002) - [95%] - 2014/11/8 1:15