JavaScriptの記述量を減らし、ソースコードの保守性を向上させたい。

###前提・実現したいこと
JavaScriptの記述量が多くて非常に困っています。
原因の一つとして考えられるのは、xmlファイルの操作です。
例えば、

###該当のソースコード

javascript
1$.ajax({
2  url: "xml/test.xml",
3  type: "GET",
4  dataType: "xml",
5  timeout: 1000,
6  error: function(){
7    alert("ロード失敗");
8  },
9  success: function(xml){
10    //以下の処理は様々
11    $(xml).find('shape[type="' + shape + '"] > item > category > id').each(function(){
12      if ($(this).text() == category) {
13        $(this).parent("category").parent("item").each(function(){
14          $("#tabBox1 ul").append('<li><img src="' + $(this).find('sample').text() + '"></li>');
15        });
16      }
17    });
18  }
19});

上記のような処理がソースコードのいたるところに存在します。
あるボタンをクリックしたらxmlファイルから必要なデータを取得してくる、という処理が非常に多いためです（具体的記述すると長くなりますが、画像の操作です）。
操作するxmlファイルも押したボタンにより異なりますし、$.ajax()内のsuccess内の記述も様々です（もちろん共通のものもありますが）。

このような理由からソースコードがかなりカオスになってきていて、自分でもこれは汚い！と思うレベルです。
上記コードを丸々関数化したところで、success以降の処理が様々なので対して意味がないし、逆に読みづらくなりそうです。
何かいい方法はないかと模索中です。
似たような処理や経験をしたことがある方、何かアドバイスを頂けると以上に助かります_(..)

###補足情報
全く見当違いなことを言っているかもしれませんが、AngularJSのようなフレームワークを使用したら、記述量は減るのでしょうか？
今からそれらのフレームワークを導入すること自体難しいのかもしれませんが…

kei344

2016/06/22 02:45

コードはなるべく省略されないほうが回答もしやすいと思います。

coco_bauer

2016/06/22 03:27

処理が様々な部分は、それぞれに記述する以外にないと思います。とりあえず共通化できそうなところは関数を使って統一した記述にするところから始めては如何でしょうか。そうすると次に解決すべきコード部分が見つけやすくなります。

行動規範の内容に同意します

回答3件

以下の点を検討してみてはどうでしょうか？

ajax部分をPromiseやasync/awaitを使ってまとめる（コールバック地獄の解消）
jQueryを使ったDOMの追加や変更が頻繁に発生するのであれば、React.jsやVue.js、Riot.js等を用いて仮想DOMを利用する
他の回答にもあるように、AltJSを導入する（おすすめはTypeScriptかBabel（ES6,7）です）

特に、AngularのようなフルスタックJSフレームワークに比べて、React.jsのようなViewを作るためのライブラリは後から導入することも容易ですので是非試してみてください。

投稿2016/06/22 03:43

k.tada

総合スコア1679

ベストアンサー

R7038XXさんが仰るように、AltJSにするのがベターですね。
Node.js＋Common.jsで他の言語のようにファイル分割しつつ管理して、
ブラウザで開いた時にWebpackやGulp＋Browserifyで1ファイルに固めるのが大規模になってくると必要かと思います。

上記コードを丸々関数化したところで、success以降の処理が様々なので対して意味がないし、逆に読みづらくなりそうです。

これピンポイントなら部分適用である程度解決しそうですね。

JavaScript
1my_ajax = function(url, fn){
2  $.ajax({
3    url: url,
4    type: "GET",
5    dataType: "xml",
6    timeout: 1000,
7    error: function(){
8      alert("ロード失敗");
9    },
10    success: fn
11  });
12};
13
14hoge = my_ajax("xml/test.xml", function(xml){
15  //以下の処理は様々
16  $(xml).find('shape[type="' + shape + '"] > item > category > id').each(function(){
17    if ($(this).text() == category) {
18      $(this).parent("category").parent("item").each(function(){
19        $("#tabBox1 ul").append('<li><img src="' + $(this).find('sample').text() + '"></li>');
20      });
21    }
22  });
23});

これ以上多くなるようなら引数をオプション一つにしてしまって、こんな風にするとコード量を減らせるでしょう。

JavaScript
1// urlとsuccessは必須項目
2my_ajax = function(options){
3  $.ajax({
4    url: options.url,
5    type: options.type || "GET",
6    dataType: options.dataType || "xml",
7    timeout: options.timeout || 1000,
8    error: options.error || function(){
9      alert("ロード失敗");
10    },
11    success: options.success
12  });
13};

更にそこから派生する関数を作っても面白いですね。
やり過ぎるとカオスになるので、上手く調整してください。

JavaScript
1customized_my_ajax = function(options){
2  options.error = function(){
3    $(".error").append("<span>ロード失敗しました。</span>");
4  }
5  my_ajax(options);
6}