Intact组件继承

前面已经提过，使用Intact.extend()方法即可完成组件的继承。

定义父类组件

我们可以将所有页面的公共逻辑放入父类组件，然后子类组件继承它。在这里我们将用户信息模块的逻辑定义在父类组 件中。

  1. var Layout = Intact.extend({
  2.     defaults: function() {
  3.         return {
  4.             show: false
  5.         }
  6.     },
  8.     // 假设父模板编译后的模板函数名为parentTemplate
  9.     template: parentTemplate,
  11.     _init: function() {
  12.         // 用户信息是个通用模块，我们在父类组件获取用户数据
  13.         var self = this;
  14.         return new Promise(function(resolve) {
  15.             setTimeout(function() {
  16.                 self.set('userName', 'Javey');
  17.             }, 100)
  18.         });
  19.     },
  21.     toggleShow: function() {
  22.         this.set('show', !this.get('show'))
  23.     }
  24. });

继承父类组件

组件可以再被继承，下面我们定义一个子类组件继承上述组件，并扩展它。

  1. var Page = Layout.extend({
  2.     template: template,
  4.     back: function() {
  5.         histroy.back();
  6.     }
  7. });

上述扩展，仅仅新增了一个方法back()，就像所有类的继承一样，我们还可以重载父类的方法。在重载方法里，通过 以下两个方法，可以调用父类的方法：

  • this._super([...args]) 调用父类的同名方法，并且传入参数
  • this._superApply([args]) 调用父类的同名方法，并且以数组的形式传入参数

上述两个方法不能在异步函数中调用，如果需要在异步函数中调用，请先用变量将它们保存起来

大多数情况下，每个页面除了父类Layout中定义的获取用户数据之外，还需要获取页面自己需要的数据。通过上述方法 我们可以很方便做到。

  1. var Page = Layout.extend({
  2.     ...
  3.     _init: function() {
  4.         var self = this;
  5.         // 注入父模板函数
  6.         this.layout = parentTemplate; 
  7.         return Promise.all([
  8.             // 调用父类同名方法_init
  9.             this._super(),
  10.             new Promise(function(resolve) {
  11.                 setTimeout(function() {
  12.                     self.set('data', 'hello')
  13.                 });
  14.             })
  15.         ]);
  16.     }
  17.     ...
  18. });

至此我们完成了组件的继承，这样每个页面对应的Page组件，都可以完整控制整个页面的逻辑，并且最大限度地提高了 组件的复用性。