Skip to content

更新物件導向的程式寫法 #2

Description

@ianfun

Blockly似乎建議我們使用 class 而不是 function 的物件導向寫法

我看了 Blockly 的文件,Blockly.utils.object.inheritsgoogl.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的趨勢

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions