Question

我正在编写一些客户端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;
      });

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>

Javascript监听器，处理程序，ajax

1 个答案: