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

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

<amp-selector
  name="color"
  layout="container"
  [selected]="product.selectedColor"
  on="select:AMP.setState({
      product: 
        {
          selectedSlide: product[event.targetOption].option - 1,
          selectedColor: event.targetOption,
          selectedSize: product[event.targetOption].sizes[product.selectedSize] != null ?
                        product.selectedSize : 
                        product[event.targetOption].defaultSize,
          selectedQuantity: 1
        }
      })"
>amp-selector>

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ợ

<p [text]="name">Rajeshp>
<button on="tap:AMP.setState({name: 'Priya'})">I am Priyabutton>

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

<amp-carousel slide="selectedSlide">
...
amp-carousel>

<amp-selector>
  <img on="tap:AMP.setState({selectedSlide: 0})"/>
amp-selector>

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

<amp-selector
  name="color"
  layout="container"
  [selected]="product.selectedColor"
  on="select:AMP.setState({
      product: 
        {
          selectedSlide: product[event.targetOption].option - 1,
          selectedColor: event.targetOption,
          selectedSize: product[event.targetOption].sizes[product.selectedSize] != null ?
                        product.selectedSize : 
                        product[event.targetOption].defaultSize,
          selectedQuantity: 1
        }
      })"
>amp-selector>

<amp-selector
  name="color"
  layout="container"
  [selected]="product.selectedColor"
  on="select:AMP.setState({
      product: 
        {
          selectedSlide: product[event.targetOption].option - 1,
          selectedColor: event.targetOption,
          selectedSize: product[event.targetOption].sizes[product.selectedSize] != null ?
                        product.selectedSize : 
                        product[event.targetOption].defaultSize,
          selectedQuantity: 1
        }
      })"
>amp-selector>

<amp-selector
  name="color"
  layout="container"
  [selected]="product.selectedColor"
  on="select:AMP.setState({
      product: 
        {
          selectedSlide: product[event.targetOption].option - 1,
          selectedColor: event.targetOption,
          selectedSize: product[event.targetOption].sizes[product.selectedSize] != null ?
                        product.selectedSize : 
                        product[event.targetOption].defaultSize,
          selectedQuantity: 1
        }
      })"
>amp-selector>