如何在 amp-script 中使用 jQuery？

Question

AMP 文档提到将 jQuery 与 amp-script 组件一起使用：https : //amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

但是，我没有看到任何示例，也没有说明如何执行此操作。

我已经尝试在下面的示例 AMP 页面中包含 jQuery（分别为 3.4.1 和 2.2.4），并运行这个简单的 jQuery 脚本：

$('button').click(function() {
    $('body').append('hello world');
})

AMP 页面示例：

https://apps.yourstorewizards.com/sandbox/amp/amp-script/jquery3.html https://apps.yourstorewizards.com/sandbox/amp/amp-script/jquery2.html

两者都不按预期工作。两者都会产生 javascript 错误。在 AMP 中可以使用哪些 jQuery 函数是否有限制？

任何帮助，将不胜感激。谢谢。

Answer 1

如果您查看以下示例： https://github.com/ampproject/amphtml/blob/master/examples/amp-script/todomvc.amp.html

它使用Vue.js，你会看到在示例中，以下脚本引用了vue-todomvc.js，

<amp-script layout="container" src="/examples/amp-script/vue-todomvc.js" sandbox="allow-forms">
...
</amp-script>

在检查该文件时，您会注意到压缩的 vue.js 库以及示例的自定义 javascript 包含在顶部。

所以在 jquery 的情况下，同样适用。您可以将 jquery 库与使用 jquery 的自定义 javascript 一起包含在自定义文件中。

理想情况下，应该有一种方法可以在 amp-script 标签本身中引用 jquery 库，并将自定义 JS 内联或在单独的文件中引用，以获得更好的用户体验。我正在提议这样的改变。谢谢

我希望它如何工作的示例。

<amp-script layout="container" src="https://code.jquery.com/jquery-1.11.3.js" sandbox="allow-forms">
... // custom js
</amp-script>

或者

<amp-script layout="container" 3p-lib-src="https://code.jquery.com/jquery-1.11.3.js" sandbox="allow-forms" src="my-custom-js.js>
... 
</amp-script>

其中会有一个属性来引用第三方库，在本例中为 3p-lib-src，并且您的自定义 js 可以驻留在 src 中。