如何在amp-script中使用jQuery？

Question

AMP文档提到了将jQuery与amp-script组件结合使用：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中。