Hướng dẫn amp custom javascript - bộ khuếch đại javascript tùy chỉnh

amp-script cho phép bạn viết và chạy JavaScript của riêng bạn theo cách duy trì đảm bảo hiệu suất của AMP. Hầu hết các thành phần AMP đều cho phép các tương tác web phổ biến thông qua logic của riêng họ, cho phép bạn xây dựng trang của mình một cách nhanh chóng mà không cần viết JavaScript hoặc nhập các thư viện của bên thứ ba. Bằng cách sử dụng amp-script, bạn có thể chấp nhận logic tùy chỉnh cho các trường hợp sử dụng cụ thể hoặc nhu cầu duy nhất mà không mất lợi ích của AMP.

Hướng dẫn này cung cấp nền tảng về thành phần này và thực tiễn tốt nhất để sử dụng nó.

Công nhân web

JavaScript quá mức có thể làm cho các trang web chậm và không phản hồi. Để kiểm soát tải trang AMP của JavaScript và khi nó thực thi, các quy tắc xác thực của AMP cấm các nhà phát triển chạy JavaScript trong trang web thông qua thẻ .

Nhân viên web trình bày một cách để chạy JavaScript an toàn hơn. Thông thường tất cả JavaScript chạy trong một luồng duy nhất, nhưng mỗi công nhân chạy trong một luồng của riêng mình. Điều này là có thể bởi vì họ thiếu quyền truy cập vào đối tượng DOM hoặc window và mỗi công nhân chạy trong phạm vi toàn cầu của riêng mình. Do đó, họ không thể can thiệp vào công việc của nhau hoặc với các đột biến gây ra bởi mã trong luồng chính. Họ chỉ có thể giao tiếp với luồng chính và với nhau thông qua các tin nhắn chứa các đối tượng. Công nhân cung cấp một đường dẫn đến một web đa luồng, một cách để gói gọn JavaScript trong hộp cát nơi nó không thể chặn giao diện người dùng.

Công nhân không đi kèm với quyền truy cập vào DOM. Để lấp đầy khoảng trống này, nhóm AMP đã tạo một thư viện nguồn mở có tên là Workerdom. Workerdom sao chép DOM lên DOM ảo và cung cấp bản sao cho công nhân. Công nhân cũng tái tạo một tập hợp con của API DOM tiêu chuẩn. Khi người lao động thực hiện các thay đổi đối với DOM ảo, công nhân đã tái tạo những thay đổi đó trong DOM thực. Điều này cho phép người lao động thao túng DOM và thực hiện các thay đổi trên trang bằng các kỹ thuật tiêu chuẩn. Việc đồng bộ hóa DOM chỉ đi theo một hướng. Nếu luồng chính sửa đổi DOM, không có cơ chế nào tồn tại để cho người lao động biết.

amp-script là một trình bao bọc xung quanh công nhân làm cho công nhân có thể sử dụng được trong AMP, cung cấp kết nối với các tính năng AMP, thiết lập API nhà phát triển và giới thiệu các hạn chế bảo vệ trải nghiệm người dùng. Công nhân cung cấp cốt lõi của chức năng của ____ 3.

Tổng quan về amp-script

Ngôn ngữ JavaScript giống nhau ở một công nhân như ở nơi khác trong trình duyệt. Do đó, trong amp-script, bạn có thể sử dụng tất cả các cấu trúc thông thường mà JavaScript cung cấp. Công nhân cũng tái tạo nhiều API DOM thường được sử dụng và cung cấp chúng cho bạn sử dụng. Nó hỗ trợ các API Web phổ biến như

...



  

...



  

...



  

...



  

Tuy nhiên, amp-script không hỗ trợ toàn bộ API DOM hoặc API Web, vì điều này sẽ làm cho JavaScript của riêng mình quá lớn và cồng kềnh. Xem tài liệu để biết chi tiết và tham khảo các mẫu này để xem amp-script đang sử dụng.

amp-script thay thế một số phương thức API DOM đồng bộ bằng các lựa chọn thay thế trả lại lời hứa. Ví dụ: thay vì

...



  

...



  

Để duy trì sự đảm bảo của AMP về hiệu suất và sự ổn định bố cục, amp-script đi kèm với một số hạn chế. Nếu kích thước của thùng chứa amp-script không được sửa, mã của bạn chỉ có thể tạo đột biến nếu được kích hoạt bởi tương tác của người dùng. Bạn không thể thêm các kiểu dáng hoặc tập lệnh bổ sung vào DOM và

Sử dụng các khung JavaScript

Vì API DOM không được hỗ trợ đầy đủ, làm thế nào tốt nhất là tiếp cận thao tác DOM trong amp-script? Dưới đây là hai khả năng.

