Javascriptリスナ、ハンドラ、Ajax

Question

イントラネットサイト用のクライアントサイドJavaScriptをコーディングしていますが、私が開発していて、正しく動作していないと感じるようになっていました。

私は非同期ポストをたくさんやっているし、ページには、すべてが基本的に同じことを行う（コードスニペット）リスタ/ハンドラ/ XMLHTTPブロックの束でいっぱいにし始めています。これは通常のやり方なのでしょうか、それとももっとエレガントなアプローチですか？

//Select Location 
    $(document).on('change', '#location-select', function(e){ 
     $.post('/Admin/SubLocations', jQuery.param({ location: $('#' + this.id).val() }), 
     function(response){ 
      var json = JSON.parse(response); 
      if(json.error) { 
      $('#error').html(json.response); 
      } else { 
      $('#sublocation-list').html(json.response); 
      } 
     }); 
     return false; 
    }); 


    // New Location 
    $('#location-list').on('submit', '#newLocation', function(e){ 
     $.post('/Admin/AddLocation', $(this).serialize(), 
     function(response){ 
      var json = JSON.parse(response); 
      if(json.error) { 
      $('#error').html(json.response); 
      } else { 
      $('#location-list').html(json.response); 
      $('#sublocation-list').html(''); 
      } 
     }); 
     return false; 
     }); 

Answer 1

あなたは例えば、などの一般的な方法を抽出するために、開始後など、この要素にスコープのプラグインの中に要素のすべてのメソッドをラップして再使用することができます/拡張できます。

!function($) { 
 

 
    var pluginName = "locationPlugin"; 
 

 
    // Setup plugin 
 
    $.fn[pluginName] = function() { 
 
    return this.each(function() { 
 
     // Only add plugin if not already added to element 
 
     if (!$.data(this, "plugin_" + pluginName)) { 
 
     $.data(this, "plugin_" + pluginName, 
 
       new LocationPlugin(this)); 
 
     } 
 
    }); 
 
    }; 
 

 
    // Create base plugin 
 
    function LocationPlugin(el) { 
 
    this._name = pluginName; 
 
    this.$el = $(el); 
 

 
    // Scope elements to inside your plugin 
 
    this.$errorArea = this.$el.find('[data-location-area="error"]'); 
 
    this.$locationListArea = this.$el.find('[data-location-area="location-list"]'); 
 
    this.$subListArea = this.$el.find('[data-location-area="sublocation-list"]'); 
 
    this.$locationSelect = this.$el.find('[data-location-action="select"]') 
 

 
    // Init plugin 
 
    this.init(); 
 
    } 
 

 
    // Add plugin methods 
 
    LocationPlugin.prototype = { 
 
    init: function() { 
 
     this.$el.on('change', '[data-location-action="select"]', $.proxy(this.handleLocationSelect, this)); 
 
     this.$el.on('submit', $.proxy(this.handleLocationSubmit, this)); 
 
    }, 
 
    handleLocationSelect: function(evt){ 
 
     var data = $.param({ location: $(evt.currentTarget).val() }); 
 
     $.post('/Admin/SubLocations', data, $.proxy(this.handleResponse, this, false)); 
 
     return false; 
 
    }, 
 

 
    handleLocationSubmit: function(evt){ 
 
     evt.preventDefault(); 
 
     var data = $(this).serialize(); 
 
     $.post('/Admin/AddLocation', data, $.proxy(this.handleResponse, this, true)); 
 
    }, 
 

 
    // Extract common methods 
 
    displayError: function(errorResponse){ 
 
     this.$errorArea.html(errorResponse); 
 
    }, 
 
    handleResponse: function(isSubmitResponse, response){ 
 
     var json = JSON.parse(response); 
 

 
     // On Error 
 
     if(json.error) { 
 
     this.displayError(json.response); 
 
     return false; 
 
     } 
 

 
     // On Success 
 
     if (!isSubmitResponse){ 
 
     this.$subListArea.html(json.response); 
 
     } else { 
 
     this.$locationListArea.html(json.response); 
 
     this.$subListArea.html(''); 
 
     } 
 
    } 
 
    } 
 

 

 

 
    // Load plugin for any matching element 
 
    $(function() { 
 
    $('[data-provider="location-select"]').locationPlugin(); 
 
    }); 
 

 
}(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form data-provider="location-select"> 
 
    <div data-location-area="error"></div> 
 
    <div data-location-area="sublocation-list"></div> 
 
    <select data-location-action="select"> 
 
    <option value="1">Test location 1</option> 
 
    <option value="2">Test location 2</option> 
 
    </select> 
 
    <button type="submit">Submit</button> 
 
</form>