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-pattern/

javascript对象文字模式构造函数错误

2 个答案: