การอัปเกรดช่องที่กำหนดเอง

ในเดือนกรกฎาคม 2019 (รุ่น 2.20190722) มีการเพิ่ม API ฟิลด์ที่เข้ารหัสเพิ่มเติม ซึ่งมีจุดมุ่งหมายเพื่อ ที่เข้ากันได้แบบย้อนหลังให้มากที่สุด ซึ่งหมายความว่าหากคุณสร้าง ช่องที่กำหนดเองก่อนเดือนกรกฎาคม 2019 ช่องนั้นก็จะยังคงใช้งานได้ต่อไป ก่อนที่จะตัดสินใจว่าต้องอัปเกรดช่องที่กำหนดเองหรือไม่ คุณควรอ่าน ผ่านส่วนพื้นที่ที่อันตรายและทำการทดสอบอย่างละเอียด

เนื่องจากไม่มีการกำหนดมาตรฐานระหว่างช่องต่างๆ ก่อนเดือนกรกฎาคม 2019 ครอบคลุมการเปลี่ยนแปลงทั้งหมดที่นักพัฒนาซอฟต์แวร์อาจต้องกระทำได้ยาก เอกสารนี้จะพยายามครอบคลุมถึงการเปลี่ยนแปลงที่เป็นไปได้ทั้งหมด แต่หากเอกสารฉบับนี้ไม่ พูดถึงสิ่งที่คุณสนใจ โปรดอ่านหัวข้อ รับความช่วยเหลือเกี่ยวกับการอัปเกรด

หมายเหตุ: หากคุณมีช่องที่กำหนดเองจำนวนเล็กน้อย การทำตามขั้นตอนต่อไปนี้อาจง่ายกว่า เขียนช่องใหม่โดยใช้วิธีการสร้างช่องที่กำหนดเอง แทนที่จะพยายามอัปเกรดทีละส่วน

พื้นที่อันตราย

พื้นที่ที่อันตรายคือสถานที่ที่ทราบซึ่ง API มีการเปลี่ยนแปลง และฟิลด์ของคุณอาจ เสีย

Blockly.Field.register

ช่องต่างๆ ไม่ได้ลงทะเบียนผ่าน Blockly.Field.register(); อีกต่อไป มี ปัจจุบันคือเนมสเปซ FieldRegistry ที่จัดการการลงทะเบียน

Blockly.Field.register('my_field_name', myFieldClass);

เปลี่ยนเป็น:

Blockly.fieldRegistry.register('my_field_name', myFieldClass);

setText

ระบบไม่เรียกใช้ฟังก์ชัน setText โดย Blockly Core แล้ว ดังนั้นหาก setText มีตรรกะที่จะต้องย้ายไปยังฟังก์ชัน การจัดการมูลค่า ชุดฟังก์ชัน getText และฟังก์ชันการแสดงผล (ขึ้นอยู่กับการทำงานของฟังก์ชัน setText)

CustomFields.UpgradeField.prototype.setText = function(newText) {
  // Do validation.
  if (typeof newText != 'string' || newText === this.text_) {
    return;
  }

  // Fire event.
  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
    Blockly.events.fire(new Blockly.Events.BlockChange(
        this.sourceBlock_, 'field', this.name, this.text_, newText
    ));
  }

  // Update text value.
  this.text_ = 'prefix' + newText;

  // Rerender.
  this.size_.width = 0;
};

เปลี่ยนเป็น:

