首页　>　文章列表　>　提高刺激的一个简单技巧

提高刺激的一个简单技巧

343 2025-04-07

刺激框架兼容性及旧版Safari浏览器问题解决

Stimulus 框架原生支持所有现代的、自动更新的桌面和移动浏览器。然而，Stimulus 3 不兼容 Internet Explorer 11。在最近的一个项目中，我发现旧版本的 iOS Safari 浏览器在处理特定代码部分时也存在问题。为了说明这个问题，以下是一个简单的 Stimulus hello_controller.js 示例：

import { controller } from "stimulus"

export default class extends controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputtarget.textContent = `hello, ${this.nametarget.value}!`;
  }
}

在旧版 Safari 浏览器中，这段代码会抛出以下错误：

SyntaxError: unexpected token '='

错误原因在于 static targets = [...] 语法。解决方法很简单：

import { controller } from "stimulus"

export default class extends controller {
  static get targets() {
    return [ "name", "output" ];
  }

  greet() {
    this.outputtarget.textContent = `hello, ${this.nametarget.value}!`;
  }
}

我们做了什么改变？将 static targets = [...] 替换为 static get targets() { return [...] }。

static 关键字用于定义静态字段，但在 Safari 14.4 (2020) 之前的版本中并不支持这种语法。然而，static 关键字长期以来一直用于定义静态方法（包括使用 get 关键字的 getter 方法），早在 Safari 8.4 (2014) 就已支持。

提高刺激的一个简单技巧