私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレjQuery ライブラリ 総合質問所 vol.4
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
そう思うなら勝手にそう思ってればいい
検索でヒットするか否かは結果の通り
検索でヒットするか否かは結果の通り
jQueryスレ立てたい奴はちゃんとライブラリスレでお伺いをたてろよ勝手にスレを立てて勝手に誘導する奴はコノスレヲ立てた荒らしと同じだからな
ここスレ立てしてもなかなか落ちない板なのに
あまり考えないで立てる奴多いよな
あまり考えないで立てる奴多いよな
>>103
何様w
何様w
何かを始める前に相談するという当たり前のマナーを守れない奴もいるんだな
好き勝手に何でもやっていいと思ってる
好き勝手に何でもやっていいと思ってる
jQueryの質問はjQueryスレにするのが同然なのですね
わかりました
わかりました
jQueryって今主流?googletrendsで確認したら2012年をピークに下がっているんだけど...
ウェブデザインの勉強を独学でしていてj-queryは必須と思っていたのですが現場はどうなんでしょうか?
ウェブデザインの勉強を独学でしていてj-queryは必須と思っていたのですが現場はどうなんでしょうか?
ウェブデザインでjQuery?
言っとくけど、jQueryは使われているが
ほとんどのjQueryプラグインはゴミだぞ。
あれは勉強する価値がない
言っとくけど、jQueryは使われているが
ほとんどのjQueryプラグインはゴミだぞ。
あれは勉強する価値がない
ゴミではないだろ
ゴミは>>115
ゴミは>>115
>>118
ほとんど意味が無いよ。
$hogeに入れるのは、セレクタを解釈する時間が惜しいから。
セレクタの解釈をJavaScriptで実装しているから遅い。
そしてセレクタに一致したものを検索するのに時間が掛かるから。
だけど、セレクタがシンプルでgetElementByIdやgetElementByNameなどが
使えたり、最近のブラウザならquerySelectorAll場合には、セレクタに一致するものを
検索する時間は少なくなる。
さらにそれより時間がかからないのがthisや任意のDOM要素の場合。
この場合は、セレクタを解釈したり要素を検索する必要がなくて
jQueryオブジェクトでラップするだけなので著しく速くなる。
もちろんjQueryオブジェクトでラップする分時間はかかるが
ループの中で何万回と参照してやっと違いが出るくらいだと思うよ。
ほとんど意味が無いよ。
$hogeに入れるのは、セレクタを解釈する時間が惜しいから。
セレクタの解釈をJavaScriptで実装しているから遅い。
そしてセレクタに一致したものを検索するのに時間が掛かるから。
だけど、セレクタがシンプルでgetElementByIdやgetElementByNameなどが
使えたり、最近のブラウザならquerySelectorAll場合には、セレクタに一致するものを
検索する時間は少なくなる。
さらにそれより時間がかからないのがthisや任意のDOM要素の場合。
この場合は、セレクタを解釈したり要素を検索する必要がなくて
jQueryオブジェクトでラップするだけなので著しく速くなる。
もちろんjQueryオブジェクトでラップする分時間はかかるが
ループの中で何万回と参照してやっと違いが出るくらいだと思うよ。
$thi = $(this)
変数に入れるのは、変数が1つ増えるだけで、
特に損はないでしょ?
それとも、変数の管理がしにくくなる?
変数に入れるのは、変数が1つ増えるだけで、
特に損はないでしょ?
それとも、変数の管理がしにくくなる?
変数っていうのは名前をつけるっていうことなんだけど、
何のために名前をつけるのか?ってことだよ。
$thisも$(this)も、ほとんど同じ単語、同じ意味なわけで
わざわざ名前をつける理由がない。
後からみた時になんでそんな名前をつけたのかわからないしね。
要するに意味が無いことはやらないほうがいいよ。
必要のないものは書かない。これがコードの鉄則
何のために名前をつけるのか?ってことだよ。
$thisも$(this)も、ほとんど同じ単語、同じ意味なわけで
わざわざ名前をつける理由がない。
後からみた時になんでそんな名前をつけたのかわからないしね。
要するに意味が無いことはやらないほうがいいよ。
必要のないものは書かない。これがコードの鉄則
>>118
意味はあるが、パフォーマンスを気にするなら this のまま利用して、 DOM API を使うことも検討した方がいい
意味はあるが、パフォーマンスを気にするなら this のまま利用して、 DOM API を使うことも検討した方がいい
変数の名前には誰も触れてないのにいきなり持論を繰り出すのは例の人か
$this がNGなら別のユニークな名前を付ければいいだけ
そして、誰も質問してない内容を主張するのは時間の無駄
$this がNGなら別のユニークな名前を付ければいいだけ
そして、誰も質問してない内容を主張するのは時間の無駄
>>124
> $this がNGなら別のユニークな名前を付ければいいだけ
違う名前をつけるのなら意味はあるよ。
これはリファクタリング関連の用語で「説明用変数」とか言われているやつで
http://www.woodensoldier.info/computer/refactoring/IntroduceExplaningVariable.htm
例えば関数が長すぎたり、違う意味のthisが近くにたくさんあったりして
コードが読みづらい時に、コードを説明するためにつける変数
thisが分かりにくいから説明としてつけるわけで、$thisとかいう名前だと
何も説明になってないから意味が無いわけ。
(なお、$(this)を変数に入れてもパフォーマンスの点ではほぼ意味が無いことは既に言ったとおり)
> $this がNGなら別のユニークな名前を付ければいいだけ
違う名前をつけるのなら意味はあるよ。
これはリファクタリング関連の用語で「説明用変数」とか言われているやつで
http://www.woodensoldier.info/computer/refactoring/IntroduceExplaningVariable.htm
例えば関数が長すぎたり、違う意味のthisが近くにたくさんあったりして
コードが読みづらい時に、コードを説明するためにつける変数
thisが分かりにくいから説明としてつけるわけで、$thisとかいう名前だと
何も説明になってないから意味が無いわけ。
(なお、$(this)を変数に入れてもパフォーマンスの点ではほぼ意味が無いことは既に言ったとおり)
>>126
> 毎回$(this)使うことが意味が無いこと、必要のないことではないの?
一旦変数に入れるとしたら、
var $x = $(this)
最低限これだけのコードが必要でしょ?
それだけのコードを書いた結果、節約できるのは
() のたった2文字。
普通はメソッドチェーン使ったり、引数を効率良く書くので
「毎回$(this)使うこと」自体があまりないことなんだよ。
ほらこれだけやっても$(this)を使うのはたった1回。
var css = {width: '100px', height: '100px'};
var events = {
change: function() {},
keydown: function() {},
}
$(this).prop('disable', false).css(css).on(events);
> 毎回$(this)使うことが意味が無いこと、必要のないことではないの?
一旦変数に入れるとしたら、
var $x = $(this)
最低限これだけのコードが必要でしょ?
それだけのコードを書いた結果、節約できるのは
() のたった2文字。
普通はメソッドチェーン使ったり、引数を効率良く書くので
「毎回$(this)使うこと」自体があまりないことなんだよ。
ほらこれだけやっても$(this)を使うのはたった1回。
var css = {width: '100px', height: '100px'};
var events = {
change: function() {},
keydown: function() {},
}
$(this).prop('disable', false).css(css).on(events);
>>128
そりゃ処理内容によるだろ
そりゃ処理内容によるだろ
$(this)は、そんなにアクセスが速いの?
色々と処理がありそうだから、
いったん変数に入れるのでは?
色々と処理がありそうだから、
いったん変数に入れるのでは?
>>130
普通はベンチマークするべきところだけど、ソースコード読めばわかるよ。
http://code.jquery.com/jquery-2.1.3.js
$ = jQuery だから、まずこれが実行される
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
普通はベンチマークするべきところだけど、ソースコード読めばわかるよ。
http://code.jquery.com/jquery-2.1.3.js
$ = jQuery だから、まずこれが実行される
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
$(this)ということは、selector = DOMElement。
そしてfn.initの中身のうちselect = DOMElementの場合に通るコード
やっている所は★をつけた所だけ。
init = jQuery.fn.init = function( selector, context ) {
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this; //通らない
}
// Handle HTML strings
if ( typeof selector === "string" ) {
// 通らない
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
// ★ やってるのはこれだけ
this.context = this[0] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
// 以下、通らない
そしてfn.initの中身のうちselect = DOMElementの場合に通るコード
やっている所は★をつけた所だけ。
init = jQuery.fn.init = function( selector, context ) {
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this; //通らない
}
// Handle HTML strings
if ( typeof selector === "string" ) {
// 通らない
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
// ★ やってるのはこれだけ
this.context = this[0] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
// 以下、通らない
>>130
> 色々と処理がありそうだから、
君が言った処理というのは、
this = DOMElementの場合、たったこれだけの
コードで終わりなんだよ。
this.context = this[0] = selector;
this.length = 1;
return this;
色々処理があるのは、DOMElement以外の値
つまりselectorなどを渡した場合の話であって
$(this) や $(DOMElement)の場合は
それらに比べればはるかに高速だってわかるだろう?
> 色々と処理がありそうだから、
君が言った処理というのは、
this = DOMElementの場合、たったこれだけの
コードで終わりなんだよ。
this.context = this[0] = selector;
this.length = 1;
return this;
色々処理があるのは、DOMElement以外の値
つまりselectorなどを渡した場合の話であって
$(this) や $(DOMElement)の場合は
それらに比べればはるかに高速だってわかるだろう?
>>134
セレクタ処理と比較して変換処理が安いのは事実だが、無駄かどうか判断するのは質問者であっておまえじゃない
質問にいたるまでの背景、社内規定、質問者の好み...諸々が何もわかっていないのに安易に「無駄」と断定するなよ
0.1秒の差が顧客を逃がすと主張するGoogleなら些細な見逃さず、塵も積もればを体言するだろうし、ベンチマークテストしてニヤニヤする奴がいるかもしれんだろ
価値観の多様化を認める努力をしろ
セレクタ処理と比較して変換処理が安いのは事実だが、無駄かどうか判断するのは質問者であっておまえじゃない
質問にいたるまでの背景、社内規定、質問者の好み...諸々が何もわかっていないのに安易に「無駄」と断定するなよ
0.1秒の差が顧客を逃がすと主張するGoogleなら些細な見逃さず、塵も積もればを体言するだろうし、ベンチマークテストしてニヤニヤする奴がいるかもしれんだろ
価値観の多様化を認める努力をしろ
正しいか正しいかはみた人が決めることよ。
できるのは、その人のために情報を書いておくこと。
$(this)を変数にキャッシュしておくことで
1回当たり0.00001秒早くあるというメリットが有る。
その反面コードの行数が増えて使用メモリも増えるというデメリットが有る。
意味があると思う人だけ、使えばいい。
できるのは、その人のために情報を書いておくこと。
$(this)を変数にキャッシュしておくことで
1回当たり0.00001秒早くあるというメリットが有る。
その反面コードの行数が増えて使用メモリも増えるというデメリットが有る。
意味があると思う人だけ、使えばいい。
>>143
> 今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
セレクタの検索が遅い(場合がある)から、それに関してキャッシュすることで速度アップすることはあるよ。
getElementByIDが使われるあろうセレクタにID単体を入れた場合に有意な速度アップになるかは微妙だけど
でもthisを含めたDOM要素の場合、同様に不要だろうね。
ナノ秒レベルのごくわずかの速度アップが必要っていうのなら話は別だけどw
> 今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
セレクタの検索が遅い(場合がある)から、それに関してキャッシュすることで速度アップすることはあるよ。
getElementByIDが使われるあろうセレクタにID単体を入れた場合に有意な速度アップになるかは微妙だけど
でもthisを含めたDOM要素の場合、同様に不要だろうね。
ナノ秒レベルのごくわずかの速度アップが必要っていうのなら話は別だけどw
ベンチマークしてみたよ。
http://jsperf.com/efivmfqsat2gfbrsm57h
Firefoxの場合なんと2.77倍も速くなったよ!
* $(el) ・・・ 570741 ops/sec
* $el ・・・ 1578389 ops/sec
IE11だと1.04倍
* $(el) ・・・ 49793 ops/sec
* $el ・・・ 51797 ops/sec
Chromeだと1.41倍
* $(el) ・・・ 233268 ops/sec
* $el ・・・ 328296 ops/sec
やはり、$el変数に入れたほうがいいみたいだね!
・・・ここまでは素人判断w
倍率だけで判断するのは素人判断。
http://jsperf.com/efivmfqsat2gfbrsm57h
Firefoxの場合なんと2.77倍も速くなったよ!
* $(el) ・・・ 570741 ops/sec
* $el ・・・ 1578389 ops/sec
IE11だと1.04倍
* $(el) ・・・ 49793 ops/sec
* $el ・・・ 51797 ops/sec
Chromeだと1.41倍
* $(el) ・・・ 233268 ops/sec
* $el ・・・ 328296 ops/sec
やはり、$el変数に入れたほうがいいみたいだね!
・・・ここまでは素人判断w
倍率だけで判断するのは素人判断。
ここからが本番ね
あらためてよく見ると
Firefoxの場合
* $(el) ・・・ 1.752 ナノ秒/回
* $el ・・・ 0.6335 ナノ秒/回
1回あたり 1.1185 ナノ秒 速くなる
IE11の場合
* $(el) ・・・ 20.083 ナノ秒/回
* $el ・・・ 19.306 ナノ秒/回
1回あたり 0.777 ナノ秒 速くなる
Chromeの場合
* $(el) ・・・ 4.287 ナノ秒/回
* $el ・・・ 3.046 ナノ秒/回
1回あたり 1.241 ナノ秒 速くなる
あとは、これが意味があるかを考えて判断しなさい。
俺はこの結果からパフォーマンスアップのにために
わざわざ変数に入れる意味は無いと思っている。
あらためてよく見ると
Firefoxの場合
* $(el) ・・・ 1.752 ナノ秒/回
* $el ・・・ 0.6335 ナノ秒/回
1回あたり 1.1185 ナノ秒 速くなる
IE11の場合
* $(el) ・・・ 20.083 ナノ秒/回
* $el ・・・ 19.306 ナノ秒/回
1回あたり 0.777 ナノ秒 速くなる
Chromeの場合
* $(el) ・・・ 4.287 ナノ秒/回
* $el ・・・ 3.046 ナノ秒/回
1回あたり 1.241 ナノ秒 速くなる
あとは、これが意味があるかを考えて判断しなさい。
俺はこの結果からパフォーマンスアップのにために
わざわざ変数に入れる意味は無いと思っている。
複雑なセレクタ式を何度もループの中とかで参照するなら効果はあるんじゃないかな
>>149
複雑なセレクタの場合は当然そうだよ。
それは最初から今回の話の対象外の話。
今の話は、$(this)を$thisに入れることの意味って話だから。
関係ないけど、よくさブラウザとかのバージョンアップで
速度が○倍になりましたとかいう宣伝文句あるじゃん。
あれっってまさにこれなんだよね。
> Firefoxの場合なんと2.77倍も速くなったよ!
確かに、2.77倍になっている。だけど全体が2.77倍になったわけじゃなく
処理の一部が速くなっただけで、しかも元々ナノ秒レベルの体感できない部分が
10倍になっただけ。だから当然体感できない。
○倍になったって宣伝文句は話半分に聞くべきだよねって話がしたかった。
複雑なセレクタの場合は当然そうだよ。
それは最初から今回の話の対象外の話。
今の話は、$(this)を$thisに入れることの意味って話だから。
関係ないけど、よくさブラウザとかのバージョンアップで
速度が○倍になりましたとかいう宣伝文句あるじゃん。
あれっってまさにこれなんだよね。
> Firefoxの場合なんと2.77倍も速くなったよ!
確かに、2.77倍になっている。だけど全体が2.77倍になったわけじゃなく
処理の一部が速くなっただけで、しかも元々ナノ秒レベルの体感できない部分が
10倍になっただけ。だから当然体感できない。
○倍になったって宣伝文句は話半分に聞くべきだよねって話がしたかった。
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
みんなの評価 : 類似してるかもしれないスレッド
- JavaScript ライブラリ総合質問所 vol.4 (985) - [78%] - 2015/12/16 15:00
- JavaScript ライブラリ総合質問所 vol.5 (344) - [75%] - 2022/3/14 17:45
- 【jQuery】JavaScript ライブラリ総合質問所 vol.3 (1001) - [65%] - 2014/6/18 20:58 △
- 【jQuery】JavaScript ライブラリ総合質問所 vol.2 (986) - [65%] - 2013/5/20 7:00
- 【jQuery】JavaScript ライブラリ総合質問所 vol.1 (983) - [65%] - 2012/10/8 22:30
- jQuery 質問スレッド vol.8 (1001) - [30%] - 2018/5/6 11:15
トップメニューへ / →のくす牧場書庫について