CustomFields.UpgradeField.prototype.doClassValidation_ = function(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

CustomFields.UpgradeField.prototype.getText = function() {
  return  'prefix' + this.value_;
}

บล็อกจะจัดการโดยอัตโนมัติสำหรับรายการต่อไปนี้

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

คุณจะต้องจัดการสิ่งต่อไปนี้

• การตรวจสอบค่า (doClassValidation_)
• ข้อความช่อง (getText)
• UI ของช่อง

หมายเหตุ: เราขอแนะนำให้คุณเปลี่ยนการเรียก setText เป็น การโทร setValue ครั้ง เนื่องจาก setValue รองรับการตรวจสอบความถูกต้อง แต่ setText ไม่รองรับ

การอัปเกรดที่แนะนำ

การอัปเกรดที่แนะนำ คือส่วนที่ ฟิลด์ API มีการเปลี่ยนแปลง แต่หากคุณ เลือกที่จะไม่ทำการเปลี่ยนแปลง ฟิลด์ของคุณก็น่าจะทำงานได้

จริงได้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ EDITABLE และ SERIALIZABLE โปรดดู พร็อพเพอร์ตี้ที่แก้ไขและเรียงลำดับได้

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

คำเตือนด้านล่างเป็นแบบข้ามไม่ได้ แต่คุณสามารถแก้ไขได้โดยกำหนด SERIALIZABLE พร็อพเพอร์ตี้:

Detected an editable field that was not serializable. Please define
SERIALIZABLE property as true on all editable custom fields. Proceeding
with serialization.

คำเตือนด้านบนหมายความว่า Blockly เชื่อว่าคุณต้องการให้ ฟิลด์ที่จะเรียงลำดับ (เนื่องจากพร็อพเพอร์ตี้ EDITABLE เป็นจริง) แต่ จนกว่าคุณจะกำหนดพร็อพเพอร์ตี้ SERIALIZABLE หากคุณเลือกที่จะ ปล่อยไว้เช่นนั้น ทุกอย่างจะทำงานอย่างถูกต้อง และฟิลด์ของคุณจะ แบบอนุกรม แต่คุณจะได้รับคำเตือนของคอนโซล

size_.width

this.size_.width = 0;

เปลี่ยนเป็น:

this.isDirty_ = true;

คุณไม่ต้องสนใจคำเตือนด้านล่าง แต่คุณแก้ไขได้โดยการตั้งค่า isDirty_ แทนพร็อพเพอร์ตี้ size_.width:

Deprecated use of setting size_.width to 0 to rerender a field. Set
field.isDirty_ to true instead.

คำเตือนด้านบนหมายความว่า Blockly ตรวจพบว่าคุณกำลังใช้วิธีการแบบเก่าสำหรับการแสดงผลอีกครั้ง และต้องการให้คุณใช้เมธอดใหม่

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ isDirty_ โปรดดูที่ isDirty_.

Init

ฟังก์ชัน init ได้รับการสร้างเป็นเทมเพลต ฟังก์ชัน ถึง ลดการทำซ้ำโค้ดในคลาสย่อย

CustomFields.UpgradeField.prototype.init = function() {
  if (this.fieldGroup_) {
    // Already initialized once.
    return;
  }

  // Call superclass.
  CustomFields.UpgradeField.superClass_.init.call(this);

  // Create DOM elements.
  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);

  // Bind events.
  this.mouseOverWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);

  // Render.
  this.setValue(this.getValue());
};

เปลี่ยนเป็น:

CustomFields.UpgradeField.prototype.initView = function() {
  CustomFields.UpgradeField.superClass_.initView.call(this);

  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);
};

CustomFields.UpgradeField.prototype.bindEvents_ = function() {
  CustomFields.UpgradeField.superClass_.bindEvents_.call(this);

  this.mouseOverWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);
};

ซึ่งหมายความว่าบล็อกนี้จะจัดการกับสิ่งต่อไปนี้โดยอัตโนมัติ

• กำลังตรวจสอบว่าได้เริ่มต้นช่องนี้แล้วหรือไม่
• กำลังสร้าง fieldGroup_
• กำลังแสดงข้อมูลในช่องนี้
• เคล็ดลับเครื่องมือการเชื่อมโยงและแสดงเหตุการณ์ของเครื่องมือแก้ไข

คุณจะต้องจัดการสิ่งต่อไปนี้

