刺激框架兼容性及旧版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) 就已支持。
通过这个简单的修改，我们可以轻松扩展应用程序对旧版浏览器的兼容性，避免不必要的重构工作。
