如何在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页面(分别为3.4.1和2.2.4)中包括jQuery，并运行以下简单的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.html https://apps.yourstorewizards.com/sandbox/amp/amp-脚本/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

If you look at the following example: https://github.com/ampproject/amphtml/blob/master/examples/amp-script/todomvc.amp.html

，您将在示例中看到引用了以下脚本的 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屋！