ฉันจะกำหนดไลบรารีอย่างถูกต้องได้อย่างไรเพื่อให้ JS ดำเนินการหลังจากตรงตามเงื่อนไขที่กำหนด

ฉันกำลังสร้างโมดูลที่กำหนดเองเพื่อเรียกใช้ JS หลังจากล้างแคชแล้ว นี่คือโครงสร้างของโมดูล:

โมดูล -> flush.info.yml

ชื่อ: ฟลัช
ประเภท: โมดูล
คำอธิบาย: โมดูลที่สำคัญมาก
แพคเกจ: กำหนดเอง
รุ่น: 1.0
core_version_requirement: ^8 || ^9

โมดูล -> flush.libraries.yml

ล้าง:
  รุ่น: 1.x
  จส:
    js/flush.js: {}
  การพึ่งพา:
    - แกน / jquery
    - การตั้งค่าหลัก / drupal

โมดูล -> flush.module

<?php

ใช้ Drupal\Core\Form\FormStateInterface;

/**
 * การใช้งาน hook_cache_flush()
 */

  ฟังก์ชัน flush_cache_flush () {
    \Drupal::state()->set('flush_cache_cleared', TRUE);
  }

  ฟังก์ชัน flush_page_attachments (อาร์เรย์ &$ ไฟล์แนบ) {
    ถ้า (\Drupal::state()->get('flush_cache_cleared')) {
      $attachments['#attached']['library'][] = 'ล้าง/ล้าง';
     \Drupal::state()->set('flush_cache_cleared', FALSE);
    }
  }

โมดูล -> JS -> flush.js

(ฟังก์ชัน ($, Drupal, drupalSettings) {
    'ใช้อย่างเข้มงวด';

    Drupal.behaviors.flush = {
      /**
       * พฤติกรรมการแนบ Drupal
       */
      แนบ: ฟังก์ชัน (บริบท การตั้งค่า) {
        this.settings = this.getSettings(การตั้งค่า);
        alert("ล้าง!");
        console.log ("สวัสดีชาวโลก");
      },
    };
  })(jQuery, Drupal, drupalSettings);

ทั้งสองฟังก์ชันใน flush.module ทำงานได้อย่างถูกต้อง อย่างไรก็ตาม JS ที่เป็น #attached ซึ่งควรจะใช้การ alert() ไม่เคยทำงาน ฉันเชื่อว่าปัญหาเกี่ยวข้องกับบรรทัดนี้โดยเฉพาะ: $attachments['#attached']['library'][] = 'ล้าง/ล้าง';

มีบางอย่างที่ชัดเจนว่าฉันทำผิดหรือไม่? ฉันใช้ page_attachments เป็นวิธีการแนบ JS เนื่องจากไม่จำเป็นต้องเชื่อมโยงกับส่วนใดส่วนหนึ่งของหน้าหรืออาร์เรย์การแสดงผล ฯลฯ โปรดแจ้งให้เราทราบหากคุณมีความคิดที่เป็นไปได้เกี่ยวกับปัญหาที่อาจเกิดขึ้น เป็นขอบคุณ!

ฉันจะไม่ใช้ Drupal::state() หรือ hook_page_attachments() สิ่งเหล่านี้คงที่เกินไป ใช้ค่าเซสชันและบล็อกได้ดีขึ้น ดู ความคิดเห็นของฉัน ในคำถามก่อนหน้า

ตั้งค่าเซสชันใน hook เมื่อแคชถูกล้างและเฉพาะเมื่อไม่ได้เรียกใช้จากบรรทัดคำสั่ง:

ฟังก์ชัน flush_cache_flush () {
  ถ้า (PHP_SAPI !== 'cli') {
    \Drupal::request()->getSession()->set('run_flush_js', TRUE);
  }
}

ในบล็อกให้ตรวจสอบค่าเซสชันและลบออกเพื่อไม่ให้คงอยู่หลังจากเปลี่ยนเส้นทาง

src/Plugin/Block/FlushBlock.php