1] Biết những gì được hỗ trợ. Nhận biết bộ API được hỗ trợ phong phú. Bạn cần phải suy nghĩ về API DOM khác nhau - ít hơn như một tập hợp lớn các thuộc tính và phương thức được phát triển trong nhiều năm và nhiều hơn như một tập hợp các công cụ ngắn gọn. Get to know the rich set of supported APIs. You need to think about the DOM API differently - less as a large set of properties and methods that's developed over many years, and more as a concise set of tools.

2] Sử dụng Preact. Không chỉ phản ứng một cách phổ biến để xây dựng các trang web mà còn làm thay đổi DOM bằng cách sử dụng một tập hợp con của API DOM. amp-script có thể bao gồm hỗ trợ đầy đủ cho phần này của API và do đó hỗ trợ đầy đủ cho React. Điều đó nói rằng, các gói React thường vượt quá giới hạn 150K của ____ 3. Vì vậy, bạn nên sử dụng Preact, một giải pháp thay thế nhẹ để phản ứng. Preact được thiết kế để di chuyển đơn giản từ React. Với Preact, bạn sẽ có thể xây dựng các tương tác phức tạp với ít lo lắng hơn về những gì được hỗ trợ. Not only is React a popular way to build websites, but it mutates the DOM using a subset of the DOM API. amp-script can includes full support for this portion of the API, and thus full support for React. That said, React bundles often exceed amp-script's 150K limit. So it's recommended that you use Preact, a lightweight alternative to React. Preact is designed for straightforward migration from React. With Preact, you should be able to build elaborate interactions with much less worry about what's supported.

Nhóm nghiên cứu đã thử nghiệm amp-script với các khung như Vue, Angular, Aurelia và Lit-HTML, nhưng ít hơn. Nếu bạn tìm thấy một khoảng cách, xin vui lòng gửi một vấn đề - hoặc, tốt hơn là, hãy gửi yêu cầu kéo.

Vì amp-script không thể hỗ trợ toàn diện API DOM, chỉ cần sao chép một thư viện như jQuery thành một thành phần

Trường hợp sử dụng

amp-script mở rộng phạm vi chức năng của trang web AMP của bạn. Vì nó hỗ trợ một tập hợp con của API DOM và Web và vì việc sử dụng nó đi kèm với các hạn chế, nên nó không phải là một giải pháp JavaScript đa năng. Bất kỳ cơ quan đáng kể nào của JavaScript hiện tại có thể sẽ cần sửa đổi để làm việc trong bối cảnh amp-script.

Tuy nhiên, amp-script trình bày một cách tốt để chăm sóc logic và các tương tác mà các thành phần amp hiện tại không cung cấp. Sau đây là một vài trường hợp sử dụng tuyệt vời.

Tạo các tương tác mới

amp-script cung cấp cho bạn sức mạnh của JavaScript và API DOM. Nó cho phép bạn tạo các tương tác mà các thành phần amp khác không thể, mở ra một cánh cửa cho sự sáng tạo đầy đủ của web.

Điều đó nói rằng, trước khi chuyển sang amp-script để tạo một tương tác mới, hãy kiểm tra xem liệu một thành phần amp hoặc kết hợp các thành phần có thể làm điều tương tự. Tận dụng các thành phần AMP hiện có cuối cùng sẽ làm cho mã của bạn nhỏ hơn và có thể duy trì hơn. Nếu một thành phần có thể đạt được hiệu ứng tương tự như những gì bạn muốn, bạn có thể tùy chỉnh hành vi của nó với amp-script.

Nếu bạn sử dụng amp-script để tạo ra một tương tác có thể được các nhà phát triển khác quan tâm, vui lòng xem xét đề xuất hoặc đóng góp một thành phần mới.

Thêm logic nâng cao

Khi logic của bạn không phù hợp với biểu thức nhỏ gọn, amp-script là lựa chọn tốt nhất. amp-script8 cho phép bạn giới thiệu logic vào các tương tác của người dùng, nhưng JavaScript của bạn cần phải phù hợp với một biểu thức duy nhất. Vì mã được gói gọn trong thuộc tính HTML, nó sẽ không nhận được lợi ích của cú pháp làm nổi bật trong IDE của bạn, bạn không thể đặt điểm dừng và gỡ lỗi có thể là một thách thức. Trong những trường hợp như vậy, amp-script cho phép bạn theo dõi các thực tiễn lập trình tốt nhất.

Tăng cường các thành phần amp

amp-script có quyền truy cập vào các biến trạng thái AMP và các phương thức amp-script1 và amp-script2. Điều này cung cấp một đường dẫn để tăng cường các thành phần AMP hiện có với logic của riêng bạn. Nó cũng làm cho nó có thể ảnh hưởng đến DOM bên ngoài chính thành phần ____29. Xem ở đây và ở đây để biết ví dụ.

Thay thế AMP-Bind và AMP-List

