如何在 amp-script 中使用 jQuery? [英] How to use jQuery with amp-script?

问题描述

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

The AMP documentation mentions using jQuery with the amp-script component: https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

但是，我没有看到任何示例，也没有说明如何操作.

However, I do not see any examples nor an explanation of how to do so.

我尝试在下面的示例 AMP 页面中包含 jQuery(分别为 3.4.1 和 2.2.4)，并运行这个简单的 jQuery 脚本:

I've tried including jQuery in the example AMP pages below (3.4.1 and 2.2.4 respectively), and running this simple jQuery script:

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

AMP 网页示例:

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

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

Neither work as expected. Both produce javascript errors. Are there limitations as to which jQuery functions can be used in AMP?

任何帮助将不胜感激.谢谢.

Any help would be appreciated. Thanks.

推荐答案

如果你看下面的例子:https://github.com/ampproject/amphtml/blob/master/examples/amp-script/todomvc.amp.html

使用Vue.js，您将看到在示例中，引用了以下脚本vue-todomvc.js,

which uses Vue.js, you will see that in the example, the following script is referenced vue-todomvc.js,

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

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

In inspection of that file, you will notice that the vue.js library compressed is included at the top along with the custom javascript for the example.

所以在 jquery 的情况下，同样适用.您可以在自定义文件中包含 jquery 库以及使用 jquery 的自定义 javascript.

So in the jquery case, the same would apply. You would include the jquery library in a custom file along with your custom javascript using jquery.

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

Ideally there should be a way to reference jquery library in the amp-script tag itself and have your custom JS inlined or referenced in a separate file for a better user experience. I am in the process of proposing such a change. Thanks

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

Example of how I would prefer for it to work.

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

Where there would be an attribute to reference the third party library, in this case 3p-lib-src and your custom js can reside in src.

这篇关于如何在 amp-script 中使用 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！