javascript對象文字模式構造函數錯誤

Question

我正在嘗試使用對象文字模式來組織代碼，但出現錯誤：未捕獲的ReferenceError：未定義backToTop

有什么想法嗎？

這是代碼：

(function($){

  var Mk = {

    config: {},

    init: function(config) {
      backToTop();
      wow();
      progressBarAnimation();
      slabText();
    },

    backToTop: function() {
      $('body').append('<div id="toTop" class="btn btn-success"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
      $(window).scroll(function () {
        if ($(this).scrollTop() != 0) {
          $('#toTop').fadeIn();
        } else {
          $('#toTop').fadeOut();
        }
      }); 
      $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
      });
    },

    wow: function() {
      var wow = new WOW({
        boxClass:     'wow',      
        animateClass: 'animated', 
        offset:       0,          
        mobile:       true,       
        live:         true        
      });
      wow.init(); 
    },

    progressBarAnimation: function() {
      $.each($('div.progress-bar'),function(){
        $(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');
      });
    },

    slabText:function() {
      $("h1.mklife").slabText({
        "viewportBreakpoint":400
      });
    },

    last:''

  };

  $(document).ready(Mk.init());
  window.Mk = Mk;

})(jQuery)

• 編輯：我已經錯過了准備好文檔的實際函數調用括號：$（document）.ready（Mk.init（））;

Answer 1

函數backToTop ， wow ， progressBarAnimation ， slabText是Mk對象的方法，要訪問它們，請參考Mk對象

init: function(config) {
  Mk.backToTop();
  Mk.wow();
  Mk.progressBarAnimation();
  Mk.slabText();
},

或者由於init也是同一對象的方法，因此您可以使用this關鍵字訪問該函數

init: function(config) {
  this.backToTop();
  this.wow();
  this.progressBarAnimation();
  this.slabText();
},

Answer 2

backToTop不是全局變量，因此您需要使用對象符號（this.backToTop）進行調用

上面的解決方案可以使用，但是我建議使用顯示模塊設計模式，使用更干凈的方法，檢查此鏈接（以及頁面底部的資源）以了解如何實現該方法https://carldanley.com/js-revealing-module -圖案/