如何将 jQuery 与 amp-script 一起使用？

Question

AMP 文档提到使用带有 amp-script 组件的 jQuery：https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

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

我尝试在下面的示例 AMP 页面（分别为 3.4.1 和 2.2.4）中包含 jQuery，并运行这个简单的 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 中。