Q&A
ということは引数がなくても何かしらの動作は行うということでしょうか
###やりたいこと
システムに影響を与えずにjQueryをアップデートしたい
###問題点
システムの jQuery のバージョンを 2 → 3 にあげたところ
$(...).load()
でエラーが出るようになりました
調べると load メソッドは引数に関数をとって $(...) 要素がロードされたときに実行するみたいなのですが
引数なしの load はどういう動作を行うのでしょうか
何もしないのであれば消してもいい気がするんですが
調べても引数なしの load を使っている例がみつからないので
何かしら動作するのであれば教えていただけるとうれしいです
追記：
どうもload メソッドは以下の２種類あって
https://api.jquery.com/load/#load-url-data-complete
https://api.jquery.com/load-event/#load-handler
Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it.
とあるのですが ver2 で引数なしの場合にどちらのload() が呼ばれているのでしょうか
回答3件
0
.load()がロードしたいのか、ロード後の処理をトレースしたいのかによります
後者であれば.trigger('load')すればよいでしょう
投稿2018/09/07 07:25
総合スコア118221
0
もしかしたらたどり着いているかもしれませんが、エラーが出るようになったのはjQuery3で廃止された機能であるためです。
.load(), .unload(), .error()関数の削除
非推奨になっていたこれらの関数は削除されます。
イベントを付与する場合は.on()関数を利用してください。
例えば$("img").load(fn)は、$("img").on("load", fn)に変更してください。
引数なしのものの意図がどうこうというのは処理の流れの中で使われているものであるので、実際のコードを提示いただかないことには意図や意味についての回答は得られにくいと思います。
投稿2018/09/07 04:20
編集2018/09/07 04:22
総合スコア80892
回答の後半をご確認の上、質問本文に追記願います。
業務のコードなのでソースをはることはできないのです
申し訳ありません
ただ load メソッドの仕様に関しておききしたかったのですが
前後の文脈で挙動が変化するということなのでしょうか
＞意図や意味についての回答は得られにくいと思います。
確かに前後のソースがないと答えられないので質問内容を変更しました
流れのなかで使われるので同じ意図や意味は変化する可能性は十分あります。
別にそのまま提示する必要はありませんが「こんな感じ」というイメージがわかるサンプルコードの提示は可能ですか？
いずれにしても業務に関するものであればなんの意味もなく置かれるとは考え難いので単に何もしてなさそうだから消すというのは早計かと思いますよ。
仕様だけでいいならドキュメントを読めばわかりますが、通常であれば第一引数は省略不可のはずなので、繰り返しますがどう使われているか分からないとこれ以上の回答は難しいです
leaflet というライブラリを使って地図を描画しているのですが
setView を行った後にその地図キャンバスの要素に対して何箇所か load() を行っています
そもそもhandler もurlも引数にないというのは仕様上NG(第1引数は必須）のはずなので本当にこれだけでは何とも言えません。
下記のようにもなってないのですよね？
$("#hoge").load(function(){
});
なってないです
$('#map').load();
（ソースの完全コピー）とかかれています
バージョンアップ前にはJSにエラーはなかったし
バージョン上げてエラーが出てるので制御は確実にとおってました
ごめんなさい1系で別途確認しました。エラーは出ないですね。失礼しました。
何も行われないだけでした。（leaflet 入れたわけではないので「何も行われない」は実際そうかは検証できていませんが）
ただ、いずれにしても削除することによる影響範囲の調査は必要に思います。
そうなのですね
なにか違うものがオーバーライドされてるのかなとバージョンを戻して調べていました
https://qiita.com/kozy4324/items/0f3622b9d9bc1c95c8fe
こんな記事もでてきたのでもしかしたらデバッグを仕込んで消しただけかもしれません
念のために
.on('load', () => {}); におきかえておくことにします
結論としては引数なしの load() はバージョン２までは動作には影響を与えないけど意図はわからない
ということで大丈夫でしょうか
私もオーバーライドの線は考えたのですが、オーバーライドしてたら今回のエラーは起きないんじゃないかなあと思い、コメントに含みませんでした。
動作に影響を与えるかどうかは作り次第なので、今の提示内容での明言はできないのが実情です。
影響範囲の調査はしっかり確実に行ってください。
前後のコードを読んでみたんですがやはり setView() の後に呼ばれている以外に共通した処理がないので
setView() に対して何かをしたいんだと思います。
ただ Leaflet の中身を読むのは不毛すぎるのでやはりメソッドの仕様から処理をつきとめたいんですが、引数なしの場合に $('#map').load(); は 「<id=map> の DOM がロードされたときに引数のコールバックを実行するものでそこに何も指定されていないので結果的に何もしない」という以上の動作をするのでしょうか…
＞動作に影響を与えるかどうかは作り次第なので、今の提示内容での明言はできない
というのは具体的にどういうケースでこれ以上の動作をする可能性があるのでしょうか…
>具体的にどういうケースでこれ以上の動作をする可能性があるのでしょうか…
堂々巡りになっています。
例示するには要件が具体的である必要があります。それに非常に範囲が広いものです。
何かしら例示したとして今回の件とかけ離れていては何の参考にもなりません。
そのあたりはthink49さんが詳しく書いてくれているので読んでいただくとして、
正直なところ想像により補完しなければならない部分が多く、これ以上提示がむずかしいのであれば、解決につながる回答はこれ以上つかないのではないでしょうか。
数打ちゃ当たるの回答を待つよりもすべての情報をお持ちの自身で何とかされる方が確実で早いですし、いずれにしても今後メンテナンスされていくのは他でもない質問者さんなのですから、一番理解しておかなければならないのも質問者さん本人です。
今後のことも加味すると後任のためにどのような意図で書いたかを残しておかなきゃいけませんよね。
ロジックには「流れ」 があるので全体の流れがわかるコードを全て確認できる必要があります。どのような熟練者であっても数行読んだ程度では把握できません。
わかりました
メソッド単体で挙動がきまってると思っていたのですが、文脈によって挙動が変わるので単純にメソッドの定義だけをみておきかえるべきメソッドは存在しないということなんですね…
そうなると自分ひとりでは対処できないので内部で相談してみます
長々とつきあっていただいたのに申し訳ありませんでした
まあ、バックアップとっておいて消してみて何日、何週間か様子見て影響なければそれで良しとするというのもありと言えばばありですけどね。
結局責任をとるのはご自身（またはシステム管轄の企業・団体）になるのであくまでこの質問についた回答については参考程度に留めて、解析・検証を進めてください。
了解です
何から何までありがとうございます
0
マルチポスト
ルールを守って、マルチポストして下さい。
やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
むこうでまともな回答がもらえなかったので
私が考えるに「まともな回答」は誰でも思いつく、ごく当然の方法ですが、「難しそう」という理由で解読を諦めているのではありませんか。
初心者でもなんでも、(面倒くさそうと敬遠されがちな)基本に忠実な方法をとれば、必ず、解けます。
解決策
load を書いたのは自分ではないんですよね
私が考えた解決策は3つ。
.load()以外のコードを解読し、残りの「.load()と書かれたコード」の意図を推測する- jQuery公式ドキュメントを読む
- jquery-2.2.4.js を読む
一つ目はkatingさんご自身で実行する以外にありません。
jQuery公式ドキュメントを読む
jQuery 2.2.4 のリリース日は2016/05/20
2016/05/23当時のドキュメントを読むと、引数省略時の挙動は書いていません。
従って、公式では保証しない挙動になります。
私なら、怖くて使ってられませんが、コード制作者の意図は本人に聞いてみる以外にないでしょう。
jquery-2.2.4.js を読む
"load" でgrepすれば、該当コードは見つかります。
JavaScript
1jQuery.each( ( "blur focus focusin focusout load resize scroll unload click dblclick " + 2 "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 3 "change select submit keydown keypress keyup error contextmenu" ).split( " " ), 4 function( i, name ) { 5 6 // Handle event binding 7 jQuery.fn[ name ] = function( data, fn ) { 8 return arguments.length > 0 ? 9 this.on( name, null, data, fn ) : 10 this.trigger( name ); 11 }; 12} );
JavaScript
1// Keep a copy of the old load method 2var _load = jQuery.fn.load; 3 4/** 5 * Load a url into a page 6 */ 7jQuery.fn.load = function( url, params, callback ) { 8 if ( typeof url !== "string" && _load ) { 9 return _load.apply( this, arguments ); 10 } 11 12 var selector, type, response, 13 self = this, 14 off = url.indexOf( " " ); 15 16 if ( off > -1 ) { 17 selector = jQuery.trim( url.slice( off ) ); 18 url = url.slice( 0, off ); 19 } 20 21 // If it's a function 22 if ( jQuery.isFunction( params ) ) { 23 24 // We assume that it's the callback 25 callback = params; 26 params = undefined; 27 28 // Otherwise, build a param string 29 } else if ( params && typeof params === "object" ) { 30 type = "POST"; 31 } 32 33 // If we have elements to modify, make the request 34 if ( self.length > 0 ) { 35 jQuery.ajax( { 36 url: url, 37 38 // If "type" variable is undefined, then "GET" method will be used. 39 // Make value of this field explicit since 40 // user can override it through ajaxSetup method 41 type: type || "GET", 42 dataType: "html", 43 data: params 44 } ).done( function( responseText ) { 45 46 // Save response for use in complete callback 47 response = arguments; 48 49 self.html( selector ? 50 51 // If a selector was specified, locate the right elements in a dummy div 52 // Exclude scripts to avoid IE 'Permission Denied' errors 53 jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) : 54 55 // Otherwise use the full result 56 responseText ); 57 58 // If the request succeeds, this function gets "data", "status", "jqXHR" 59 // but they are ignored because response was set above. 60 // If it fails, this function gets "jqXHR", "status", "error" 61 } ).always( callback && function( jqXHR, status ) { 62 self.each( function() { 63 callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] ); 64 } ); 65 } ); 66 } 67 68 return this; 69};
Re: kating さん
投稿2018/09/09 01:34
編集2018/09/09 02:06
総合スコア18196
あなたの回答
tips
プレビュー
退会済みユーザー
2018/09/07 20:41
2018/09/08 00:15
退会済みユーザー
2018/09/08 05:02