การปรับแต่งขั้นสูง

Blockly ช่วยให้คุณปรับแต่งฟังก์ชันการทำงานบางอย่างได้โดยการแทนที่คลาส Blockly ที่เกี่ยวข้อง

คลาสที่แทนที่ได้

คุณแทนที่คลาส Blockly ต่อไปนี้ได้

ชั้นเรียน Blockly	SDK โฆษณา B	ชื่อประเภทรีจิสทรี
Blockly.dragging.Dragger	Blockly.IDragger	blockDragger
Blockly.ConnectionChecker	Blockly.IConnectionChecker	connectionChecker
Blockly.InsertionMarkerPreviewer	Blockly.IConnectionPreviewer	connectionPreviewer
Blockly.HorizontalFlyout	Blockly.IFlyout	flyoutsHorizontalToolbox
Blockly.VerticalFlyout	Blockly.IFlyout	flyoutsVerticalToolbox
Blockly.MetricsManager	Blockly.IMetricsManager	metricsManager
Blockly.Toolbox	Blockly.IToolbox	toolbox
Blockly.VariableMap	Blockly.IVariableMap	variableMap
Blockly.VariableModel	Blockly.IVariableModel	--

ดูข้อมูลเกี่ยวกับวิธีแทนที่โปรแกรมแสดงผลได้ที่สร้างโปรแกรมแสดงผลที่กำหนดเอง

สร้างชั้นเรียนทดแทน

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

หากต้องการระบุให้เครื่องมือตรวจสอบประเภททราบว่าคุณใช้การติดตั้งใช้งานอินเทอร์เฟซที่เฉพาะเจาะจง ให้ ใส่คำอธิบายประกอบในคลาสด้วย@implements {InterfaceName}แท็ก JSDoc (ใน JavaScript) หรือคีย์เวิร์ด implements (ใน TypeScript)

บอก Blockly เกี่ยวกับคลาสแทนที่

คุณบอก Blockly เกี่ยวกับคลาสแทนที่ได้ 2 วิธี ได้แก่ ลงทะเบียนเป็น คลาสเริ่มต้นของประเภท (แนะนำ) หรือแทรกลงใน Blockly โดยใช้plugins ตัวเลือกการกำหนดค่า

ลงทะเบียนคลาสแทนที่เป็นค่าเริ่มต้น

วิธีที่แนะนำในการบอก Blockly เกี่ยวกับคลาสการแทนที่คือการลงทะเบียนคลาสดังกล่าว เป็นค่าเริ่มต้นสำหรับประเภทของคลาส โดยเรียกใช้ Blockly.registry.register โดยใช้ชื่อ Blockly.registry.DEFAULT และตั้งค่าพารามิเตอร์ opt_allowOverrides เป็น true

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

แทรกคลาสแทนที่

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

(แม้ว่าpluginsชื่อพร็อพเพอร์ตี้จะไม่จำเป็นต้องแพ็กเกจและจัดจำหน่ายผ่าน npm เหมือนกับปลั๊กอินที่ใช้ขยาย Blockly)

ส่งชั้นเรียนทดแทนให้ Blockly.inject โดยทำอย่างใดอย่างหนึ่งต่อไปนี้

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

หรือลงทะเบียนชั้นเรียนโดยใช้ Blockly.registry.register และส่งชื่อที่ลงทะเบียนแล้วไปยัง Blockly.inject ซึ่งจะมีประโยชน์หากคุณจัดเก็บตัวเลือกการกำหนดค่า เป็น JSON ล้วน

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', CustomMetricsManagerClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}