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

みんなの評価 :
レスフィルター : (試験中)
>>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);
こうなるのは目に見えてるよね?
この時問題になるのは、新しい要素の新しいイベントを扱う処理を増やした時、
無関係であるはずのコード(つまり上のクロージャー部分)を修正しなければいけないということ。
無関係なはずなののに依存関係を作ってしまっている。
こういうのはコードが増えるにつれて、追加しづらく修正しづらく削除しづらいコードになる。
このコードが複雑。
なぜなら、今回は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);
こうなるのは目に見えてるよね?
この時問題になるのは、新しい要素の新しいイベントを扱う処理を増やした時、
無関係であるはずのコード(つまり上のクロージャー部分)を修正しなければいけないということ。
無関係なはずなののに依存関係を作ってしまっている。
こういうのはコードが増えるにつれて、追加しづらく修正しづらく削除しづらいコードになる。
>>442
> 「修正してあげた」にしては未修正部分が多すぎるから指摘を受けるんじゃない?
俺の言い方が気に食わない人は、俺がどんなコード書いたっていちゃもんつけるよw
俺の修正は、コードの量を減らす(もちろん可読性は犠牲にしない)ことを
目的としているのでもっと良い書き方があるのなら、
そんな口でわーわーいわないで、訂正したコードを書いてくれ。
> 「修正してあげた」にしては未修正部分が多すぎるから指摘を受けるんじゃない?
俺の言い方が気に食わない人は、俺がどんなコード書いたっていちゃもんつけるよw
俺の修正は、コードの量を減らす(もちろん可読性は犠牲にしない)ことを
目的としているのでもっと良い書き方があるのなら、
そんな口でわーわーいわないで、訂正したコードを書いてくれ。
>>454
2つそろったときのnums[0] == nums[2]のパターンが抜けてる
2つそろったときのnums[0] == nums[2]のパターンが抜けてる
>>458
{'stop':function (){}}みたいな、テーブルつかえばいい
{'stop':function (){}}みたいな、テーブルつかえばいい
みんなjQuery以前に自分でquerySelectorっぽいもの作ったじゃろ?
その時のことを思い出そう
いろいろ考れば、無駄は省いていけるけど
NodeListを篩に掛けるコスト自体はなくならない
その時のことを思い出そう
いろいろ考れば、無駄は省いていけるけど
NodeListを篩に掛けるコスト自体はなくならない
>>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);
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);
>>455
switch文か配列を使えばいいだろう
それでも複雑だと思うなら内部処理を関数に分ければいい
あるいは、addEventListner を複数定義してもいい
逆に聞くが、あなたが好むjQueryではこの場合はどうする?
バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか?
あなたがイベントを分けるほうがいいと思うなら、addEventListenerでも分ければいいだけ
難しく考えすぎなんじゃないか?
switch文か配列を使えばいいだろう
それでも複雑だと思うなら内部処理を関数に分ければいい
あるいは、addEventListner を複数定義してもいい
逆に聞くが、あなたが好むjQueryではこの場合はどうする?
バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか?
あなたがイベントを分けるほうがいいと思うなら、addEventListenerでも分ければいいだけ
難しく考えすぎなんじゃないか?
classListがなかった頃はこんな書き方もあった。
(' ' + element.className + ' ').indexOf(' hoge ') !== -1
しかし、ID:N3YK+MBc は本当にjQueryしか知らないんだな。
こんなのちょっと考えればわかるし、今までの経験からコードが蓄積されているのが普通だと思うんだが。
(' ' + element.className + ' ').indexOf(' hoge ') !== -1
しかし、ID:N3YK+MBc は本当にjQueryしか知らないんだな。
こんなのちょっと考えればわかるし、今までの経験からコードが蓄積されているのが普通だと思うんだが。
>>471
classNameがhogehogeとかだと詰むんじゃ?
classNameがhogehogeとかだと詰むんじゃ?
>>472
なぜ詰むのかわからないので理由を詳しく
なぜ詰むのかわからないので理由を詳しく
documentでイベントを一括管理するのって良くないと思う
関数の登録/解除ができないし、要素が削除された時もリスナが削除されないから
逆にそれを整備するなら個別に設定するのと結局変わらない
一括管理はターゲットが不定で、要素を区別しなくていい時にすべきで
要素で区別する必要があるなら個別に設定した方が間違いなくスマート
また、その場合でもdocumentではなくてターゲットの1つ親要素にした方がいいね
関数の登録/解除ができないし、要素が削除された時もリスナが削除されないから
逆にそれを整備するなら個別に設定するのと結局変わらない
一括管理はターゲットが不定で、要素を区別しなくていい時にすべきで
要素で区別する必要があるなら個別に設定した方が間違いなくスマート
また、その場合でもdocumentではなくてターゲットの1つ親要素にした方がいいね
どっちかっていうと、要素を追加した時にハンドラの設定のし直しをしなくてすむってのが目的じゃね?
まあ適材適所でいいじゃん
あとjQuery使う・使わないも、ケースによるだろうし
いつでもjQuery使うべきって言う論は原理主義者みたいで嫌いだな
あとjQuery使う・使わないも、ケースによるだろうし
いつでもjQuery使うべきって言う論は原理主義者みたいで嫌いだな
selectionオブジェクトの
anchorOffsetは、anchorNodeが非テキストノードの場合は、
anchorNode.childNodesに対する添字として機能すると思っていたのですが
IEで、contenteditableな要素でshift+enterを使ってBRを入力すると、
anchorOffsetはanchorNode.childNodesをはみ出てしまいます。
childNodesが1つしかない(つまり最大添え字は0)のに、
anchorOffsetが1になります
これはバグでしょうか?
それともこの動作が正しいのでしょうか?
anchorOffsetは、anchorNodeが非テキストノードの場合は、
anchorNode.childNodesに対する添字として機能すると思っていたのですが
IEで、contenteditableな要素でshift+enterを使ってBRを入力すると、
anchorOffsetはanchorNode.childNodesをはみ出てしまいます。
childNodesが1つしかない(つまり最大添え字は0)のに、
anchorOffsetが1になります
これはバグでしょうか?
それともこの動作が正しいのでしょうか?
ちなみにfirefoxでは、enterを入力した時、
<BR><BR>が入力され、anchorOffsetは一つ目のbrを指します
これは分かりやすい動作だと思います
しかしブラウザによってanchorNode, anchorOffsetの挙動が変わるとすれば
非常にやっかいになると思います
<BR><BR>が入力され、anchorOffsetは一つ目のbrを指します
これは分かりやすい動作だと思います
しかしブラウザによってanchorNode, anchorOffsetの挙動が変わるとすれば
非常にやっかいになると思います
ブラウザのデバッガのキー操作が
F10,F11,F12あたり統一されているのは何故ですか?
F10,F11,F12あたり統一されているのは何故ですか?
selectionやrangeを抽象化するライブラリrangy
http://code.google.com/p/rangy/
を使ってみても、
IEでのanchorNodeとanchorOffsetの値は同じでした
http://code.google.com/p/rangy/
を使ってみても、
IEでのanchorNodeとanchorOffsetの値は同じでした
配列の統合はconcatを使えば行えますが
連想配列の場合はfor inでチマチマやるしかないんでしょうか
連想配列の場合はfor inでチマチマやるしかないんでしょうか
http://jsperf.com/variables-local-cache/2
なんでキャッシュしないほうが高速なんだろう
なんでキャッシュしないほうが高速なんだろう
>>486 withCacheはcalがグローバル変数になってる
バッドノウハウの何がダメかっていうのは、
なんで「最初からそのコードを書かなかったのか?」
の一言で説明できる。
そのコードはわかりにくいから書かなかった。
わかりにくいコードは悪。
後から後から対応に追われることになる。
何度も同じ間違いをすることになる。
そういうのを防ぐ仕組みを作りなさい。
なんで「最初からそのコードを書かなかったのか?」
の一言で説明できる。
そのコードはわかりにくいから書かなかった。
わかりにくいコードは悪。
後から後から対応に追われることになる。
何度も同じ間違いをすることになる。
そういうのを防ぐ仕組みを作りなさい。
仕組みを作る(自作ライブラリ)ぐらいなら
jQueryを普通に使えばいいだろう。
なんで他人の成果を利用することを
極端に嫌がるんだ?
jQueryを普通に使えばいいだろう。
なんで他人の成果を利用することを
極端に嫌がるんだ?
>>468
ひどいコードだねw
日本語の部分を隠して、穴埋め問題にでもしてみようか。
var result;
if (n0 === n1) {
result = n1 === n2 ? ○: ☆;
} else {
result = (n0 === n2 || n1 === n2) ? △ : □;
}
このコードは何をしているのか答えなさい。
△には下記の三つのうちなにが当てはまるか答えなさい。
「全部そろった」「2つそろった!」「残念」
ひどいコードだねw
日本語の部分を隠して、穴埋め問題にでもしてみようか。
var result;
if (n0 === n1) {
result = n1 === n2 ? ○: ☆;
} else {
result = (n0 === n2 || n1 === n2) ? △ : □;
}
このコードは何をしているのか答えなさい。
△には下記の三つのうちなにが当てはまるか答えなさい。
「全部そろった」「2つそろった!」「残念」
>>478の件ですが
anchorNode.childNodes[anchorOffset]がnullなら
offsetを-1するようにしたら、
プログラムが動くようにはなりました
MSDNにも情報は少ないし、仕様なのか何なのかは分かりませんが・・
anchorNode.childNodes[anchorOffset]がnullなら
offsetを-1するようにしたら、
プログラムが動くようにはなりました
MSDNにも情報は少ないし、仕様なのか何なのかは分かりませんが・・
>>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) {
//処理
});
> 逆に聞くが、あなたが好む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) {
//処理
});
補足しておくと、
イベントハンドラを4つ、つまり document.addEventLIstener を
4回実行していると思うかもしれないがしていない。
jQueryが内部で一つだけイベントハンドラを割り当てて振り分けている。
そしてonメソッドの第二引数の、.stop というのは当然 "stop button" にも当てはまるし、
CSSセレクタなので、.sotp.buttonという書き方もできる。
もちろん#id.classとかtag[name=hoge]とかいう書き方もできるから
idが~で、さらにクラスが~とかタグが~とかにも対応できる。
イベントハンドラを4つ、つまり document.addEventLIstener を
4回実行していると思うかもしれないがしていない。
jQueryが内部で一つだけイベントハンドラを割り当てて振り分けている。
そしてonメソッドの第二引数の、.stop というのは当然 "stop button" にも当てはまるし、
CSSセレクタなので、.sotp.buttonという書き方もできる。
もちろん#id.classとかtag[name=hoge]とかいう書き方もできるから
idが~で、さらにクラスが~とかタグが~とかにも対応できる。
>>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 }] }
> 配列の統合は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 }] }
>>495
それ、前者の方が速いよね?
それ、前者の方が速いよね?
>>416
そこがわからないです。function startSlotの中で
runSlot(0);
runSlot(1);
runSlot(2);
と呼び出していますが何故それで function runSlot(n)が実行されるのでしょうか?
0, 1, 2 と n の関係がわからないです
>>418
timers[n] を timers と書いてしまったら [n] がないので区別がつかない(一致しない)のはわかりますが
私には書いている文字が違うから区別がつかないという認識しかありません
なんと言えばいいのかわかりませんが、添え字の[n] がないと何がどういう風に一致しなくなるのでしょうか?
>>419
書いていただいて申し訳ないのですが、どこを見ればいいのでしょうか?
あと、引数の例えで海水の話が出てきましたがこれは合っているのでしょうか?
そこがわからないです。function startSlotの中で
runSlot(0);
runSlot(1);
runSlot(2);
と呼び出していますが何故それで function runSlot(n)が実行されるのでしょうか?
0, 1, 2 と n の関係がわからないです
>>418
timers[n] を timers と書いてしまったら [n] がないので区別がつかない(一致しない)のはわかりますが
私には書いている文字が違うから区別がつかないという認識しかありません
なんと言えばいいのかわかりませんが、添え字の[n] がないと何がどういう風に一致しなくなるのでしょうか?
>>419
書いていただいて申し訳ないのですが、どこを見ればいいのでしょうか?
あと、引数の例えで海水の話が出てきましたがこれは合っているのでしょうか?



類似してるかもしれないスレッド
- + 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
トップメニューへ / →のくす牧場書庫について