Example: D3 JavaScript Library — JavaScript (1)

同学们，我们来看一下这个JavaScript文件里几个非常重要的编程模式，这些是你在做复杂组件时经常会用到的。 首先，文件顶部有一行注释 /* global d3 */。这其实是告诉我们的代码检查工具 ESLint，d3 这个变量是全局存在的，你不用再额外声明它，这样就不会报错了。 接着，我们用 @salesforce/resourceUrl/d3 这种方式导入 D3 这个静态资源。这里要注意一个命名的小细节：导入时绑定用的名字是大写的 "D3"，而实际在 Salesforce 里静态资源的名字是小写的 "d3"。一会儿我们代码里用的就是那个大写绑定的变量来加载库。 然后，我们动用了 renderedCallback 这个生命周期钩子。它的作用很简单，就是保证组件对应的 DOM 元素已经完全渲染好了，这时候 D3 再去操作这些 DOM，才不会出错。 为了防止重复初始化，我们设置了一个叫 d3Initialized 的标志位。如果没有这个标志，每当组件因为数据变化重新渲染时，D3 都会重新创建一次图表，这显然不是我们想要的。有了标志，只在第一次渲染时执行初始化，后续就直接跳过了。 在加载资源方面，我们用 Promise.all 同时加载 D3 的脚本文件和样式表，这样就能并行请求，提升整体性能。 最后，我们用 try/catch 把加载过程包起来。万一库加载失败了，我们就用 ShowToastEvent 弹出一个用户友好的错误提示，而不是让界面莫名其妙地卡住。 这些模式组合起来，就能让我们的第三方库集成变得既健壮又高效，大家下去可以自己试试看。