Javascript监听器，处理程序，ajax

Question

我目前正在编写一些客户端JavaScript的一个Intranet网站，我正在开发，并开始感觉我是没有正确地做它（虽然它的工作原理）。

我做了大量的异步帖子，页面开始填满一堆（代码片段）lister/handler/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>