Nếu bạn chưa quen với AMP và bạn thoải mái với JavaScript, có thể hấp dẫn khi sử dụng amp-script cho mọi tương tác của trình duyệt. Tuy nhiên, đối với các tương tác đơn giản hơn, bạn có thể sẽ muốn học cách sử dụng hệ thống hành động và sự kiện của amp-script8 và AMP. Đối với các tương tác phức tạp hơn, hoặc đối với các trường hợp yêu cầu thao tác biến trạng thái phức tạp và logic nhiều hơn, amp-script có thể sẽ dễ dàng hơn.

Xử lý dữ liệu máy chủ

AMP cho phép bạn truy xuất dữ liệu máy chủ bằng amp-script7 và định dạng nó bằng amp-script8. Trong trường hợp các mẫu ria mép không đủ, amp-script có thể tìm nạp dữ liệu, định dạng nó và đưa dữ liệu được định dạng vào DOM. Nếu bạn cần massage dữ liệu máy chủ trước khi gửi tới amp-script8, hàm amp-script có thể là nguồn dữ liệu cho amp-script7. Xem tài liệu để biết chi tiết và mẫu mã.

Giới thiệu các khả năng mới

Bạn có thể sử dụng amp-script để tận dụng các khu vực của API Web và API DOM hiện không có thể truy cập được đối với các thành phần AMP hoặc sử dụng các API này theo cách mà các thành phần AMP không hỗ trợ. Ví dụ: amp-script hỗ trợ 5 [ví dụ],

...



  

...



  

...



  

Khi nào nên thay thế amp-bind và amp-list

Đối với một nhà phát triển AMP mới, người thoải mái với JavaScript, có vẻ dễ dàng sử dụng amp-script hơn là học amp-script8 và amp-script7. Tuy nhiên, trong một số trường hợp, amp-script8 và amp-script7 phù hợp hơn.

amp-script8 thường đơn giản hơn đối với các tương tác cơ bản, trong đó sự tích hợp chặt chẽ của nó vào các thẻ HTML là hấp dẫn. Trong ví dụ này, nhấn một nút thay đổi một đoạn văn bản. Liên kết dữ liệu của AMP làm cho điều này đơn giản và dễ đọc:

Rajesh
I am Priya

Tương tự, khi sử dụng API có đầu ra mà bạn điều khiển, bạn có thể triển khai logic kinh doanh trên máy chủ. Bạn có thể định dạng dữ liệu các đầu ra API để nó phù hợp với mẫu amp-script8. amp-script7 là một sự phù hợp tốt trong những trường hợp như vậy.

amp-script8 cũng cung cấp một cơ chế đơn giản để giao tiếp giữa các thành phần AMP. Trong ví dụ này, nhấn vào một hình ảnh trong một window9 đặt biến trạng thái amp-script0 thành amp-script1, từ đó thực hiện việc chuyển sang slide đầu tiên của nó.

...



  

Các thành phần AMP tương tác truyền thống cũng có thể phù hợp hơn với các tương tác trải rộng các phần lớn của trang web - vì bạn có thể không muốn bọc quá nhiều DOM trong một

Tuy nhiên, trên các trang liên quan đến các biến trạng thái phức tạp hơn hoặc nhiều tương tác, sử dụng amp-script sẽ dẫn đến mã đơn giản và có thể duy trì hơn. Lấy ví dụ này, từ trang web Demo thương mại điện tử AMP Camp:

Bản demo này đã được tạo ra trước khi amp-script được phát hành. Nhưng loại logic này sẽ dễ dàng hơn để viết và gỡ lỗi trong JavaScript. Đối với các trang có logic kinh doanh nhiều hơn, sử dụng amp-script sẽ cho phép bạn tránh nhầm lẫn và tuân theo các thực tiễn lập trình tốt hơn.

Trong nhiều trường hợp, bạn sẽ muốn sử dụng cả amp-script và amp-script8 trên cùng một trang. Triển khai amp-script8 cho các tương tác đơn giản hơn, chuyển sang amp-script khi bạn cần thêm logic hoặc cấu trúc. Hơn nữa, mặc dù amp-script chỉ có thể tạo ra các đột biến cho Dom Chilrden của nó, như đã lưu ý ở trên, nó có thể ảnh hưởng đến phần còn lại của trang bằng cách đột biến các biến trạng thái. amp-script8 làm phần còn lại, như trong ví dụ này.

Mặc dù công nhân sẽ thay đổi DOM thực khi mã của bạn thay đổi DOM ảo mà nó có quyền truy cập, nhưng không có cơ chế nào tồn tại để đồng bộ hóa theo hướng ngược lại. Do đó, không nên sử dụng amp-script8 hoặc các phương tiện khác để sửa đổi con cái của

Đóng góp cho amp-script

amp-script luôn luôn phát triển, giống như amp. Bạn có thể giúp cải thiện nó bằng cách tham gia. Hãy nghĩ về các tính năng mới mà các nhà phát triển khác cũng có thể cần, gửi các vấn đề và tất nhiên đề xuất và đóng góp các tính năng mới!