Skip to content

how to dev a component

leon edited this page Jan 29, 2015 · 4 revisions

如何开发 Moye 组件

一、Moye 目录结构

```
Moye
    |- dep        // 外部依赖模块
    |- doc        // 文档目录
    |- example    // 组件对应的示例
    |- src        // 组件源码,包括 LESS 与 JS
    |- test       // 测试用例

```
  • doc/api 目录为 jsdoc3 自动生成的 API 文档。
  • test 目录下 config.jsmain.js 为 edp-test 使用的测试配置,通常不需要修改。
  • test/spec 下包含所有组件对应的单测,单测文件格式: 组件名 + Spec.js
  • 项目构建基于 Gruntgrunt build 命令。
  • 更新 github 上 API 文档页面,可使用 grunt page 命令。

注意: 所有目录必须使用**单数**形式。

二、普通组件

  1. 继承自组件基类 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
  2. 所有继承自 Control 的子类都具有事件功能,实现见 lib.observable,主要方法为 onunfire

  3. 所有继承自 Control 的子类都具有配置的参数,实现见 lib.configurable。对于 on 开头后跟大写字母,值类型为函数的配置项,自动添加到事件绑定。

  4. 对于组件中需要绑定 thispublic方法,可以使用 lib.binds 方法,对于需要隐藏的私有方法,见第 5 点。

  5. 私有属性使用下划线 _ 作前缀,私有方法需要对外隐藏,在模块内定义名为 privates 的内部变量挂载私有方法与事件处理方法,在组件初始化时(通常是 init 方法)内使用 this.bindEvents(privates) 显式调用基类方法,之后符合 ^on[A-Z] 规则的方法名,将自动绑定 this,其它私有方法在调用时使用 call 或 apply 动态绑定 this,当然也可以在实现时使方法的第一个参数为类实例对象。

  6. Control 中实现的 dispose 方法默认作了一些清理,如果绑定了其它 DOM 事件或希望作别的处理,可以自行实现 dispose 方法,在方法最后再调用 this.parent('dispose');

三、非 UI 类组件

  1. 可以参考 Control,直接使用 lib.newClass 创建。
  2. 如需事件支持,请使用 Foo.implement(lib.observable)
  3. 如需可配置参数,请使用 Foo.implement(lib.configurable);

四、文档注释

所有组件,必须有完善的文档注释,遵循 jsdoc3 的规范,使用 grunt jsdoc 命令生成后验证,务必保证生成正确的 API 文档。可以参考现有组件的注释。

五、编写使用范例

六、测试

务必完成代码风格、单元测试及代码覆盖率的要求。

七、提交

在代码 Review 没问题后,会合并到公共组件中。

注意

新组件开发必须使用新的分支开发,规范见 moye组件准入规范

Clone this wiki locally