-
Notifications
You must be signed in to change notification settings - Fork 32
how to dev a component
一、Moye 目录结构
```
Moye
|- dep // 外部依赖模块
|- doc // 文档目录
|- example // 组件对应的示例
|- src // 组件源码,包括 LESS 与 JS
|- test // 测试用例
```
- doc/api 目录为
jsdoc3
自动生成的 API 文档。 - test 目录下
config.js
与main.js
为 edp-test 使用的测试配置,通常不需要修改。 - test/spec 下包含所有组件对应的单测,单测文件格式:
组件名
+Spec.js
。 - 项目构建基于
Grunt
的grunt build
命令。 - 更新
github
上 API 文档页面,可使用grunt page
命令。
注意: 所有目录必须使用**单数
**形式。
二、普通组件
-
继承自组件基类
Control
,基本结构(必须实现的字段和方法):var Control = require('./Control'); var Foo = Control.extend(/** @lends module:Foo.prototype */{ // 组件名 type: 'Foo', // 默认配置项 options: { }, // 初始化 init: function (options) { }, // 初始化控件的DOM结构 initStructure: function () { }, // 初始化控件的事件绑定 initEvents: function () { }, dispose: function () { } });
此时 Foo 具有父类 Control 中的属性与行为,如需实现 Control 类中同名方法,但保留父类方法相同逻辑,可使用
this.parent('方法名', [其余参数]);
。如需紧急修复公共控件的线上某方法的 bug,可使用
implement
方法改写该方法:Foo.implement({ bar: function () { } });
注意:
- 继承层次尽量保持两层,多层继承时调用
this.parent
可能导致意外的结果。 - 谨慎使用 implement 直接修改现有公共组件,除非需要影响所有使用者,否则尽量使用 extend 生成子类再改写。
- 组件主容器名统一为
main
。
- 继承层次尽量保持两层,多层继承时调用
-
所有继承自
Control
的子类都具有事件功能,实现见lib.observable
,主要方法为on
、un
与fire
。 -
所有继承自
Control
的子类都具有配置的参数,实现见lib.configurable
。对于on
开头后跟大写字母,值类型为函数的配置项,自动添加到事件绑定。 -
对于组件中需要绑定
this
的public
方法,可以使用lib.binds
方法,对于需要隐藏的私有方法,见第5
点。 -
私有属性使用下划线
_
作前缀,私有方法需要对外隐藏,在模块内定义名为privates
的内部变量挂载私有方法与事件处理方法,在组件初始化时(通常是init
方法)内使用this.bindEvents(privates)
显式调用基类方法,之后符合^on[A-Z]
规则的方法名,将自动绑定 this,其它私有方法在调用时使用 call 或 apply 动态绑定 this,当然也可以在实现时使方法的第一个参数为类实例对象。 -
Control
中实现的dispose
方法默认作了一些清理,如果绑定了其它 DOM 事件或希望作别的处理,可以自行实现dispose
方法,在方法最后再调用this.parent('dispose');
。
三、非 UI 类组件
- 可以参考
Control
,直接使用lib.newClass
创建。 - 如需事件支持,请使用
Foo.implement(lib.observable)
。 - 如需可配置参数,请使用
Foo.implement(lib.configurable)
;
四、文档注释
所有组件,必须有完善的文档注释,遵循 jsdoc3
的规范,使用 grunt jsdoc
命令生成后验证,务必保证生成正确的 API 文档。可以参考现有组件的注释。
五、编写使用范例
六、测试
务必完成代码风格、单元测试及代码覆盖率的要求。
七、提交
在代码 Review 没问题后,会合并到公共组件中。
注意
新组件开发必须使用新的分支开发,规范见 moye组件准入规范