質問: category) { $(this).parent("category").parent("item").each(function(){ $("#tabBox1 ul").append(''); }); } }); } }); ``` 上記のような処理がソースコードのいたるところに存在します。 あるボタンをクリックしたらxmlファイルから必要なデータを取得してくる、という処理が非常に多いためです(具体的記述すると長くなりますが、画像の操作です)。 操作するxmlファイルも押したボタンにより異なりますし、$.ajax()内のsuccess内の記述も様々です(もちろん共通のものもありますが)。 このような理由からソースコードがかなりカオスになってきていて、自分でもこれは汚い!と思うレベルです。 上記コードを丸々関数化したところで、success以降の処理が様々なので対して意味がないし、逆に読みづらくなりそうです。 何かいい方法はないかと模索中です。 似たような処理や経験をしたことがある方、何かアドバイスを頂けると以上に助かります_(._.)_ ### 補足情報 全く見当違いなことを言っているかもしれませんが、AngularJSのようなフレームワークを使用したら、記述量は減るのでしょうか? 今からそれらのフレームワークを導入すること自体難しいのかもしれませんが...
回答: R7038XXさんが仰るように、AltJSにするのがベターですね。 Node.js+Common.jsで他の言語のようにファイル分割しつつ管理して、 ブラウザで開いた時にWebpackやGulp+Browserifyで1ファイルに固めるのが大規模になってくると必要かと思います。 > > 上記コードを丸々関数化したところで、success以降の処理が様々なので対して意味がないし、逆に読みづらくなりそうです。 > > > これピンポイントなら部分適用である程度解決しそうですね。 ``` my_ajax = function(url, fn){ $.ajax({ url: url, type: "GET", dataType: "xml", timeout: 1000, error: function(){ alert("ロード失敗"); }, success: fn }); }; hoge = my_ajax("xml/test.xml", function(xml){ //以下の処理は様々 $(xml).find('shape[type="' + shape + '"] > item > category > id').each(function(){ if ($(this).text() == category) { $(this).parent("category").parent("item").each(function(){ $("#tabBox1 ul").append(''); }); } }); }); ``` これ以上多くなるようなら引数をオプション一つにしてしまって、こんな風にするとコード量を減らせるでしょう。 ``` // urlとsuccessは必須項目 my_ajax = function(options){ $.ajax({ url: options.url, type: options.type || "GET", dataType: options.dataType || "xml", timeout: options.timeout || 1000, error: options.error || function(){ alert("ロード失敗"); }, success: options.success }); }; ``` 更にそこから派生する関数を作っても面白いですね。 やり過ぎるとカオスになるので、上手く調整してください。 ``` customized_my_ajax = function(options){ options.error = function(){ $(".error").append("ロード失敗しました。"); } my_ajax(options); } ```