آموزش اجزا جاوا اسکریپت در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش اجزا جاوا اسکریپت در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش اجزا جاوا اسکریپت در گوگل AMP خواهیم پرداخت.

در درس های قبلی، ما بسیاری از اجزای AMP را مطالعه کرده ایم. ما همچنین دیده ایم که برای کارکرد هر یک از اجزای مورد نیاز یک فایل javascript اضافه می کنیم.

به عنوان مثال ، برای amp-iframe اسکریپت اضافه شده به شرح زیر است –

&lt;script async custom-element="amp-iframe"
   src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"&gt;
&lt;/script&gt;

src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">

</script>

ما async را به تگ اسکریپت اضافه کرده ایم. این استاندارد برای AMP است زیرا آنها همه پرونده های javascript را به صورت غیرهمزمان بارگیری می کنند. یک ویژگی عنصر سفارشی اضافه شده است که نام مولفه مورد استفاده را دارد.

برای استفاده از هر جز amp اگر بخشی از پرونده هسته javascript amp نیست، اسکریپت باید مانند بالا اضافه شود.

ما بیشتر به نوشتن، تعداد زیادی کد جاوا اسکریپت در داخل صفحات عادت داریم و همچنین با استفاده از برچسب اسکریپت، فایل جاوا اسکریپت را نیز شامل می شویم.

چگونه می توانیم این کار را در AMP انجام دهیم؟ بنابراین برای آن AMP اجازه نوشتن هیچ کد اسکریپت یا بارگذاری تگ اسکریپت از خارج را نمی دهد.

Amp مولفه خاص خود را برای مراقبت از شغلی دارد که تصور می شود توسط اسکریپت اضافی اضافه شده در صفحه انجام می شود. این اساساً به دلایل عملکردی برای بارگذاری سریعتر محتوای صفحه و نداشتن جاوا اسکریپت در تأخیر ارائه یا ایجاد تغییر در DOM ، انجام می شود.

این مشخصات ارائه شده توسط AMP به عنوان سایت رسمی آنها برای تگ های اسکریپت است –

ممنوع است مگر اینکه نوع آن application / ld + json باشد. (ممکن است در صورت لزوم مقادیر غیر اجرایی دیگری نیز اضافه شود.) استثنا تگ اسکریپت اجباری برای بارگذاری زمان اجرا AMP و برچسب اسکریپت برای بارگیری اجزای توسعه یافته است.

یک مثال عملی که می توانیم از برنامه / ld + json در داخل صفحات AMP خود استفاده کنیم، در اینجا نشان داده شده است. توجه داشته باشید که ما از تگ اسکریپت با نوع = “application / ld + json” برای م componentلفه amp-analytics to fire tracker استفاده می کنیم.

به همین ترتیب ، ما می توانیم از تگ اسکریپت با type = ”application / ld + json” در سایر اجزای AMP در هر کجا که لازم باشد استفاده کنیم.

مثال

&lt;!doctype html&gt;
&lt;html amp&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;title&gt;amp-analytics&lt;/title&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;
      &lt;/script&gt;
      &lt;script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js"&gt;
      &lt;/script&gt;
      &lt;link rel = "canonical" href = "ampanalytics.html"&gt;
      &lt;meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1"&gt;
      
      &lt;style amp-boilerplate&gt;
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         &lt;/style&gt;
      &lt;/noscript&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google Amp - Analytics&lt;/h1&gt;
      &lt;amp-analytics&gt;
         &lt;script type = "application/json"&gt;
            {
            "requests": {
               "event": "http://localhost:8080/googleamp/tracking.php?
               user=test&amp;account=localhost&amp;event=${eventId}"
            },
            "triggers": {
               "trackPageview": {
                  "on": "visible",
                  "request": "event",
                  "vars": {
                     "eventId": "pageview"
                  }
               }
            }
         }
         &lt;/script&gt;
      &lt;/amp-analytics&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>amp-analytics</title>

</script>

src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">

</script>

minimum-scale = 1,initial-scale = 1">

body{

-webkit-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;animation:

-amp-start 8s steps(1,end) 0s 1 normal both

}

@-webkit-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}

</style>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none}

</style>

</noscript>

</head>

<body>

<h1>Google Amp - Analytics</h1>

<amp-analytics>

{

"requests": {

"event": "http://localhost:8080/googleamp/tracking.php?

user=test&account=localhost&event=${eventId}"

"triggers": {

"trackPageview": {

"on": "visible",

"request": "event",

"vars": {

"eventId": "pageview"

}

</script>

</amp-analytics>

</body>

</html>

وقتی صفحه در مرورگر قرار گرفت، ردیاب برای مشاهده صفحه خارج می شود. همانطور که در زیر نشان داده شده است ، می توان آن را در زبانه شبکه گوگل مشاهده کرد.

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش اجزا جاوا اسکریپت در گوگل AMP

آموزش اجزا جاوا اسکریپت در گوگل AMP

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش اجزا جاوا اسکریپت در گوگل AMP

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه