jQuery对象文字或带有jQuery插件的模块模式

Question

让我们说jQuery select2插件有这样的东西：

＆＃13;

＆＃13;

$(function() {

  $('.select2').select2({
    minimumInputLength: 1,
    ajax: {
      dataType: 'json',
      cache: true,
      url: getUrl,
      data: getData,
      processResults: getProcessResults
    }
  });

  function getUrl() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  }

  function getData(params) {
    return {
      q: params.term
    };
  }

  function getProcessResults(data) {
    return {
      results: data
    };
  }

});

＆＃13;

.select2 {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<select class="select2"></select>

＆＃13;

＆＃13;

＆＃13;

但我们想要使用对象文字或模块模式来实现jQuery功能和插件：

＆＃13;

＆＃13;

var myAjax = {

  init: function() {
    var _this = this;

    $('.select2').select2({
      minimumInputLength: 1,
      ajax: {
        dataType: 'json',
        cache: true,
        url: _this.getUrl,
        data: _this.getData,
        processResults: _this.getProcessResults
      }
    });
  },

  getUrl: function() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  },

  getData: function(params) {
    return {
      q: params.term
    };
  },

  getProcessResults: function(data) {
    return {
      results: data
    };
  }
  
};

$(document).ready(myAjax.init);

＆＃13;

.select2 {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<select class="select2"></select>

＆＃13;

＆＃13;

＆＃13;

我们怎么能这样做？

来源：

https://learn.jquery.com/code-organization/concepts/

https://select2.github.io/examples.html#data-ajax

Answer 1

您遇到的问题是this函数中的init将引用document，因为您在document.ready处理程序下运行它。要解决此问题，您可以直接使用myAjax变量来调用其属性和方法。试试这个：

var myAjax = {
  init: function() {    
    $('.select2').select2({
      minimumInputLength: 1,
      ajax: {
        dataType: 'json',
        cache: true,
        url: myAjax.getUrl(),
        data: myAjax.getData,
        processResults: myAjax.getProcessResults
      }
    });
  },
  getUrl: function() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  },
  getData: function(params) {
    return {
      q: params.term
    };
  },
  getProcessResults: function(data) {
    return {
      results: data
    };
  }
};

$(document).ready(myAjax.init);

.select2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<select class="select2"></select>

我还建议您更改对象的名称，因为myAjax的目的不是非常语义。