Làm cách nào để xác định đúng thư viện để JS sẽ thực thi sau khi đáp ứng một điều kiện nhất định?

Tôi đang tạo một mô-đun tùy chỉnh để thực thi một số JS SAU KHI xóa bộ đệm. Đây là cấu trúc của mô-đun:

Mô-đun -> flush.info.yml

tên: tuôn ra
loại: mô-đun
mô tả: Một mô-đun rất quan trọng.
gói: Tùy chỉnh
phiên bản: 1.0
core_version_requirement: ^8 || ^9

Mô-đun -> flush.libraries.yml

tuôn ra:
  phiên bản: 1.x
  js:
    js/flush.js: {}
  phụ thuộc:
    - lõi/jquery
    - lõi/drupalSettings

Mô-đun -> flush.module

<?php

sử dụng Drupal\Core\Form\FormStateInterface;

/**
 * Triển khai hook_cache_flush()
 */

  hàm flush_cache_flush() {
    \Drupal::state()->set('flush_cache_cleared', TRUE);
  }

  hàm flush_page_attachments(mảng &$attachments) {
    if (\Drupal::state()->get('flush_cache_cleared')) {
      $attachments['#attached']['library'][] = 'flush/flush';
     \Drupal::state()->set('flush_cache_cleared', FALSE);
    }
  }

Mô-đun -> JS -> flush.js

(hàm ($, Drupal, drupalSettings) {
    'Sử dụng nghiêm ngặt';

    Drupal.behaviors.flush = {
      /**
       * Hành vi đính kèm Drupal.
       */
      đính kèm: chức năng (bối cảnh, cài đặt) {
        this.settings = this.getSettings(cài đặt);
        cảnh báo ("tuôn ra!");
        console.log("Xin chào thế giới");
      },
    };
  })(jQuery, Drupal, drupalSettings);

Cả hai chức năng trong flush.module đều hoạt động bình thường, tuy nhiên, JS được #attached vốn được cho là sử dụng một cảnh báo () không bao giờ chạy. Tôi tin rằng vấn đề có liên quan cụ thể đến dòng này: $attachments['#attached']['library'][] = 'flush/flush';

Có điều gì đó rõ ràng tôi đang làm sai? Tôi đã sử dụng page_attachments làm phương thức để đính kèm JS vì nó không nhất thiết phải được liên kết với một phần cụ thể của trang hoặc mảng kết xuất, v.v. Vui lòng cho tôi biết nếu bạn có bất kỳ ý tưởng tiềm năng nào về vấn đề có thể xảy ra được, cảm ơn!

Tôi sẽ không sử dụng Drupal::state() hoặc hook_page_attachments(), chúng quá tĩnh. Sử dụng tốt hơn một giá trị phiên và một khối, xem nhận xét của tôi trong câu hỏi trước.

Đặt giá trị phiên trong hook khi bộ đệm bị xóa và chỉ khi không chạy từ dòng lệnh:

hàm flush_cache_flush() {
  nếu (PHP_SAPI !== 'cli') {
    \Drupal::request()->getSession()->set('run_flush_js', TRUE);
  }
}

Trong khối kiểm tra giá trị phiên và loại bỏ nó để nó không tồn tại sau khi chuyển hướng.

src/Plugin/Block/FlushBlock.php

<?php

không gian tên Drupal\flush\Plugin\Block;

sử dụng Drupal\Core\Block\BlockBase;

/**
 * Cung cấp một khối tuôn ra.
 *
 * @Chặn(
 * id = "flush_flush",
 * admin_label = @Translation("Flush"),
 * danh mục = @Translation("Tùy chỉnh")
 * )
 */
lớp FlushBlock mở rộng BlockBase {

  /**
   * {@inheritdoc}
   */
  xây dựng chức năng công cộng () {
    $session = \Drupal::request()->getSession();  
    $xây dựng = [];
    if ($session->get('run_flush_js')) {
      $session->remove('run_flush_js');
      $build['nội dung'] = [
        '#markup' => '<div class="run-flush-js"></div>',
        '#attached' => ['library' => ['flush/flush']],
      ];
    }
    $build['#cache']['max-age'] = 0;
    trả lại bản dựng $;
  }
}

js/flush.js

(hàm ($, Drupal, một lần) {
  'Sử dụng nghiêm ngặt';

  Drupal.behaviors.flush = {
    /**
     * Hành vi đính kèm Drupal.
     */
    đính kèm: chức năng (bối cảnh, cài đặt) {
      if (once('flush', '.run-flush-js', context).length) {
        cảnh báo ("tuôn ra!");
      }
    }
  };
})(jQuery, Drupal, một lần);

flush.libraries.yml

tuôn ra:
  js:
    js/flush.js: {}
  phụ thuộc:
    - lõi/drupal
    - lõi/jquery
    - lõi/một lần

Chỉnh sửa: Cập nhật mã js, xem Làm cách nào tôi có thể thực thi mã JavaScript này khi mô-đun BigPipe được bật?

Tôi nghĩ bạn nên tiếp cận vấn đề này theo cách khác. Đây là những gì tôi sẽ làm:

Đầu tiên, triển khai hook_cache_flush() và sử dụng nó để lưu trữ thời gian xóa bộ nhớ cache cuối cùng sang trạng thái Drupal.

hàm flush_cache_flush() {
  \Drupal::state()->set('flush_cache_cleared', time());
}

Tiếp theo, sử dụng hook_page_attachments() để luôn đính kèm javascript của bạn trên mọi trang, nhưng chuyển dấu thời gian đã xóa bộ nhớ cache cho javascript của bạn.

hàm flush_page_attachments(mảng &$attachments) {
  $attachments['#attached']['library'][] = 'flush/flush';
  $attachments['#attached']['drupalSettings']['flush_cache_cleared'] = \Drupal::state()->get('flush_cache_cleared');
}

Cuối cùng, trong javascript của bạn, hãy kiểm tra xem thời gian xóa bộ đệm mới có gần đây hơn thời gian trước không (bạn sẽ cần lưu trữ thời gian này ở phía máy khách thông qua bộ nhớ cục bộ hoặc thứ gì đó).

Nếu thời gian khác nhau, bạn biết bộ đệm đã bị xóa.

(hàm ($, Drupal, drupalSettings) {
  'Sử dụng nghiêm ngặt';

  Drupal.behaviors.flush = {
    đính kèm: chức năng (bối cảnh, cài đặt) {

      để cacheFlushedTime = drupalSettings['flush_cache_cleared'];
      // Làm mọi thứ với cache_flushed_time ở đây, như
      // so sánh nó với thời gian xóa bộ nhớ cache đã biết trước đó...

    },
  };
})(jQuery, Drupal, drupalSettings);