Прослушиватель Javascript, обработчик, ajax

Im в настоящее время кодирование некоторых javascript на стороне клиента для интрасети сайта я разрабатываю и начал получать ощущение, что я не делал это правильно (хотя это работает).

Я делаю много асинхронных сообщений, и страница начинает заполняться кучей (фрагментов кода) блоков 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;
      });

1 ответ

  1. Вы можете обернуть все методы для элемента в плагин, который затем охватывает этот элемент и может быть повторно использован/расширен и т.д. После этого начните извлечь общие методы etc, например:

    !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>