-
Notifications
You must be signed in to change notification settings - Fork 57
Inherit
TANG edited this page Dec 14, 2016
·
7 revisions
在 sugar.js 中,所有的视图组件都是通过继承 sugar.Component 来实现定义的:
var MyComponent = sugar.Component.extend({ init: function (config) { this.Super('init', config, { // 在这里配置组件的参数 }); } });
以上是定义一个视图组件最基本的"套路",关于组件继承有两个关键字是需要注意的:
extend 是组件的继承方法,MyComponent 是继承于 sugar.Component 的组件,MyComponent 也拥有继承方法 extend ,所以 MyComponent 也可以作为一个基础组件类来继承出其他组件:
var MyComponent2 = MyComponent.extend({ init: function (config) { this.Super('init', config); } // 在这里可以选择性的新增属性或方法去完成 MyComponent 以外功能需求 // 同时 MyComponent 最初定义的方法和功能仍然存在,除非在这里被重写 // 不管新增或者被重写与否,原来的 MyComponent 不受任何影响(immutable) }); // 可以无限继承下去 var MyComponent3 = MyComponent2.extend({ init: function (config) { this.Super('init', config); } }); var MyComponent4 = MyComponent3.extend({ init: function (config) { this.Super('init', config); } }); // ...
在组件内部 this.Super 的作用是调用指定父类的方法。以上在组件的 init 方法内调 this.Super('init', config) 的作用就是调用父类的 init 方法并传入组件配置,从而实现组件的渲染和构建,如果是多层继承关系也会进行逐层父类的调用,最终都会调用到 sugar.Component 的 init 方法。
组件视图的渲染细节已经全部在 sugar.Component 的 init 方法中去实现和完成,这就是为什么在定义组件的时候只需要简单的配置参数、定义初始状态和数据就可以实现一个完整的组件,而完全不必去关心组件构建细节的原因。
上一篇:组件的复用
下一篇:组件的嵌套