• กำลังเพิ่ม องค์ประกอบ DOM (initView)
• กำลังเพิ่ม เหตุการณ์การเชื่อมโยง (bindEvents_)
• การลบการเชื่อมโยงเหตุการณ์ (dispose)

สำคัญ: การสร้าง DOM ทั้งหมดควรทำใน initView เนื่องจาก มีประสิทธิภาพ ลองเปลี่ยนโครงสร้างภายในโค้ดหากคุณมีการสร้าง DOM ภายในโค้ด เครื่องมือสร้าง setText, setValue หรือ render_

onMouseDown_

CustomFields.UpgradeField.prototype.onMouseDown_ = function(e) {
  // ...
};

เปลี่ยนเป็น:

CustomFields.UpgradeField.prototype.showEditor_ = function() {
  // ...
}

เราขอแนะนำให้คุณลบล้างฟังก์ชัน showEditor_ เพื่อจัดการเมาส์ คลิกแทนฟังก์ชัน onMouseDown_ เนื่องจากอนุญาตให้อินพุตส่งได้ ผ่านระบบท่าทางสัมผัส

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไขได้ที่เอดิเตอร์

setValue

ตอนนี้ฟังก์ชัน setValue กลายเป็นเทมเพลตแล้ว ฟังก์ชัน ถึง ลดการทำซ้ำโค้ดในคลาสย่อย หากฟังก์ชัน setValue มีตรรกะ ลองเปลี่ยนโครงสร้างภายในโค้ดเพื่อให้เหมาะกับเส้นทางการจัดการมูลค่าที่อธิบายไว้ใน การจัดการมูลค่า

text_

ขอแนะนำว่าคุณไม่ควรเข้าถึงหรืออัปเดตพร็อพเพอร์ตี้ text_ ของ โดยตรง ให้ใช้ ฟังก์ชัน getText เพื่อเข้าถึงข้อความที่ผู้ใช้อ่านได้ในฟิลด์ของคุณและ ฟังก์ชัน setValue เพื่ออัปเดตค่าที่จัดเก็บไว้ของฟิลด์

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าของช่องเทียบกับข้อความ โปรดดู โครงสร้างของฟิลด์

การรับความช่วยเหลือเกี่ยวกับการอัปเกรด

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

สิ่งที่ต้องจัดเตรียม

เมื่อขอความช่วยเหลือ คุณควรถามคำถามที่เฉพาะเจาะจงดังนี้

ไม่แนะนำ: "มีอะไรผิดปกติในช่องนี้"

นอกจากนี้ ไม่แนะนำ: "ช่วยฉันอัปเกรดช่องนี้"

แนะนำ: "ข้อความในช่องไม่อัปเดตอย่างถูกต้อง"

นอกจากนี้ยังจำเป็นต้องจัดหาทรัพยากรให้กับบุคคลที่ช่วยเหลือคุณด้วย เหล่านี้ ไฟล์ต้องง่ายสำหรับผู้อื่น

ไม่แนะนำ

• รูปภาพของโค้ด
• รหัสไม่สมบูรณ์

แนะนำ

• กรอกรหัสฟิลด์ในรูปแบบข้อความ
• รูปภาพ GIF ที่แสดงลักษณะการทำงานที่ไม่ถูกต้อง
• ขั้นตอนในการทำให้เกิดลักษณะการทำงานที่ไม่ถูกต้องของช่องอีกครั้ง
• เวอร์ชันของบล็อกที่คุณกำลังอัปเกรด

ที่ที่จะโพสต์

โพสต์คำถามเกี่ยวกับการอัปเกรดในนักพัฒนาซอฟต์แวร์ที่ถูกบล็อก ฟอรัม

หากคุณแน่ใจว่าปัญหาคือแกนหลักบล็อกที่คุณใช้ได้ โพสต์ปัญหาด้วย บน GitHub แบบบล็อกแล้ว หากคุณตัดสินใจโพสต์ปัญหา โปรดกรอกข้อมูลทั้งหมด ข้อมูลที่ขอ