JavaScript “类”风格与对象关联委托

 结果：

 

类风格代码

function Widge(width, height) {
  this.width  = width || 50;
  this.height = height || 50;
  this.$elem = null;
}

Widge.prototype.render = function($where) {
  if(this.$elem) {
    this.$elem.css({
      width: this.width + "px",
      height: this.height + "px"
    }).appendTo($where);
  }
};

function Button(width, height, label) {
  Widge.call(this, width, height);
  this.label = label || "Default";
  this.$elem = $("<button>").text(this.label);
}

Button.prototype = Object.create(Widge.prototype);

Button.prototype.render = function($where) {
  Widge.prototype.render.call(this, $where);
  this.$elem.click(this.onClick.bind(this));
}

Button.prototype.onClick = function(evt) {
  console.log( "Button '" + this.label + "' clicked!" );
}

$(function() {
  var $body = $(document.body);
  var btn1 = new Button(125, 30, "Hello");
  var btn2 = new Button(150, 40, "World");

  btn1.render($body);
  btn2.render($body);
});

 

对象关联委托

var Widge = {
  init: function(width, height) {
    this.width = width || 50;
    this.height = height || 50;
    this.$elem = null;
  },
  insert: function($where) {
    if(this.$elem) {
      this.$elem.css({
        width: this.width + "px",
        height: this.height + "px"
      }).appendTo($where);
    }
  }
};

var Button = Object.create(Widge);

Button.setup = function(width, height, label) {
  this.init(width, height);
  this.label = label || "Default";
  this.$elem = $("<button>").text(this.label);
}；

Button.build = function($where) {
  this.insert($where);
  this.$elem.click(this.onClick.bind(this));
};

Button.onClick = function(evt) {
  console.log("Button " + this.label + " clicked!");
};

$(function() {
  var $body = $(document.body);
  
  var btn1 = Object.create(Button);
  btn1.setup(125, 30, "Hello");

  var btn2 = Object.create(Button);
  btn2.setup(150, 40, "World");

  btn1.build($body);
  btn2.build($body);
});