更新物件導向的程式寫法 #2
Description
Blockly似乎建議我們使用 class 而不是 function 的物件導向寫法
我看了 Blockly 的文件，Blockly.utils.object.inherits 和 googl.inherits 似乎都被移除了
以 fuFieldsImageDropdown 為例，程式應該長這樣
class fuFieldsImageDropdown extends Blockly.FieldTextInput {
constructor(text, options, opt_validate, opt_width, opt_height, opt_imageField) {
super(text, opt_validate);
this.textSize = 14; //px
this.imageSize = 24; //px
//If you change textSize value or imageSize value, you need to get divRowHeight value by testing.
this.divRowHeight = (options[0].length>1)?30.9:24.5;
this.divWidth = opt_width||200;
this.divHeight = opt_height||100;
this.imageField = opt_imageField;
this.divPadding = 5;
this.originList = options;
this.showList = [];
this.setSpellcheck(false);
this.clickWrapper_ = null;
this.moveWrapper_ = null;
this.downWrapper_ = null;
}
fromJson() {
return new fuFieldsImageDropdown(this.options['FieldsImageDropdown']);
}
showEditor_() {
super.showEditor_(this);
var div = Blockly.WidgetDiv.getDiv();
if (!div.firstChild) {
return;
}
var editor = this.dropdownCreate_();
Blockly.DropDownDiv.getContentDiv().appendChild(editor);
Blockly.DropDownDiv.setColour(this.sourceBlock_.style.colourPrimary,this.sourceBlock_.style.colourTertiary);
Blockly.DropDownDiv.showPositionedByField(
this, this.dropdownDispose_.bind(this));
this.clickWrapper_ =
Blockly.browserEvents.bind(this.imageElement_, 'click', this,
this.hide_);
this.moveWrapper_ =
Blockly.browserEvents.bind(this.imageElement_, 'mousemove', this,
this.onMouseMove);
this.downWrapper_ =
Blockly.browserEvents.bind(this.imageElement_, 'mousedown', this,
this.onMouseDown);
this.updateGraph_();
}class的寫法不僅易讀，也符合Javascript的趨勢