<?php

เนมสเปซ Drupal\flush\Plugin\Block;

ใช้ Drupal\Core\Block\BlockBase;

/**
 * ให้บล็อกฟลัช
 *
 * @ปิดกั้น(
 * id = "flush_flush",
 * admin_label = @Translation("ฟลัช"),
 * หมวดหมู่ = @Translation("กำหนดเอง")
 * )
 */
class FlushBlock ขยาย BlockBase {

  /**
   * {@inheritdoc}
   */
  สร้างฟังก์ชั่นสาธารณะ () {
    $session = \Drupal::request()->getSession();  
    $สร้าง = [];
    ถ้า ($ เซสชัน -> รับ ('run_flush_js')) {
      $session->remove('run_flush_js');
      $สร้าง['เนื้อหา'] = [
        '#markup' => '<div class="run-flush-js"></div>',
        '#attached' => ['library' => ['ล้าง/ล้าง']],
      ];
    }
    $build['#cache']['max-age'] = 0;
    ส่งคืน $build;
  }
}

js/flush.js

(ฟังก์ชัน ($, Drupal, ครั้งเดียว) {
  'ใช้อย่างเข้มงวด';

  Drupal.behaviors.flush = {
    /**
     * พฤติกรรมการแนบ Drupal
     */
    แนบ: ฟังก์ชัน (บริบท การตั้งค่า) {
      ถ้า (ครั้งเดียว ('ล้าง', '.run-flush-js', บริบท). ความยาว) {
        alert("ล้าง!");
      }
    }
  };
})(jQuery, Drupal, ครั้งเดียว);

flush.libraries.yml

ล้าง:
  จส:
    js/flush.js: {}
  การพึ่งพา:
    - หลัก / drupal
    - แกน / jquery
    - แกน/ครั้ง

แก้ไข: อัปเดตรหัส js ดู ฉันจะทำให้รหัส JavaScript นี้ทำงานได้อย่างไรเมื่อเปิดใช้งานโมดูล BigPipe

ฉันคิดว่าคุณควรใช้วิธีนี้แตกต่างออกไป นี่คือสิ่งที่ฉันจะทำ:

ขั้นแรก ใช้ hook_cache_flush() และใช้เพื่อเก็บเวลาการล้างแคชล่าสุดไปยังสถานะ Drupal

ฟังก์ชัน flush_cache_flush () {
  \Drupal::state()->set('flush_cache_cleared', เวลา());
}

ต่อไป ใช้ hook_page_attachments() เพื่อแนบจาวาสคริปต์ของคุณในทุกหน้า แต่ส่งการประทับเวลาที่ล้างแคชไปยังจาวาสคริปต์ของคุณ

ฟังก์ชัน flush_page_attachments (อาร์เรย์ &$ ไฟล์แนบ) {
  $attachments['#attached']['library'][] = 'ล้าง/ล้าง';
  $attachments['#attached']['drupalSettings']['flush_cache_cleared'] = \Drupal::state()->get('flush_cache_cleared');
}

สุดท้าย ในจาวาสคริปต์ของคุณ ให้ตรวจสอบว่าเวลาล้างแคชใหม่เร็วกว่าเดิมหรือไม่ (คุณจะต้องจัดเก็บสิ่งนี้ในฝั่งไคลเอนต์ผ่านที่จัดเก็บในเครื่องหรืออย่างอื่น)

หากเวลาต่างกัน แสดงว่าแคชถูกล้างแล้ว

(ฟังก์ชัน ($, Drupal, drupalSettings) {
  'ใช้อย่างเข้มงวด';

  Drupal.behaviors.flush = {
    แนบ: ฟังก์ชัน (บริบท การตั้งค่า) {

      ให้ cacheFlushedTime = drupalSettings ['flush_cache_cleared'];
      // ทำสิ่งต่างๆ ด้วย cache_flushed_time ที่นี่ เช่น
      // เปรียบเทียบกับเวลาล้างแคชที่รู้จักก่อนหน้านี้...

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