# 模块化

模块相当于一个独立的命名空间，UIExtension 将所有 component、 controller 和 directive 放置在不同的模块中，以此减少名称冲突的问题。目前，模块可使用在以下的场景中：

根模块: 基础组件和指令都放置在根模块下，根模块没有模块名，使用时不需要加模块名前缀。
业务模块：业务组件和 controller。
Addon 创建的模块

详细的信息将会在 Components 相关章节中体现。

# 新建一个模块

const module = PDFUI.module('module-name', [
    // ...dependencies
]);

模块名称不可以重复，否则会报错。

第二个参数是依赖的模块，可以传名称或模块对象。如果没有依赖的模块，则可以传空数组，但不能不传。

# 获取模块对象

获取根模块对象

根模块是所有模块的基础，根模块包含所有内置的组件和布局等信息。
```
const root = PDFUI.root();
```
获取自定义模块对象

和创建模块的方法一样，但没有第二个参数。当模块名不存在时会报错。
```
const module = PDFUI.module('module-name');
```

# 模块对象上的方法

注册新组件

// 注册一个自定义控件。
module.registerComponent(class ComponentClass extends UIExtension.Component{
    static getName() {
    return 'custom-component';
    }
});
// 或者
module.registerComponent(UIExtension.Component.extend('custom-component', {
//
}));
module.getComponentClass('custom-component');

在模板中使用自定义组件：

<module-name:custom-component></module-name:custom-component>

module.registerPreConfiguredComponent('pre-configured-btn', {
    template: '<xbutton name="pre-configured-btn"></xbutton>',
    config: [{
        target: 'pre-configured-btn',
        callback: function() {
            alert('button click')
        }
    }]
})

在模板中使用组件

<module-name:pre-configured-btn></module-name:pre-configured-btn>

module.registerController(class CustomController extends Controller {
    static getName() {
        return 'CustomController';
    }
    handle() {
        alert('')
    }
});

或者

module.controller('CustomController', {
    handle: function() {
        alert('')
    }
});

在模板中使用 controller

<module-name:custom-component @controller="module-name:CustomController"></module-name:custom-component>

← Appearance 布局模板 →