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

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 中。