Return Values, Parameters & Query Selectors

同学们，我们来看这一页，重点讲讲公共方法怎么返回值，还有查询选择器的使用和注意事项。 在 Lightning Web Components 里，你定义的公共方法完全可以像普通 JavaScript 那样，使用标准的 return 语句返回一个结果。比如，我们可以定义一个叫 isPlaying 的 getter 访问器，它里面用 return 返回一个布尔值，告诉外部当前视频到底是不是在播放。这样外界直接通过属性方式就能拿到状态，但其实背后是调用了一个方法。方法也可以接收参数，比如你可以写一个 play(speed) 方法，让调用方传一个速度值进来，灵活控制播放速度。 接下来谈谈查询选择器。浏览器提供了两个常用的 DOM API：一个是 querySelector，它会返回找到的第一个匹配元素；另一个是 querySelectorAll，返回的是所有匹配元素的静态 NodeList，也就是一份固定的列表快照，后续 DOM 变动不会自动反映到这个列表里。 但是，这里有一个非常非常重要的警告，千万要留心：在 Lightning Web Components 里，绝对不要在 querySelector 或 querySelectorAll 中使用 id 属性作为选择器！为什么？因为框架在渲染组件时，会自动把你写的 id 值转换成一个全局唯一的标识符，这样做是为了避免不同组件之间的 DOM 冲突。这导致你 JavaScript 里写的那个 id 选择器，在运行时根本匹配不到转换后的 id。那怎么办呢？我们应该改用 CSS 类选择器，比如 .my-class，或者利用自定义的 data-* 属性，比如 [data-id="myId"] 来定位元素。这样才是安全可靠的做法。 记住这一点，能帮你避免很多意想不到的 bug。好了，这部分就讲到这里。