Question

地球人问候，

我的网站上使用了以下代码：brianjenkins94.me以便处理基线导航功能，当它以前工作时，我决定利用TypeScript Language提供的基于类的方法，以便以更易读的方式构造我的代码。这样做我似乎已经破坏了功能，现在所有＃nav.on（“click”）事件都会在第54行触发错误Uncaught TypeError: Cannot read property 'removeClass' of undefined（参见代码中的注释）。

如果有人能够确定为什么这些代码无法正常运行，或者可能提供一些有关更好的方法来实现这一点的一些见解，（我真的对正确的设计和正确的练习感兴趣， 这个错误只是一个方便的借口来发帖子并获得输入）非常感谢。

提前致谢，

布赖恩

/// <reference path="jquery.d.ts" />
"use strict";

class Main {

  //private SERVERNAME: string = "http://brianjenkins94.me/";
  //private DOCUMENTROOT: string = "https://rawgit.com/brianjenkins94/local.blog.com/master/"

  public init(): void {
    $(function(): void {
      var Nav: Navigation = new Navigation($("body"), $("#nav"), $("a[href=\"#nav\"]"));
      Nav.init();

    });
  }
}

class Navigation {
  private body: JQuery;
  private nav: JQuery;
  private navToggle: JQuery;
  private navClose: JQuery = $("<a></a>");

  constructor(bodyInit: JQuery, navInit: JQuery, navToggleInit: JQuery) {
    this.body = bodyInit;
    this.nav = navInit;
    this.navToggle = navToggleInit;
    // Create navClose element
    this.navClose.attr({
      href: "#",
      tabIndex: 0
    });
    (this.navClose).addClass("close");
    (this.nav).append(this.navClose);
  };

  public init(): void {
    this.disablePropogation();
    this.clickListener(this.body);
    this.clickListener(this.navToggle);
    this.clickListener(this.navClose);
    this.clickListener(this.nav);
    this.keyCodeListener();

  }

  private disablePropogation(): void {
    (this.nav).on("click touchend", function(event: Event): void {
      event.stopPropagation();
    });
  }

  private clickListener(target: JQuery): void {
    (target).on("click touchend", function(): void {
      if (!(target === (this.body))) {
        event.preventDefault();
        event.stopPropagation();

        if (target === this.navToggle) {
          (this.nav).toggleClass("visible");
          return;
        }
      }
      (this.nav).removeClass("visible"); // They call me, line 54
    });
  }

  private keyCodeListener(): void {
    $(window).on("keydown", function(event: JQueryKeyEventObject): void {
      if (event.keyCode === 27) {
        (this.nav).removeClass("visible");
      }
    });
  }

}

var main: Main = new Main();
main.init();

Answer 1

this的类型（窗口）错误，而不是类的实例。修复它的最佳方法是使用箭头函数捕获this引用，如下所示：

private clickListener(target: JQuery): void {
    (target).on("click touchend", () => {
      if (!(target === (this.body))) {
        event.preventDefault();
        event.stopPropagation();

        if (target === this.navToggle) {
          (this.nav).toggleClass("visible");
          return;
        }
      }
      (this.nav).removeClass("visible"); // They call me, line 54
    });
}

查看生成的代码，了解其实际功能。如果你还想使用jQuery提供的this（本例中的元素），你也可以这样做

var that = this;

正好在on调用之上，并为类使用that，为jQuery目标使用this。这类似于箭头函数生成但生成_this而不是＆＃34;＆＃34;。

编辑如果您需要保持TSLint满意，您应该在箭头功能中执行() :void => {

尝试使用TypeScript为简单的导航栏实现面向对象的设计模型

1 个答案: