继承 / inherits

优质

小牛编辑

139浏览

2023-12-01

每个可实例化的moye控件都应该继承自Control基类。可以通过Control.extend(proto)方法来创建一个新的控件类。

参数proto是一个Object类型对象，其所有属性都被合并到新控件的原型链对象上。因此，可以在proto上挂接所需要的属性或方法，控件实例可以直接访问。

var Control = require('moye/Control');
var Test = Control.extend({

  type: 'Test',

  init: function (options) {
    this.$parent(options);
  },

  initStructure: function () {
    this.main.innerHTML = 'test';
  },

  initEvents: function () {
    $(this.main).on('click', $.proxy(this.onMainClick, this));
  },

  onMainClick: function (e) {
    console.log('test clicked');
  },

  dispose: function () {
    $(this.main).off('click');
    this.$parent();
  }

});

var Test2 = Test.extend({

  type: 'Test2',

  onMainClick: function (e) {
    console.log('test2 clicked');
    this.$parent(e);
  }

});

可以通过覆盖基类Control提供了一系列的接口来实现子控件的具体交互逻辑。这里主要想介绍一下调用父类接口的方法，即：

// 凡是覆盖父类接口的方法(@override)中，
// 都可以使用`this.$parent(args)`的方式来调用父类接口
this.$parent( ... );

因此，在Test2实例的主元素被点击进会在控制输出如下结果：

test2 clicked
test clicked