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

Question

它是一个非常基本的模块化结构的java脚本，基本上我试图做的是，通过API请求随机引用，通过Mustache.js将它们打印在HTML页面上。之前没有使用模块化结构的方式，我设法完成了这项任务，但我也想尝试模块化的方式。

我现在面临的问题是，每当我尝试呈现我的数据（即报价+作者），我在我的控制台上收到错误，该函数未定义。

请检查我的代码〜

 (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(); 

     })() 

请帮我和原谅任何错误，因为这是我第一次张贴在计算器上。

Answer 1

这里是重构的代码

工作演示：here 输出： [目标对象] { 作者： “马丁·路德·金”， 类别： “名优产品”， 名言：“在最后，我们不会记住我们的敌人的话，而是我们朋友的沉默。“ }

代码：

(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);