Javascript 在我的模块化js结构中，如何通过ajax调用接收回数据？

这是一个具有模块化结构的非常基本的java脚本，基本上我正在尝试做的是，通过API请求一个随机引用，通过Mustache.js在HTML页面上打印它们。早些时候，我没有使用模块化结构方式，我成功地完成了这项任务，但我也想尝试一下模块化方式

我现在面临的问题是，每当我试图呈现我的数据（即quote+author）时，我在控制台上收到一个错误，即函数没有定义

请检查我的代码~

        (function (){
      var quoting ={
        quotei : [],
        template : $("#quoteTemplate").html(),
        init: function (){
          this.cacheDom();
           this.bindEvents();
          this.createQuote();
          this.recieve();
          this.renderx();

        },

        cacheDom: function(){
          this.$el = $('#quotez');
          this.$button = this.$el.find('button');
          this.$template = this.$el.find('#quoteTemplate').html();

        },

        bindEvents: function(){
          this.$button.on('click',this.createQuote.bind(this));

        },

        renderx: function(data){

            this.$el.html(Mustache.render(this.template,data));

          },

        createQuote: function(){

        $.ajax({
           url:'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
           type:'GET',
           data:{},
           dataType:'json',
           success : function(data){;
               this.render(data)

            },
           beforeSend: function(xhr){
             xhr.setRequestHeader("X-Mashape-Authorization","cvkQkHJurZmshuIhXxwXzIjBchHVp1yk0rDjsnNambAJ9duu7v");
             }
            });

          }, 

      };
      quoting.init();

      })()

---

请帮助我并原谅我的错误，因为这是我第一次在StackOverflow上发表文章。

这是重构后的代码

工作演示： 输出： [对象]{ 作者：“小马丁·路德·金”， 类别：“著名”， 最后，我们将记住的不是敌人的话，而是朋友的沉默 }

代码：

(function ($) {

  function quoting() {

    this.quotei = [];
    this.template = $("#quoteTemplate").html();
    this.init();
  }

  quoting.prototype = {
    init: function () {
      this.cacheDom();
      this.bindEvents();
      this.createQuote();
      //this.recieve(); 
      //this.renderx(); 
    },

    cacheDom: function(){
      this.$el = $('#quotez');
      this.$button = this.$el.find('button');
      this.$template = this.$el.find('#quoteTemplate').html();
    },

    bindEvents: function(){
      this.$button.on('click', this.createQuote.bind(this));
    }, 

    renderx: function(data) {
        console.log(data);
        //this.$el.html(Mustache.render(this.template,data));
    },

    createQuote: function(){
    var self = this;
    $.ajax({
       url:'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
       type: 'GET',
       dataType: 'json',
       beforeSend: function(xhr) {
         xhr.setRequestHeader("X-Mashape-Authorization","cvkQkHJurZmshuIhXxwXzIjBchHVp1yk0rDjsnNambAJ9duu7v");
       }
     }).done(function(data) {
          self.renderx(data);
    })

   } 

  };

var myQuote = new quoting();

})(window.jQuery);

---

有两件事需要检查——在success函数中调用

this.render（）

，但在此之前拼写为

renderx（）

，很可能是个错误？另外，请记住，在

success

hander中，

this

指的是

xhr

对象，而不是外部函数。您需要绑定适当的

此

才能使其工作。您应该解释问题所在。除了进行代码更改外，除非您以前看到过问题，否则这些问题不会很明显。您可以解释更改是什么，因为代码工作得很好。@SauravTiru:代码存在多个问题。第一个init（）方法this.recieve（）；-此方法未定义，因此注释了代码this.renderx（）；-当ajax调用成功时，需要调用此方法，因此也需要注释掉。第二：

this

在处理这个神奇的关键字时要小心，它的范围在函数内部是有限的。Ajax成功方法—此的范围更改为Ajax回调。所以首先我缓存了它createQuote:function（）{var self=this；}）；第三：次要：将代码从文本对象更改为工厂模式